- 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 versions:
- WordPress version 5.6.0
- WooCommerce version 5.0.0
- WP GraphQL version 1.2.4
- WooGraphQL version 0.6.1 (latest development version)
- WPGraphQL CORS version 1.1.0 (with introspection enabled)
-
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
- NuxtJS
- Tailwind CSS
- Vue Apollo with GraphQL Codegen
- Vue Awesome Swiper for image slider on frontpage
- 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
Check that you are using the 0.6.1 version of the wp-graphql-woocommerce plugin
Check the attributes of the products. Right now the application requires Size and Color.
- Make WooCommerce session token expire and get deleted after 24 hours
- Make Algolia look good on mobile