Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/w3bdesign/nextjs-woocommerce

🔥 Next.js (React) headless eCommerce site with Typescript, WordPress (WooCommerce) backend and Algolia search
https://github.com/w3bdesign/nextjs-woocommerce

algolia algolia-search animatecss apollo ecommerce ecommerce-site es6 framer-motion graphql nextjs react react-hook-form styled-components tailwindcss typescript woocommerce woocommerce-api wp-graphql

Last synced: about 1 month ago
JSON representation

🔥 Next.js (React) headless eCommerce site with Typescript, WordPress (WooCommerce) backend and Algolia search

Awesome Lists containing this project

README 

        
[![Playwright Tests](https://github.com/w3bdesign/nextjs-woocommerce/actions/workflows/playwright.yml/badge.svg)](https://github.com/w3bdesign/nextjs-woocommerce/actions/workflows/playwright.yml)

[![Codacy Badge](https://api.codacy.com/project/badge/Grade/29de6847b01142e6a0183988fc3df46a)](https://app.codacy.com/gh/w3bdesign/nextjs-woocommerce?utm_source=github.com&utm_medium=referral&utm_content=w3bdesign/nextjs-woocommerce&utm_campaign=Badge_Grade_Settings)

[![CodeFactor](https://www.codefactor.io/repository/github/w3bdesign/nextjs-woocommerce/badge)](https://www.codefactor.io/repository/github/w3bdesign/nextjs-woocommerce)

[![Quality Gate Status](https://sonarcloud.io/api/project_badges/measure?project=w3bdesign_nextjs-woocommerce&metric=alert_status)](https://sonarcloud.io/dashboard?id=w3bdesign_nextjs-woocommerce)

 

![Screenshot 1](./screenshots/screenshot1.jpg)



## Star History 



[![Star History Chart](https://api.star-history.com/svg?repos=w3bdesign/nextjs-woocommerce&type=Date)](https://star-history.com/#w3bdesign/nextjs-woocommerce&Date)



# Next.js Ecommerce site with WooCommerce backend



## Live URL: 



## Table Of Contents (TOC)



-   [Installation](#Installation)

-   [Features](#Features)

-   [Issues](#Issues)

-   [Troubleshooting](#Troubleshooting)

-   [TODO](#TODO)



## Installation



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



-   [woocommerce](https://wordpress.org/plugins/woocommerce) Ecommerce for WordPress.

-   [wp-graphql](https://wordpress.org/plugins/wp-graphql) Exposes GraphQL for WordPress.

-   [wp-graphql-woocommerce](https://github.com/wp-graphql/wp-graphql-woocommerce) Adds WooCommerce functionality to a WPGraphQL schema.

-   [wp-algolia-woo-indexer](https://github.com/w3bdesign/wp-algolia-woo-indexer) WordPress plugin coded by me. Sends WooCommerce products to Algolia. Required for search to work. 



Optional plugin:



-   [headless-wordpress](https://github.com/w3bdesign/headless-wp) Disables the frontend so only the backend is accessible. (optional)



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



-   WordPress version 6.3.2

-   WooCommerce version 7.4.0

-   WP GraphQL version 1.13.8

-   WooGraphQL version 0.12.0

-   WPGraphQL CORS version 2.1



2.  For debugging and testing, install either:



     (Firefox)



     (Chrome)



3.  Make sure WooCommerce has some products already



4.  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 



5.  Modify the values according to your setup



6.  Start the server with `npm run dev`



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



8.  Add a product to the cart



9.  Proceed to checkout (GĂĽ til kasse)



10. Fill in your details and place the order



## Features



-   Next.js version 14.2.5

-   React 18

-   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](https://github.com/w3bdesign/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](https://github.com/wp-graphql/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