An e-commerce storefront starter built with Qwik and Vendure

Last update: Dec 31, 2022

Related tags

Learning resource ecommerce headless qwik

Overview

Vendure Qwik Storefront Starter️

An e-commerce storefront for Vendure built with Qwik & Qwik City.

👉 qwik-storefront.vendure.io

To do

Cart ✅
Checkout flow ✅
Search facet filters ✅
Login ✅
Account creation
Customer account management
SPA-mode navigation
Set up GraphQL code generation

Contributions welcome!

Development Builds

Server-side Rendering (SSR) and Client

Server-side rendered index.html, with client-side modules prefetched and loaded by the browser. This can be used to test out server-side rendered content during development, but will be slower than the client-only development builds.

npm run dev.ssr

Production Builds

A production build should generate the client and server modules by running both client and server build commands.

npm run build

Server Modules

Production build that creates the server-side render (SSR) module that is used by the server to render the HTML.

npm run build.ssr

Express Server

This app has a minimal Express server implementation. After running a full build, you can preview the build using the command:

npm run serve

Then visit http://localhost:8080/

Related

Comments

Remove mutable wrappers from props

Remove the mutable wrapper functions from props. Everything seems to work the same as before, but this should allow for better treeshaking of data on the server.

opened by nnelgxorz 6
Use Link component for SPA navigation

Currrently internal navigations do full page reloads. Per Giorgio there was an issue with the Link component at some point - it needs to be checked in the latest Qwik City to see if we can implement SPA mode nav.

opened by michaelbromley 3
Support AVIF and WebP images via picture & source tags

Adds responsive image loading for front page bicycle header image based on client screensize. Adds alt text for A11y. Adds additional sources to all images supporting AVIF and WebP.

Reduces overall image weight on front page: 178KB -> 87KB (Including a larger header image at 1000px for largest screen size)

Electronics Category page: 332KB -> 153KB

Also, this removes the additional gap (which I'm not sure was by design?), that shows on larger breakpoints:

Also adds back loading="lazy" and decoding="async" attributes since after profiling I didn't see specific CLS improvements when removed. @gioboa, could you weigh in?

opened by machineloop 3
Improve Accessiblity of Subscription Input and Button
Lighthouse A11y score catches the following issue:

Input is not properly labelled, though an invisible label is present for screenreaders, it's not associated with the Input. Adding anid to the label and aria-labelledby attribute to the input element should fix.

The Subscribe button has a poor contrast ratio of 3.68:1, doesn't meet WCAG AA standard of 4.5:1: https://webaim.org/resources/contrastchecker/?fcolor=FFFFFF&bcolor=3482F6 Solution here would be to take the hover state which has darker background and higher contrast ratio of 5.16:1 and use it as the normal button color:https://webaim.org/resources/contrastchecker/?fcolor=FFFFFF&bcolor=2563EB, then replace the hover state with a darker color like rgb(48, 48, 133). However these look like colors coming from tailwind, so may not be that straightforward.
opened by machineloop 1
Improve accessiblity of cart button
Addresses #18 : Improve Accessibility of Cart Button

Adds 'Cart' name attribute to cart button markup

Adds aria-label containing '0 items in cart' to reflect count of added items to cart.
opened by machineloop 1
Add Alt attribute to Product Img tags
Add 'alt' attribute to Img tags. Maybe I need to add a name or description to the GQL query for each Product in the rendered collection? Then I can pull that product name/description and drop it in the alt attribute in the CollectionCard component.

From MDN:

Content with images must be labeled

Provide descriptive text for all contentful (that is, non-decorative) images and image-like elements. This includes SVG images, , , , and elements, as well as elements where type=image and