Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/w3bdesign/nuxtjs-woocommerce
⚡️ Nuxt 3 and Vue 3 headless eCommerce site with WooCommerce backend and Algolia search
https://github.com/w3bdesign/nuxtjs-woocommerce
algolia apollo graphql javascript nuxt nuxt-3 nuxtjs tailwindcss vue woocommerce wordpress wp-graphql
Last synced: about 3 hours ago
JSON representation
⚡️ Nuxt 3 and Vue 3 headless eCommerce site with WooCommerce backend and Algolia search
- Host: GitHub
- URL: https://github.com/w3bdesign/nuxtjs-woocommerce
- Owner: w3bdesign
- License: agpl-3.0
- Created: 2020-11-07T22:39:24.000Z (almost 4 years ago)
- Default Branch: master
- Last Pushed: 2024-09-23T15:18:32.000Z (1 day ago)
- Last Synced: 2024-09-23T18:05:10.774Z (about 23 hours ago)
- Topics: algolia, apollo, graphql, javascript, nuxt, nuxt-3, nuxtjs, tailwindcss, vue, woocommerce, wordpress, wp-graphql
- Language: Vue
- Homepage: https://nuxt.dfweb.no
- Size: 27.4 MB
- Stars: 193
- Watchers: 9
- Forks: 45
- Open Issues: 14
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://github.com/w3bdesign/nuxtjs-woocommerce/actions/workflows/playwright.yml)
[](https://app.codacy.com/gh/w3bdesign/nuxtjs-woocommerce?utm_source=github.com&utm_medium=referral&utm_content=w3bdesign/nuxtjs-woocommerce&utm_campaign=Badge_Grade)
[](https://www.codefactor.io/repository/github/w3bdesign/nuxtjs-woocommerce)
[](https://sonarcloud.io/dashboard?id=w3bdesign_nuxtjs-woocommerce)
# Nuxt 3 Ecommerce site with WooCommerce backend
## Table Of Contents (TOC)
- [Features](#Features)
- [Installation](#Installation)
- [Troubleshooting](#Troubleshooting)
- [TODO](#TODO)
## Features
- Nuxt 3 for server-side rendering and optimal performance
- Vue 3 and Composition API with syntax
- Tailwind CSS for responsive and customizable design
- Nuxt Apollo for efficient GraphQL integration
- Pinia with pinia-plugin-persistedstate for robust state management
- Support for simple and variable WooCommerce products
- Stock quantity management for all product types
- CSS animations and transitions for enhanced user experience
- Form handling and validation with Formkit, Vee Validate, and Yup
- Streamlined checkout process
- Animated mobile menu for improved mobile usability
- Swiper integration for dynamic Hero section
- Basic Playwright tests integrated with Github Actions
## 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. Currently only confirmed to be working with version 0.62 of this plugin.
- [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.
- [wp-graphql-cors](https://github.com/funkhaus/wp-graphql-cors) Ensures that CORS works correctly. Remember to add the domain to the store under `Extend "Access-Control-Allow-Origin” header`
The current release has been tested and is confirmed working with the following plugin 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
2. Make sure WooCommerce has some products already or import some sample products
The WooCommerce sample products CSV file is available at `wp-content/plugins/woocommerce/sample-data/sample_products.csv` or [Sample products](sample_products/)
Import the products at `WP Dashboard > Tools > Import > WooCommerce products(CSV)`
3. Clone or fork the repo and modify `.env` with the URL to the GraphQL endpoint (or set environment variables in the configuration UI for your deployment solution)
4. Start the server with `npm run dev`
5. Enable COD (Cash On Demand) payment method in WooCommerce
6. Add a product to the cart
7. Proceed to checkout
8. Fill in your details and place the order
## 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
### I encounter a bug with add to cart
Try logging off wp-admin and try again.
### The products page isn't loading
Check the attributes of the products. Right now the application requires Size and Color.