From 827952cdca4b2ccd446dcb91d12345d8b1056534 Mon Sep 17 00:00:00 2001 From: w3bdesign <45217974+w3bdesign@users.noreply.github.com> Date: Wed, 29 Jan 2025 05:19:38 +0100 Subject: [PATCH 1/2] Update .gitignore --- .gitignore | 1 + 1 file changed, 1 insertion(+) diff --git a/.gitignore b/.gitignore index 1c70d108a..7ba3bbcb5 100644 --- a/.gitignore +++ b/.gitignore @@ -38,3 +38,4 @@ next-env.d.ts /test-results/ /playwright-report/ /playwright/.cache/ +src/pages/registrer.tsx From 7a25b4f5186e132db750db6b3f49bf31bf529ab7 Mon Sep 17 00:00:00 2001 From: w3bdesign <45217974+w3bdesign@users.noreply.github.com> Date: Wed, 29 Jan 2025 05:26:37 +0100 Subject: [PATCH 2/2] TODO add login --- README.md | 119 +++++++++++++++++++++++++++--------------------------- 1 file changed, 59 insertions(+), 60 deletions(-) diff --git a/README.md b/README.md index a00d07447..6828c53c2 100644 --- a/README.md +++ b/README.md @@ -2,11 +2,10 @@ [![Codacy Badge](https://api.codacy.com/project/badge/Grade/29de6847b01142e6a0183988fc3df46a)](https://app.codacy.com/gh/w3bdesign/nextjs-woocommerce?utm_source=github.com&utm_medium=referral&utm_content=w3bdesign/nextjs-woocommerce&utm_campaign=Badge_Grade_Settings) [![CodeFactor](https://www.codefactor.io/repository/github/w3bdesign/nextjs-woocommerce/badge)](https://www.codefactor.io/repository/github/w3bdesign/nextjs-woocommerce) [![Quality Gate Status](https://sonarcloud.io/api/project_badges/measure?project=w3bdesign_nextjs-woocommerce&metric=alert_status)](https://sonarcloud.io/dashboard?id=w3bdesign_nextjs-woocommerce) - -![bilde](https://github.com/user-attachments/assets/08047025-0950-472a-ae7d-932c7faee1db) +![bilde](https://github.com/user-attachments/assets/08047025-0950-472a-ae7d-932c7faee1db) -## Star History +## Star History [![Star History Chart](https://api.star-history.com/svg?repos=w3bdesign/nextjs-woocommerce&type=Date)](https://star-history.com/#w3bdesign/nextjs-woocommerce&Date) @@ -16,33 +15,33 @@ ## Table Of Contents (TOC) -- [Installation](#Installation) -- [Features](#Features) -- [Issues](#Issues) -- [Troubleshooting](#Troubleshooting) -- [TODO](#TODO) -- [Future Improvements](SUGGESTIONS.md) +- [Installation](#Installation) +- [Features](#Features) +- [Issues](#Issues) +- [Troubleshooting](#Troubleshooting) +- [TODO](#TODO) +- [Future Improvements](SUGGESTIONS.md) ## Installation 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. -- [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. +- [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. +- [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. 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.6.2 -- WooCommerce version 7.4.0 -- WP GraphQL version 1.13.8 -- WooGraphQL version 0.12.0 -- WPGraphQL CORS version 2.1 +- 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. For debugging and testing, install either: @@ -52,7 +51,6 @@ The current release has been tested and is confirmed working with the following 3. Make sure WooCommerce has some products already - 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. @@ -73,36 +71,36 @@ The current release has been tested and is confirmed working with the following ## Features -- Next.js version 14.3.11 -- React version 18.3.1 -- Typescript -- Tests with Playwright -- 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 -- Native HTML5 form validation -- 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 -- Show stock status -- Pretty URLs with builtin Nextjs functionality -- Tailwind 3 for styling -- JSDoc comments -- Product filtering: - - Dynamic color filtering using Tailwind's color system - - Mobile-optimized filter layout - - Accessible form controls with ARIA labels - - Price range slider - - Size and color filters - - Product type categorization - - Sorting options (popularity, price, newest) +- Next.js version 14.3.11 +- React version 18.3.1 +- Typescript +- Tests with Playwright +- 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 +- Native HTML5 form validation +- 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 +- Show stock status +- Pretty URLs with builtin Nextjs functionality +- Tailwind 3 for styling +- JSDoc comments +- Product filtering: + - Dynamic color filtering using Tailwind's color system + - Mobile-optimized filter layout + - Accessible form controls with ARIA labels + - Price range slider + - Size and color filters + - Product type categorization + - Sorting options (popularity, price, newest) ## Troubleshooting @@ -116,21 +114,22 @@ Check the attributes of the products. Right now the application requires Size an ## Issues -Overall the application is working as intended, but it has not been tested extensively in a production environment. -More testing and debugging is required before deploying it in a production environment. +Overall the application is working as intended, but it has not been tested extensively in a production environment. +More testing and debugging is required before deploying it in a production environment. 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. This project is tested with BrowserStack. ## TODO -- Add total to cart/checkout page -- Copy billing address to shipping address -- Add order dashboard and require login -- Hide products not in stock -- Add better SEO -- Re-add Next/image when it is working better +- Implement UserRegistration.component.tsx in a registration page +- Add user dashboard with order history +- Add Cloudflare Turnstile on registration page +- Add total to cart/checkout page +- Copy billing address to shipping address +- Hide products not in stock +- Add better SEO \ No newline at end of file