1. User opens the website in the browser. Enough to register the service worker.
2. User closes website tab
3. The site publishes new content
4. Content gets sync in the background
5. User open site when not connected to the Internet
6. User should be able to read synced content

• We can use stripe ( https://www.npmjs.com/package/next-stripe ) ( also build the webhook ), check if wp-graphql-woocomerce has a mutation if not then use WooCommerce rest api createOrder API.
• For the rest of the payment mode, we can redirect the user to the WordPress payment gateway URL.

Add the storefront theme to WP

Use the menu name( location ) registered by storefront theme in the frontend GraphQL query.

Create a WordPress Theme called wp-decoupled-theme

• The styles and design of this theme will be similar to the next.js theme
• We can register menus here.

Note:
We redirect the user to WordPress site after he/she fills up the checkout form then add a back to home button on the WordPress Order complete page. That way we can support all the WP WooCommerce payment gateway options, because it is handled by WordPress.
So when the user is redirect to WordPress because the design of the WP theme and Next.js theme will be the same, it will give a uniform experience to the user.

Setup Docker and with WordPress

Possible directory structure.

/app => next.js
/wp-content/themes/wp-decoupled-theme
/wp-content/plugins/wp-decoupled-helper
/conf/nginx.conf
/tests/cypress
/docs/

To be discussed with @imranhsayed and @dhsathiya

Hi there!

I am on windows
node v16.14.0
npm 8.19.1

Why run "nvm use"? Is this for special version of node? Which one?

Cloned the repo and when do "npm install" there a bunch of warning about depricated vesriosn and an Error:

npm ERR! code 1
npm ERR! path D:\wp-decoupled\node_modules\node-sass
npm ERR! command failed
npm ERR! command C:\WINDOWS\system32\cmd.exe /d /s /c node scripts/build.js
npm ERR! Building: E:\Program Files\nodejs\node.exe D:\wp-decoupled\node_modules\node-gyp\bin\node-gyp.js rebuild --verbose --libsass_ext= --libsass_cflags= --libsass_ldflags= --libsass_library=
npm ERR! gyp info it worked if it ends with ok
npm ERR! gyp verb cli [
npm ERR! gyp verb cli 'E:\Program Files\nodejs\node.exe',
npm ERR! gyp verb cli 'D:\wp-decoupled\node_modules\node-gyp\bin\node-gyp.js',
npm ERR! gyp verb cli 'rebuild',
npm ERR! gyp verb cli '--verbose',
npm ERR! gyp verb cli '--libsass_ext=',
npm ERR! gyp verb cli '--libsass_cflags=',
npm ERR! gyp verb cli '--libsass_ldflags=',
npm ERR! gyp verb cli '--libsass_library='
npm ERR! gyp verb cli ]
npm ERR! gyp info using [email protected]
npm ERR! gyp info using [email protected] | win32 | x64
npm ERR! gyp verb command rebuild []
npm ERR! gyp verb command clean []
npm ERR! gyp verb clean removing "build" directory
npm ERR! gyp verb command configure []
npm ERR! gyp verb check python checking for Python executable "python2" in the PATH
npm ERR! gyp verb which failed Error: not found: python2
npm ERR! gyp verb which failed at getNotFoundError (D:\wp-decoupled\node_modules\which\which.js:13:12)
npm ERR! gyp verb which failed at F (D:\wp-decoupled\node_modules\which\which.js:68:19)
npm ERR! gyp verb which failed at E (D:\wp-decoupled\node_modules\which\which.js:80:29)
npm ERR! gyp verb which failed at D:\wp-decoupled\node_modules\which\which.js:89:16
npm ERR! gyp verb which failed at D:\wp-decoupled\node_modules\isexe\index.js:42:5
npm ERR! gyp verb which failed at D:\wp-decoupled\node_modules\isexe\windows.js:36:5
npm ERR! gyp verb which failed at FSReqCallback.oncomplete (node:fs:198:21)
npm ERR! gyp verb which failed python2 Error: not found: python2
npm ERR! gyp verb which failed at getNotFoundError (D:\wp-decoupled\node_modules\which\which.js:13:12)
npm ERR! gyp verb which failed at F (D:\wp-decoupled\node_modules\which\which.js:68:19)
npm ERR! gyp verb which failed at E (D:\wp-decoupled\node_modules\which\which.js:80:29)
npm ERR! gyp verb which failed at D:\wp-decoupled\node_modules\which\which.js:89:16
npm ERR! gyp verb which failed at D:\wp-decoupled\node_modules\isexe\index.js:42:5
npm ERR! gyp verb which failed at D:\wp-decoupled\node_modules\isexe\windows.js:36:5
npm ERR! gyp verb which failed at FSReqCallback.oncomplete (node:fs:198:21) {
npm ERR! gyp verb which failed code: 'ENOENT'
npm ERR! gyp verb which failed }
npm ERR! gyp verb check python checking for Python executable "python" in the PATH
npm ERR! gyp verb which succeeded python C:\Program Files (x86)\SVP 4\mpv64\python.EXE
npm ERR! gyp ERR! configure error
npm ERR! gyp ERR! stack Error: Command failed: C:\Program Files (x86)\SVP 4\mpv64\python.EXE -c import sys; print "%s.%s.%s" % sys.version_info[:3];
npm ERR! gyp ERR! stack File "", line 1
npm ERR! gyp ERR! stack import sys; print "%s.%s.%s" % sys.version_info[:3];
npm ERR! gyp ERR! stack ^
npm ERR! gyp ERR! stack SyntaxError: invalid syntax
npm ERR! gyp ERR! stack
npm ERR! gyp ERR! stack at ChildProcess.exithandler (node:child_process:399:12)
npm ERR! gyp ERR! stack at ChildProcess.emit (node:events:520:28)
npm ERR! gyp ERR! stack at maybeClose (node:internal/child_process:1092:16)
npm ERR! gyp ERR! stack at Process.ChildProcess._handle.onexit (node:internal/child_process:302:5)
npm ERR! gyp ERR! System Windows_NT 10.0.19044
npm ERR! gyp ERR! command "E:\Program Files\nodejs\node.exe" "D:\wp-decoupled\node_modules\node-gyp\bin\node-gyp.js" "rebuild" "--verbose" "--libsass_ext=" "--libsass_cflags=" "--libsass_ldflags=" "--libsass_library="
npm ERR! gyp ERR! cwd D:\wp-decoupled\node_modules\node-sass
npm ERR! gyp ERR! node -v v16.14.0
npm ERR! gyp ERR! node-gyp -v v3.8.0
npm ERR! gyp ERR! not ok
npm ERR! Build failed with error code: 1

May be its because "Error: not found: python2" i have on wondows only python...

Add SEO Component Using Next-seo

Add Products page with pagination. ( url: /products/ ).
We need to discuss whether we would want to use JS solution for pagination or use https://github.com/valu-digital/wp-graphql-offset-pagination for pagination as we need this feature to work offline.
We should be able to cache the page/1, page/2 etc.

Add Gutenberg Style packages in Next.js

@import "~@wordpress/base-styles/colors";
@import "~@wordpress/base-styles/variables";
@import "~@wordpress/base-styles/mixins";
@import "~@wordpress/base-styles/breakpoints";
@import "~@wordpress/base-styles/animations";
@import "~@wordpress/base-styles/z-index";

@import '~@wordpress/block-library/src/style.scss';
@import '~@wordpress/block-library/src/theme.scss';

• Move repeated GraphQL fields into GraphQL fragments, to make them reusable.

• Change the getInitialProps method to getStaticProps and getStaticPaths, to take advantage of Next.js Incremental Static Regeneration (ISG).

Add Option to share

• Single product
• Single Article

On social media like facebook, twitter

Create Filters on Product Page

Explore if we can use this package with next.js https://github.com/shadowwalker/next-pwa

Setup Cypress
https://imranhsayed.medium.com/using-cypress-with-next-js-for-end-to-end-testing-cypress-nextjs-example-af100609cf16

Create a WordPress Plugin called wp-decoupled-helper
This will contain all the functionalities like:

• Extending wp-graphql plugins
• Adding schema to GraphQl etc.

• Remove Product ID from the slug - need to be clean URL

Create a single image component that can be reused everywhere, so any updates can be made at one place and is reflected everywhere. Use Next.js Image Component inside of it

I am getting "An unexpected error has occurred."

Then if I try to refresh I get a "500 Internal Server Error."

Checking the browser console I see:

Error: "GraphQL error: Cannot query field "productBy" on type "RootQuery". Did you mean "product", "products", "productTag", "productType", or "postBy"?"

Would it be possible to get this up and running somewhere so that you take it for a test drive?

Add Storybook for Components
https://storybook.js.org/docs/react/get-started/install
https://github.com/vercel/next.js/tree/canary/examples/with-storybook

Create Product Gallery Carousel on single product page

We need designs for the following pages:

1. Landing Page
2. Products page with pagination and filters.
3. Single Product Page
4. Blogs page with pagination
5. Single Blog page with sidebar containing related blogs and category lists.
6. Checkout page
7. Cart Page
8. Login
9. Register

• Update Apollo Client package to the latest version.
• Make the necessary changes in the apollo client as per the updates

This will list down product that belongs to that category

• url: /category/{category-slug}

It's been long since the repository has been updated, hence it's better that before anything we update all the packages.

Add Yoast SEO and wp-graphql-yoast-seo WordPress plugin.

Please dont close this ticket until its added in the composer.json file.

• Remove fragmentTypes.json and Schema Query ( not needed with the latest version of Apollo )

When I start the dev server, the terminal shows the following error message :

The static directory has been deprecated in favor of the public directory. https://err.sh/vercel/next.js/static-dir-deprecated
(node:95482) ExperimentalWarning: The fs.promises API is experimental
Defining routes from exportPathMap
Warning: Built-in CSS support is being disabled due to custom CSS configuration being detected.
See here for more info: https://err.sh/next.js/built-in-css-disabled

(node:95482) UnhandledPromiseRejectionWarning: TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be one of type string, Buffer, or URL. Received type undefined

https://github.com/valu-digital/wp-graphql-offset-pagination

This should be added in the composer.json file, after @dhsathiya has setup the WordPress with docker.

• Use Menu Queries to dynamically fetch WordPress Menus

• Update the cart functionality to utilize WooCommerce Session.

WooCommerce saves the cart information in the session.
How to implement this is explained here:
wp-graphql/wp-graphql-woocommerce#88