NuxtJS Ecommerce site with WooCommerce backend
Table Of Contents (TOC)
Vue 3
I have converted this project to an Astro project with Vue 3 and <script setup>
syntax here: Astro with Vue 3
Installation
- Install and activate the following required plugins, in your WordPress plugin directory:
- woocommerce Ecommerce for WordPress.
- wp-graphql Exposes GraphQL for WordPress.
- wp-graphql-woocommerce Adds WooCommerce functionality to a WPGraphQL schema. Currently only confirmed to be working with version 0.61 of this plugin.
- algolia-woo-indexer Sends WooCommerce products to Algolia. Required for search to work.
Optional plugin:
- headless-wordpress Disables the frontend so only the backend is accessible.
- 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.1.0
- WooCommerce version 7.1.0
- WP GraphQL version 1.5.0
- WooGraphQL version 0.6.2
-
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)
Rename .env.example to .env so the Apollo debugger will correctly load. It will not load if the NODE_ENV variable is not correctly set.
-
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 productsImport the products at
WP Dashboard > Tools > Import > WooCommerce products(CSV)
-
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) -
Start the server with
npm run dev
-
Enable COD (Cash On Demand) payment method in WooCommerce
-
Add a product to the cart
-
Proceed to checkout
-
Fill in your details and place the order
Features
- Nuxt 2
- Tailwind CSS
- Vue Apollo with GraphQL Codegen
- Responsive design
- Support for simple and variable products
- GraphQL-based filters
- CSS animations and transitions
- Form handling and validation with Vue Formulate
- Checkout process
- Animated mobile menu
Troubleshooting
I am getting a cart undefined error or other GraphQL errors
Check that you are using the 0.6.2 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.
TODO
- Make WooCommerce session token expire and get deleted after 24 hours