|
1 | 1 | [](https://github.com/w3bdesign/nuxtjs-woocommerce/actions/workflows/playwright.yml)
|
2 |
| -[](https://app.codacy.com/gh/w3bdesign/nuxtjs-woocommerce?utm_source=github.com\&utm_medium=referral\&utm_content=w3bdesign/nuxtjs-woocommerce\&utm_campaign=Badge_Grade) |
| 2 | +[](https://app.codacy.com/gh/w3bdesign/nuxtjs-woocommerce?utm_source=github.com&utm_medium=referral&utm_content=w3bdesign/nuxtjs-woocommerce&utm_campaign=Badge_Grade) |
3 | 3 | [](https://www.codefactor.io/repository/github/w3bdesign/nuxtjs-woocommerce)
|
4 |
| -[](https://sonarcloud.io/dashboard?id=w3bdesign_nuxtjs-woocommerce) |
| 4 | +[](https://sonarcloud.io/dashboard?id=w3bdesign_nuxtjs-woocommerce) |
5 | 5 |
|
6 | 6 | # Nuxt 3 Ecommerce site with WooCommerce backend
|
7 | 7 |
|
8 | 8 | <img src="https://user-images.githubusercontent.com/45217974/106988377-f129a080-676f-11eb-94b9-a44c86ea6c79.png" alt="Project screenshot" />
|
9 | 9 |
|
10 | 10 | ## Table Of Contents (TOC)
|
11 | 11 |
|
12 |
| -* [Features](#Features) |
13 |
| -* [Installation](#Installation) |
14 |
| -* [Troubleshooting](#Troubleshooting) |
15 |
| -* [TODO](#TODO) |
| 12 | +- [Features](#Features) |
| 13 | +- [Installation](#Installation) |
| 14 | +- [Troubleshooting](#Troubleshooting) |
| 15 | +- [TODO](#TODO) |
16 | 16 |
|
17 | 17 | ## Features
|
18 | 18 |
|
19 |
| -* Nuxt 3 |
20 |
| -* Vue 3 and Composition API with <script setup> syntax |
21 |
| -* Tailwind CSS |
22 |
| -* Nuxt Apollo |
23 |
| -* Pinia with pinia-plugin-persistedstate for cart and state management |
24 |
| -* Responsive design |
25 |
| -* Swiper integration for Hero section |
26 |
| -* Support for simple and variable products |
27 |
| -* Stock quantity on simple and variable products |
28 |
| -* CSS animations and transitions |
29 |
| -* Form handling and validation with Formkit, Vee Validate and Yup |
30 |
| -* Checkout process |
31 |
| -* Animated mobile menu |
32 |
| -* Basic Playwright test(s) integrated with Github actions |
| 19 | +- Nuxt 3 for server-side rendering and optimal performance |
| 20 | +- Vue 3 and Composition API with <script setup> syntax |
| 21 | +- Tailwind CSS for responsive and customizable design |
| 22 | +- Nuxt Apollo for efficient GraphQL integration |
| 23 | +- Pinia with pinia-plugin-persistedstate for robust state management |
| 24 | +- Support for simple and variable WooCommerce products |
| 25 | +- Stock quantity management for all product types |
| 26 | +- CSS animations and transitions for enhanced user experience |
| 27 | +- Form handling and validation with Formkit, Vee Validate, and Yup |
| 28 | +- Streamlined checkout process |
| 29 | +- Animated mobile menu for improved mobile usability |
| 30 | +- Swiper integration for dynamic Hero section |
| 31 | +- Basic Playwright tests integrated with Github Actions |
33 | 32 |
|
34 | 33 | ## Installation
|
35 | 34 |
|
36 | 35 | 1. Install and activate the following required plugins, in your WordPress plugin directory:
|
37 | 36 |
|
38 |
| -* [woocommerce](https://wordpress.org/plugins/woocommerce) Ecommerce for WordPress. |
39 |
| -* [wp-graphql](https://wordpress.org/plugins/wp-graphql) Exposes GraphQL for WordPress. |
40 |
| -* [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. |
41 |
| -* [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. |
| 37 | +- [woocommerce](https://wordpress.org/plugins/woocommerce) Ecommerce for WordPress. |
| 38 | +- [wp-graphql](https://wordpress.org/plugins/wp-graphql) Exposes GraphQL for WordPress. |
| 39 | +- [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. |
| 40 | +- [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. |
42 | 41 |
|
43 | 42 | Optional plugin:
|
44 | 43 |
|
45 |
| -* [headless-wordpress](https://github.com/w3bdesign/headless-wp) Disables the frontend so only the backend is accessible. |
46 |
| -* [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` |
| 44 | +- [headless-wordpress](https://github.com/w3bdesign/headless-wp) Disables the frontend so only the backend is accessible. |
| 45 | +- [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` |
47 | 46 |
|
48 | 47 | The current release has been tested and is confirmed working with the following plugin versions:
|
49 | 48 |
|
50 |
| -* WordPress version 6.6.2 |
51 |
| -* WooCommerce version 7.4.0 |
52 |
| -* WP GraphQL version 1.13.8 |
53 |
| -* WooGraphQL version 0.12.0 |
54 |
| -* WPGraphQL CORS version 2.1 |
| 49 | +- WordPress version 6.6.2 |
| 50 | +- WooCommerce version 7.4.0 |
| 51 | +- WP GraphQL version 1.13.8 |
| 52 | +- WooGraphQL version 0.12.0 |
| 53 | +- WPGraphQL CORS version 2.1 |
55 | 54 |
|
56 | 55 | 2. Make sure WooCommerce has some products already or import some sample products
|
57 | 56 |
|
|
0 commit comments