denoland / merch Goto Github PK

The Deno shop!

TypeScript 99.58% CSS 0.42%

merch's Introduction

Deno Merch

The Deno shop! Built with Deno and Fresh, powered by Shopify, and deployed to the edge with Deno Deploy.

Using SSR, islands architecture, and being deployed close to users, this shop has a perfect Lighthouse score of 100. Learn how you can build an e-commerce site with a perfect Lighthouse score.

Screen Shot

Develop locally

Clone the repository
Set up Shopify credentials in the .env, follows .env.example.
Start the project in local mode:
```
deno task start
```

Shopify Configuration Guide

Create a new account or use an existing one. https://accounts.shopify.com/store-login
Create a new app. https://<yourshopname>.myshopify.com/admin/settings/apps
Once your app has been created, select use it. Then select "Storefront API integration" link
Next, check Storefront API access scopes
- unauthenticated_read_product_listings access should be fine to get you started.
- Add more scopes if you require additional permissions.

Shopify Troubleshooting

If you encounter an error like error code 401 you likely didn't set this up correctly. Revisit your scopes and be sure add at least one test product. Also make sure you are using the Storefront API and not the Admin API as the endpoints and scopes are different.
If you do not see a checkout sidebar, or if it is empty after adding a product, you need to add an image to your test product.

Deploy to global

Sign in to dash.deno.com, create a new project, and then link to your clone version of the repository. Please ensure add shopify secret before link:

Perfect Lighthouse score

Today’s consumers are more demanding than ever, especially when it comes to shopping online. These experiences must feel intuitive and snappy. Even a 100-millisecond delay in load time can hurt conversion rates by 7%.

Our merch store, built with Fresh and Shopify’s storefront API, is server-side rendered (SSR) with some islands of interactivity and deployed close to users on the edge. Sending only what the client needs keeps the site lean and fast, earning it a perfect Lighthouse score.

Check out our tutorial that teaches you how to build an e-commerce site with a perfect Lighthouse score.

merch's People

Contributors

Stargazers

Watchers

merch's Issues

Adding to cart shows 1 then 0 then 1

Go to https://merch.deno.com/products/sticker-sheet on desktop
Make sure your cart is empty
Click "Add to cart"
Notice how the cart in the header now shows 1
Click "Add to cart" again to add a second item
Notice how the cart showed 1 then 0 then 1

I expect it not to show 0 when there's already an item in the cart

Add merch.deno.com custom domain

meta social og tags are incomplete

looks like title, description, and image tags are not being populated properly

https://www.opengraph.xyz/url/https%3A%2F%2Fmerch.deno.com%2Fproducts%2Fplay-hoodie/

Cart: UI is not always updated when adding to cart

Sometimes adding an item to cart does not update the badge on the cart in the UI. Refreshing the page or leaving the window and then returning cause the badge to refresh properly.

Site not working

The website is currently not working, I'm getting 500 errors on all javascript files. Checked on my phone and other browsers as well.

Product index page: row height should be consistent

Differences in product image size currently throw off the height:

favicon?

would be excellent to have a favicon. we could reuse denolands for now.

Update to [email protected]

add link to source code in footer

Lithuania and Latvia not available for shipping

why are there no shipping options for Lithuania and Latvia?

if there's a proper reason, could a disclaimer be added?

Preact error when using useSwr

Steps to reproduce

Clone repo
Configure env vars
Run deno task start
Access home page

The following issue is happening with me when rendering the home page of the merch store:

