Skip to content

Commit

Permalink
Remark formatting
Browse files Browse the repository at this point in the history
  • Loading branch information
w3bdesign committed Oct 2, 2022
1 parent 257ecd3 commit 004d144
Showing 1 changed file with 61 additions and 55 deletions.
116 changes: 61 additions & 55 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@

# Next.js Ecommerce site with WooCommerce backend

## Live URL: https://next-woocommerce.dfweb.no
## Live URL: <https://next-woocommerce.dfweb.no>

## Table Of Contents (TOC)

Expand All @@ -19,70 +19,76 @@

## Installation

1. Install and activate the following required plugins, in your WordPress plugin directory:
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.
- [algolia-woo-indexer](https://github.com/w3bdesign/algolia-woo-indexer) Sends WooCommerce products to Algolia. Required for search to work.
- [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.
- [algolia-woo-indexer](https://github.com/w3bdesign/algolia-woo-indexer) 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. (optional)
- [headless-wordpress](https://github.com/w3bdesign/headless-wp) Disables the frontend so only the backend is accessible. (optional)

The current release has been tested and is confirmed working with the following versions:

- WordPress version 6.0.1
- WooCommerce version 6.4.1
- WP GraphQL version 1.5.0
- WooGraphQL version 0.6.2
- WordPress version 6.0.1
- WooCommerce version 6.4.1
- WP GraphQL version 1.5.0
- WooGraphQL version 0.6.2

2. For debugging and testing, install either:
2. For debugging and testing, install either:

https://addons.mozilla.org/en-US/firefox/addon/apollo-developer-tools/ (Firefox)
<https://addons.mozilla.org/en-US/firefox/addon/apollo-developer-tools/> (Firefox)

https://chrome.google.com/webstore/detail/apollo-client-developer-t/jdkknkkbebbapilgoeccciglkfbmbnfm (Chrome)

<https://chrome.google.com/webstore/detail/apollo-client-developer-t/jdkknkkbebbapilgoeccciglkfbmbnfm> (Chrome)

3. 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/)
3. Make sure WooCommerce has some products already or import some sample products

Import the products at `WP Dashboard > Tools > Import > WooCommerce products(CSV)`
The WooCommerce sample products CSV file is available at `wp-content/plugins/woocommerce/sample-data/sample_products.csv` or [Sample products](sample_products/)

4. Clone or fork the repo and modify `.env.example` and rename it to `.env`
Import the products at `WP Dashboard > Tools > Import > WooCommerce products(CSV)`

4. Clone or fork the repo and modify `.env.example` and rename it to `.env`

Then set the environment variables accordingly in Vercel or your preferred hosting solution.

See <https://vercel.com/docs/environment-variables>

5. Modify the values according to your setup

6. Start the server with `npm run dev`

7. Enable COD (Cash On Demand) payment method in WooCommerce

8. Add a product to the cart

9. Proceed to checkout (Gå til kasse)

Then set the environment variables accordingly in Vercel or your preferred hosting solution.

See https://vercel.com/docs/environment-variables

5. Modify the values according to your setup
6. Start the server with `npm run dev`
7. Enable COD (Cash On Demand) payment method in WooCommerce
8. Add a product to the cart
9. Proceed to checkout (Gå til kasse)
10. Fill in your details and place the order

## Features

- Next.js version 12.3.1
- Connect to Woocommerce GraphQL API and list name, price and display image for products
- Support for simple products and variable products
- Cart handling and checkout with WooCommerce (Cash On Delivery only for now)
- Algolia search (requires [algolia-woo-indexer](https://github.com/w3bdesign/algolia-woo-indexer))
- Meets WCAG accessibility standards where possible
- Placeholder for products without images
- Apollo Client with GraphQL
- React Hook Form with form validation and error display
- Animations with Framer motion, Styled components and Animate.css
- Loading spinner created with Styled Components
- Shows page load progress with Nprogress during navigation
- Fully responsive design
- Category and product listings
- Pretty URLs with builtin Nextjs functionality
- Tailwind 3 for styling
- JSDoc comments
- WooCommerce cart session is automatically deleted after 48 hours to prevent GraphQL session expiration errors
- Next.js version 12.3.1
- React 18
- Connect to Woocommerce GraphQL API and list name, price and display image for products
- Support for simple products and variable products
- Cart handling and checkout with WooCommerce (Cash On Delivery only for now)
- Algolia search (requires [algolia-woo-indexer](https://github.com/w3bdesign/algolia-woo-indexer))
- Meets WCAG accessibility standards where possible
- Placeholder for products without images
- Apollo Client with GraphQL
- React Hook Form with form validation and error display
- Animations with Framer motion, Styled components and Animate.css
- Loading spinner created with Styled Components
- Shows page load progress with Nprogress during navigation
- Fully responsive design
- Category and product listings
- Pretty URLs with builtin Nextjs functionality
- Tailwind 3 for styling
- JSDoc comments
- WooCommerce cart session is automatically deleted after 48 hours to prevent GraphQL session expiration errors

## Troubleshooting

Expand All @@ -101,15 +107,15 @@ More testing and debugging is required before deploying it in a production envir

With that said, keep the following in mind:

- Currently only simple products and variable products work without any issues. Other product types are not known to work.
- Only Cash On Delivery (COD) is currently supported. More payment methods may be added later.
- Currently only simple products and variable products work without any issues. Other product types are not known to work.
- Only Cash On Delivery (COD) is currently supported. More payment methods may be added later.

## TODO

- Add total to cart/checkout page
- Show stock quantity on individual products
- Copy billing address to shipping address
- Display product variation name in cart / checkout
- Hide products not in stock
- Add better SEO
- Re-add Next/image when it is working better
- Add total to cart/checkout page
- Show stock quantity on individual products
- Copy billing address to shipping address
- Display product variation name in cart / checkout
- Hide products not in stock
- Add better SEO
- Re-add Next/image when it is working better

0 comments on commit 004d144

Please sign in to comment.