Skip to content

πŸ”₯ Next.js (React) headless eCommerce site with Typescript, WordPress (WooCommerce) backend and Algolia search

License

Notifications You must be signed in to change notification settings

w3bdesign/nextjs-woocommerce

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

Playwright Tests Codacy Badge CodeFactor Quality Gate Status

Screenshot 1

Star History

Star History Chart

Next.js Ecommerce site with WooCommerce backend

Table Of Contents (TOC)

Installation

  1. Install and activate the following required plugins, in your WordPress plugin directory:

Optional plugin:

The current release has been tested and is confirmed working with the following versions:

  • WordPress version 6.6.2
  • WooCommerce version 7.4.0
  • WP GraphQL version 1.13.8
  • WooGraphQL version 0.12.0
  • WPGraphQL CORS version 2.1
  1. For debugging and testing, install either:

    https://addons.mozilla.org/en-US/firefox/addon/apollo-developer-tools/ (Firefox)

    https://chrome.google.com/webstore/detail/apollo-client-developer-t/jdkknkkbebbapilgoeccciglkfbmbnfm (Chrome)

  2. Make sure WooCommerce has some products already

  3. Clone or fork the repo and modify .env.example and rename it to .env

    Then set the environment variables accordingly in Vercel or your preferred hosting solution.

    See https://vercel.com/docs/environment-variables

  4. Modify the values according to your setup

  5. Start the server with npm run dev

  6. Enable COD (Cash On Demand) payment method in WooCommerce

  7. Add a product to the cart

  8. Proceed to checkout (GΓ₯ til kasse)

  9. Fill in your details and place the order

Features

  • Next.js version 14.3.11
  • React version 18.3.1
  • Typescript
  • Tests with Playwright
  • Connect to Woocommerce GraphQL API and list name, price and display image for products
  • Support for simple products and variable products
  • Cart handling and checkout with WooCommerce (Cash On Delivery only for now)
  • Algolia search (requires algolia-woo-indexer)
  • Meets WCAG accessibility standards where possible
  • Placeholder for products without images
  • Apollo Client with GraphQL
  • React Hook Form
  • Native HTML5 form validation
  • Animations with Framer motion, Styled components and Animate.css
  • Loading spinner created with Styled Components
  • Shows page load progress with Nprogress during navigation
  • Fully responsive design
  • Category and product listings
  • Show stock status
  • Pretty URLs with builtin Nextjs functionality
  • Tailwind 3 for styling
  • JSDoc comments

Troubleshooting

I am getting a cart undefined error or other GraphQL errors

Check that you are using the 0.12.0 version of the wp-graphql-woocommerce plugin

The products page isn't loading

Check the attributes of the products. Right now the application requires Size and Color.

Issues

Overall the application is working as intended, but it has not been tested extensively in a production environment. More testing and debugging is required before deploying it in a production environment.

With that said, keep the following in mind:

  • Currently only simple products and variable products work without any issues. Other product types are not known to work.
  • Only Cash On Delivery (COD) is currently supported. More payment methods may be added later.

This project is tested with BrowserStack.

TODO

  • Add total to cart/checkout page
  • Copy billing address to shipping address
  • Add order dashboard and require login
  • Hide products not in stock
  • Add better SEO
  • Re-add Next/image when it is working better