Repository files navigation

• Features
• Installation
• Troubleshooting
• TODO

• Nuxt 3 for server-side rendering and optimal performance
• Vue 3 and Composition API with <script setup> 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

1. 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.62 of this plugin.
• wp-algolia-woo-indexer WordPress plugin coded by me. 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 underExtend "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 atwp-content/plugins/woocommerce/sample-data/sample_products.csv orSample products

   Import the products atWP 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 withnpm 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

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

Try logging off wp-admin and try again.

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