An error occured during route handling or page rendering. TypeError: Cannot read properties of undefined (reading 'context')
    at j (https://esm.sh/v91/[email protected]/deno/hooks.js:2:1028)
    at br (https://esm.sh/v91/[email protected]/X-YS9yZWFjdDpwcmVhY3QvY29tcGF0CmUvcHJlYWN0L2NvbXBhdA/deno/swr.js:2:6259)
    at https://esm.sh/v91/[email protected]/X-YS9yZWFjdDpwcmVhY3QvY29tcGF0CmUvcHJlYWN0L2NvbXBhdA/deno/swr.js:2:6365
    at useCart (file:///Users/lucis/personal/merch/utils/data.ts:102:10)
    at Object.Cart (file:///Users/lucis/personal/merch/islands/Cart.tsx:47:27)
    at h (https://esm.sh/v91/[email protected]/X-ZS9wcmVhY3Q/deno/preact-render-to-string.js:4:1003)
    at h (https://esm.sh/v91/[email protected]/X-ZS9wcmVhY3Q/deno/preact-render-to-string.js:9:66)
    at h (https://esm.sh/v91/[email protected]/X-ZS9wcmVhY3Q/deno/preact-render-to-string.js:4:1103)
    at h (https://esm.sh/v91/[email protected]/X-ZS9wcmVhY3Q/deno/preact-render-to-string.js:9:66)
    at h (https://esm.sh/v91/[email protected]/X-ZS9wcmVhY3Q/deno/preact-render-to-string.js:9:66)

I suppose it's something related to the import_map.json, but I couldn't pinpoint the problem:

import_map.json

{
  "imports": {
    "@/": "./",
    "@twind": "./utils/twind.ts",
    "@twind/aspect-ratio": "https://esm.sh/@twind/[email protected]",

    "$fresh/": "https://deno.land/x/[email protected]/",
    "preact": "https://esm.sh/[email protected]",
    "preact/": "https://esm.sh/[email protected]/",
    "preact-render-to-string": "https://esm.sh/[email protected]?external=preact",

    "twind": "https://esm.sh/[email protected]",
    "twind/": "https://esm.sh/[email protected]/",
    "$std/": "https://deno.land/[email protected]/",
    "swr": "https://esm.sh/[email protected]?alias=react:preact/compat&external=preact/compat"
  }
}

improve mobile pagespeed score

https://pagespeed.web.dev/report?url=https%3A%2F%2Fmerch.deno.com%2F&form_factor=mobile

there are some quick wins possible I think:

add a preconnect for https://cdn.shopify.com/
load properly sized images (currently loading full resolution)

Safari errors

Good day guys! Thank you for the awesome product. Noticed some bugs in Safari.

Safari Monterey(15.3) error related to incorrect usage of dialog polyfill.
https://github.com/GoogleChrome/dialog-polyfill
Haven't done:

Include the CSS in the of your document, and the JS anywhere before referencing dialogPolyfill.
Register the elements using dialogPolyfill.registerDialog(), passing it one node at a time. This polyfill won't replace native support.

Safari Big Sur(14.1) and lower error: 'unexpected keyword import'

text styling not preserved from shopify wysiwyg editor

how it looks in shopify:

how it looks in our store:

<hgroup> being used?

I was wondering why <hgroup> was used here

It has an h2 & h3 element which following the docs is not a valid use case.
( Valid : 0 / 1 <p> + 1 <h1-6> + 0 / 1 <p> )

The MDN Docs also mention the following:

Note: The <hgroup> element is not recommended as it does not work 
properly with assistive technologies. It was removed from the W3C 
HTML specification but is still part of the WHATWG specification 
and is at least partially supported by most browsers.

Add styling for links in product descriptions

For this item: https://merch.deno.com/products/deno-poster

"Illustrated by Mona Finden." contains a link, but there is no styling to distinguish the link from surrounding text.

Can not start the project in local mode

Task start deno run -A --watch=static/,routes, dev.ts
Watcher Process started.
The manifest has been generated for 4 routes and 3 islands.
error: Uncaught (in promise) SyntaxError: The requested module '/v99/[email protected]/deno/twind.js' does not provide an export named 'directive'
  await import(entrypoint);
  ^
    at async dev (https://deno.land/x/[email protected]/src/dev/mod.ts:187:3)
    at async file:///Users/homerh/Deno/denoland-merch/dev.ts:6:1
Watcher Process finished. Restarting on file change...

License?

Am I blind or does the repo not have a license?

Btw the perfect lighthouse score badge seems to be broken ..

Update readme

should have screenshot
should say what this is
should say how to clone and get started

Product display page: changing the variant should update the page

When the selected variant on the page changes some areas of the UI need to be updated:

Price
Out of stock functionality
Add to cart functionality
Possibly more

Not compatible with deno-deploy

Cloned this to deploy on deno-deploy and running into this error when I try to load a page:

An error occurred during route handling or page rendering. TypeError: Cannot read properties of null (reading 'useSyncExternalStore')
at n.useSyncExternalStore (https://esm.sh/stable/[email protected]/X-ZS9wcmVhY3QvY29tcGF0/deno/react.mjs:2:6960)
at Pe (https://esm.sh/v98/[email protected]/X-YS9yZWFjdDpwcmVhY3QvY29tcGF0CmUvcHJlYWN0L2NvbXBhdA/deno/swr.mjs:2:3511)
at https://esm.sh/v98/[email protected]/X-YS9yZWFjdDpwcmVhY3QvY29tcGF0CmUvcHJlYWN0L2NvbXBhdA/deno/_internal.js:2:8091
at https://esm.sh/v98/[email protected]/X-YS9yZWFjdDpwcmVhY3QvY29tcGF0CmUvcHJlYWN0L2NvbXBhdA/deno/_internal.js:2:8335
at useCart (file:///src/utils/data.ts:67:12)
at Object.Cart (file:///src/islands/Cart.tsx:35:31)
at https://esm.sh/v98/[email protected]/X-ZS8q/deno/preact-render-to-string.mjs:12:1590
at T (https://esm.sh/v98/[email protected]/X-ZS8q/deno/preact-render-to-string.mjs:12:1617)
at T (https://esm.sh/v98/[email protected]/X-ZS8q/deno/preact-render-to-string.mjs:12:2593)
at T (https://esm.sh/v98/[email protected]/X-ZS8q/deno/preact-render-to-string.mjs:12:1693)

It looks like in Cart.tsx it is depending on SWR that has updated with a breaking change.

Add "🍋 built with Fresh" to footer

Change the order of how items appear on the site

Right now it looks like we order products by created by date desc.

whenever we add new products, they end up at the bottom of the collection.

would be nice to either reverse the order or have another ordering mechanism, since we want to promote the newest items at the top.

show sold out message when sold out

right now, it just removes the "add to cart" button when sold out

Missing countries at Shopify Checkout?

It seems like there might be a problem, as I couldn't find Albania listed among the selectable countries on the Shopify checkout page. I'm wondering if this omission was intentional. What raised my concern is that even countries that are generally considered less accessible than Albania and the Western Balkans, like Somalia, are included.

I'm interested in purchasing some items from your store, so I believe the solution probably lies in adjusting the Shopify configurations.

PS: If you do decide to add the Western Balkans, please remember to include Kosova/Kosovo as well.

Cart: style using Tailwind

Use https://tailwindui.com/components/ecommerce/components/shopping-carts

show more than one image?

if i add multiple images in shopify:

looks like they're not all showing up in the storefront: