imranhsayed / gatsby-woocommerce-themes

⚡ A Gatsby Theme for WooCommerce E-commerce site Gatsby WooCommerce WordPress

🎨 Gatsby WooCommerce themes - Electra

• A Gatsby theme for WooCommerce, using Decoupled Architecture
• Front end in React
• Backend in WordPress.

Demo Site

This theme uses gatsby-source-wordpress@v4 BETA

*** 👨‍💻 Please star my repo to support my work 🙏 ***

🔥 Features

1. Uses React with Gatsby ( Blazing Fast )
2. PWA ( Works Offline )
3. Image Optimization ( blur effect )
4. GraphQL ( with wp-graphql on WordPress )
5. Custom Widgets, Menus, Social elements.
6. WooCommerce store
7. Google Analytics feature
8. Yoast SEO supported ( with og tags )
9. Product Search with pagination ( even works offline )
10. Product pagination
11. Archive pages.
12. Authentication with JWT
13. My Account page ( with Login and Registration )
14. Create an account on checkout.
15. Social share.
16. Product Carousel.
17. Add to wishlist( even works offline )

👨‍💻 Maintainer

Name	Github Username
Imran Sayed	@imranhsayed

Home Page demo

Search, Archive, Pagination.

Single product page with carousel, social share, image zoom

Add to Cart, Cart page, Checkout.

My account: Register

My account: Login

🚀 Set Up

• Fork/clone the repo
• yarn install

Gatsby Setup ( when using this repo as your project)

1. Server Side Enviromnent Variables. Create a file called .env taking example from .env-example and add the following into site directory :

• WORDPRESS_SITE_URL=https://example.com
• GATSBY_SITE_URL=https://example.com
• GOOGLE_TAGMANAGER_ID=xxx
• FB_APP_ID=xxx

2. Client Side Environment Variables. Create two more files called .env.development .env.production and into 'site' directory and add your WordPress site url liks so.

GATSBY_WORDPRESS_SITE_URL=https://example.com

Env variables from these file will be consumed by Apollo client on client side.

WordPress Setup

1. On your WordPress site, download, Upload and activate all the plugins from wordpress/plugins folder of this repo, into your WordPress Site.

a. Headless CMS

b. woocommerce

c. wp-graphql - tested on ( v1.0.0 )

d. wp-graphql-woocommerce

e. wp-gatsby

f. Yoast-SEO

g. wp-graphql-yoast-seo

h. wp-graphql-jwt-authentication

• You can follow the readme to setup https://github.com/wp-graphql/wp-graphql-jwt-authentication#install-activate--setup

2. • Set Header menu as HCMS Header Menu

   

   • Set Footer menu as HCMS Footer Menu

3. You can also set text widgets in #HCMS Footer #1 and #HCMS Footer #2 under Appearance > Widgets in WordPress.

4. Create a Home Page ( if there isn't one already )and make sure you have a home page and Location rule is set to Home page.

5. If isn't already set your site title, description and logo from WordPress customizer.

6. Setup WooCommerce:

• Make sure WooCommerce Plugin is active in WordPress and the payment modes have been set from its settings.
• You can also import default wooCommerce products that come with wooCommerce Plugin for development ( if you don't have any products in your WordPress install ) WP Dashboard > Tools > Import > WooCommerce products(CSV): The WooCommerce default products csv file is available at wp-content/plugins/woocommerce/sample-data/sample_products.csv

7. For home page carousel please upload same size product category images of dimensions 1900x600

🚀 Development

• Navigate into site’s directory.

yarn install      # Run this for the first time.
npm run dev      # During development.
npm run build    # When ready for production.

** For development ** Your site is now running at http://localhost:8000!

_Note: You'll also see a second link: http://localhost:8000/___graphql. This is a tool you can use to experiment with querying your data.

📕 Storybook:

For Storybook:

• cd package/gatsby-wooocommerce-theme
• npm run storybook

📦 Adding/Removing a new package to site folder

yarn workspace site add package-name yarn workspace site remove package-name

📦 Adding/Removing a new package to gatsby-wooocommerce-theme folder

yarn workspace gatsby-wooocommerce-theme add package-name yarn workspace gatsby-wooocommerce-theme remove package-name

🧐 What's inside?

A quick look at the top-level files and directories you'll see in a Gatsby project.

.
├── node_modules
├── demos
├── packages
├── src
├── .gitignore
├── .site
├── gatsby-browser.js
├── gatsby-config.js
├── gatsby-node.js
├── gatsby-ssr.js
├── package-lock.json
├── package.json
└── README.md

1. /node_modules: This directory contains all of the modules of code that your project depends on (npm packages) are automatically installed.

2. /src: This directory will contain all of the code related to what you will see on the front-end of your site (what you see in the browser) such as your site header or a page template. src is a convention for “source code”.

3. .gitignore: This file tells git which files it should not track / not maintain a version history for.

4. .prettierrc: This is a configuration file for Prettier. Prettier is a tool to help keep the formatting of your code consistent.

5. gatsby-browser.js: This file is where Gatsby expects to find any usage of the Gatsby browser APIs (if any). These allow customization/extension of default Gatsby settings affecting the browser.

6. gatsby-config.js: This is the main configuration file for a Gatsby site. This is where you can specify information about your site (metadata) like the site title and description, which Gatsby plugins you’d like to include, etc. (Check out the config docs for more detail).

7. gatsby-node.js: This file is where Gatsby expects to find any usage of the Gatsby Node APIs (if any). These allow customization/extension of default Gatsby settings affecting pieces of the site build process.

8. gatsby-ssr.js: This file is where Gatsby expects to find any usage of the Gatsby server-side rendering APIs (if any). These allow customization of default Gatsby settings affecting server-side rendering.

9. LICENSE: Gatsby is licensed under the MIT license.

10. package-lock.json (See package.json below, first). This is an automatically generated file based on the exact versions of your npm dependencies that were installed for your project. (You won’t change this file directly).

11. package.json: A manifest file for Node.js projects, which includes things like metadata (the project’s name, author, etc). This manifest is how npm knows which packages to install for your project.

12. README.md: A text file containing useful reference information about your project.

Useful Links

1. Setting workspaces with yarn for theme development
2. Installing a gatsby theme and setting it up.

Deployment

With vercel

• Signup on vercel.com

• Click on Import Project and then add the configurations.

• On vercel, make sure you add these evn vars from settings of the project:

From CLI:

• npm i -g vercel

• Now in the project root run vercel

• Add the following configurations

• build command: npm run build
• output directory: site/public
• development command: npm run dev
• root directory: /

Using as theme ( for existing gatsby project )

https://www.npmjs.com/package/gatsby-woocommerce-theme Follow its readme on npm.js

Helpful Tools:

1. Apollo Client Developer Tools Chrome Extension

gatsby-woocommerce-themes's Issues

cannot query price with Raw format

Hi, I cannot query price without format.
do you know why?
price(format: RAW)
thank

Is that project still alive ?

I Don't find wp_config.php file where it ?

Variable products

It looks like complex vaiable products (for example 3 attributes with 2 options each) but with limited variations (eg one of the option from the third attributes its only available in certain condition), can't be (easily) replicated when sourcing from graphql
in this product for example (in wordpress theme)
https://shop.popland.it/prodotto/coffee-bean/
the "dark roast" option is available only for "500 gr weight" also the packaging (tin or card) depends on weight.

we can surely access all the variations with their id, price, image, attributes, but keeping track and add/remove options based on previous selection is really a pain

anyone solved it somehow?

Timeout issue on build

Hi,

I'm having issue running "npm run dev".
I'm getting the following error:

timeout of 30000ms exceeded


 ERROR #gatsby-source-wordpress-experimental_111006

 gatsby-source-wordpress  It took too long for http://my-wp-site.com/graphql to respond
(longer than 30 seconds).

Either your URL is wrong, you need to increase server resources, or you need to decrease the amount of resources
each request takes.

You can configure how much resources each request takes by lowering your `options.schema.perPage` value from the
default of 100 nodes per request.
Alternatively you can increase the request timeout by setting a value in milliseconds to `options.schema.timeout`,
 the current setting is 30000.

My gatsby config file w/c is located at
/gatsby-woocommerce-themes/packages/gatsby-woocommerce-theme
has the below config

module.exports = ({ wordPressUrl, gatsbySiteUrl, googleTagManagerId, fbAppId }) => ({
  siteMetadata: {
    title: `Gatsby WooCommerce Theme`,
    description: `Codeytek - Gatsby WooCommerce Theme`,
	siteUrl: gatsbySiteUrl,
	wordPressSiteUrl: wordPressUrl,
    author: `@imranhsayed`,
	fbAppId: fbAppId,
  },
  plugins: [
    {
      resolve: "gatsby-plugin-google-tagmanager",
      options: {
        id: googleTagManagerId,
        includeInDevelopment: false,
      },
    },
    `gatsby-plugin-react-helmet`,
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sharp`,
    `gatsby-plugin-sass`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: `${__dirname}/src/images`,
      },
    },
    {
      resolve: `gatsby-source-wordpress-experimental`,
      options: {
        url: `${wordPressUrl}/graphql`,
        verbose: true,
        develop: {
          nodeUpdateInterval: 3000,
          hardCacheMediaFiles: true,
        },
        production: {
          hardCacheMediaFiles: false,
        },
	schema: {
	  timeout: 60000,
	  perPage: 20,
      	  requestConcurrency: 50, 
          previewRequestConcurrency: 2,
    	},
        debug: {
          graphql: {
            showQueryOnError: false,
            showQueryVarsOnError: true,
            copyQueryOnError: true,
            panicOnError: true,
            // a critical error is a WPGraphQL query that returns an error and no response data. Currently WPGQL will error if we try to access private posts so if this is false it returns a lot of irrelevant errors.
            onlyReportCriticalErrors: true,
          },
        },
        excludeFieldNames: [`blocksJSON`, `saveContent`],
        type: {
          Post: {
            limit:
              process.env.NODE_ENV === `development`
                ? 50 : 5000,
          },
        },
      },
    },
    {
      resolve: "gatsby-plugin-robots-txt",
      options: {
        host: gatsbySiteUrl,
        sitemap: `${gatsbySiteUrl}/sitemap.xml`,
        policy: [{ userAgent: "*", allow: ["/"] }],
      },
    },
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `Gatsby WooCommerce Theme`,
        short_name: `Electra`,
        start_url: `/`,
        background_color: `#eaeaea`,
        theme_color: `#1e1e1e`,
        display: `standalone`,
        icon: `${__dirname}/src/images/favicon.png`, // For favicon- This path is relative to the root of the site.
      },
    },
    // this (optional) plugin enables Progressive Web App + Offline functionality
    // To learn more, visit: https://gatsby.dev/offline
    `gatsby-plugin-offline`,
  ],
});

Can you please point me to the right direction here.

Thanks

storybook version 6.x breaks

Shows the following error when i run yarn storybook

ERROR in ./src/components/cart/cart-dropdown/style.scss 1:0
Module parse failed: Unexpected character '@' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

@import "../../../sass/essentials";

Apollo queries vs Gatsby Queries (runtime vs buildtime)

Hey there,

awesome theme which gives me a lot of inspiration. But by getting all the products during build time, you wont get any updates as long as you do not trigger a new build, right?

Wouldn't it be better to use apollo for getting the products? By this, you can ensure that your products on the site are always uptodate. even the offline usage would be possible to a certain point as apollo requests are getting cached.

So my question is, why didn't you use apollo in general to get shop data?

Fix the css chunk issue in development and build issue in production.

• Fix the chunk issue in development - Conflicting order issue
  

Mini css extract plugin Issues

• gatsbyjs/gatsby#26486

• webpack-contrib/mini-css-extract-plugin#250 (comment)

• webpack-contrib/mini-css-extract-plugin#250

• You can check to see what is using it by running yarn why mini-css-extract-plugin

• Possible solution to be tested, update the MiniCSSExtract plugin config in gatsby-node.js, as custom config

new MiniCssExtractPlugin({
  ignoreOrder: true,
}),

• Fix the build issue
  

Error when trying to add product to cart.

I keep getting this error when I try to add a product to cart.

Please help.

Vercel first build error

Hi guys I want to use this starter I love much Gatsby and Wordpress but I have this error. Can you help me, please?

JWT Token expiration messing up the website

I figured that the add to cart not going through issue comes from the fact that the jwt token is short lived and as soon as it expires, trying to add to cart gives an internal server error, how could we solve this issue Imran?

Updated gatsby-source-wordpress plugin, returns schema error

I updated the gatsby-source-wordpress-experimental plugin to v4 gatsby-source-wordpress. Now I'm getting an error: Cannot query field "databaseId" on type "WpProduct". I can't find any documentation on the WooCommerce graphql schema. Any ideas on how to upgrade?

Token expiration needs to log the user out

Whenever a user's token expires the user should be logged out, as otherwise adding to cart won't work.

This issue is tied with the other issue i mentioned but both of the issues need to be fixed in order to give customers a proper experience.
Unfortunately i'm not experienced enough to fix those issues but i do have all the information on how the issues behave.
Please Mr. Imran help me solve those issues. React is my favourite framework, and using traditional wordpress themes won't help me further develop my skills.

Best regards!

Weight Based Shipping

I have only been able to get the standard WooCommerce shipping methods to work. Any insight on getting a third-party plugin like WooCommerce Weight Based Shipping to work?

Cannot add more than 10 items to the cart

Hi @imranhsayed, I cannot add more that 10 items to the cart, it appears to still update the total after 10 items, however the cart contents does not update after 10 items.

I initially thought I may have introduced a bug since I shadow this theme, however I noticed the same issue on the demo site for the theme at https://gatsby-woocommerce-theme.netlify.app/.

I have not been able to identify why this is happening.

Add support for Single Post page

Add support for single post page

collaborate to upgrade to gatsby-source-wordpress stable version

.

After logging in or registering my account panel is populated with wrong information until page reload

After you register an account u are presented with the my account panel which is not displaying any information, switching tabs from inside the app (reach/router navigate method) won't fix the issue just reloading the page entirely. I do not know where the issue comes from.

Getting Issue while checkout

HI, I getting an issue while checkout and I already updated all the gatsby and wordpress plugins which is updated on the repository around 20days ago, mutation payload you can see below

{operationName: "CHECKOUT_MUTATION",…}
operationName: "CHECKOUT_MUTATION"
query: "mutation CHECKOUT_MUTATION($input: CheckoutInput!) {↵ checkout(input: $input) {↵ clientMutationId↵ order {↵ id↵ orderKey↵ refunds {↵ nodes {↵ amount↵ __typename↵ }↵ __typename↵ }↵ status↵ __typename↵ }↵ result↵ redirect↵ __typename↵ }↵}↵"
variables: {input: {clientMutationId: "44b09c60-0743-42b1-82df-fef82a579033",…}}
input: {clientMutationId: "44b09c60-0743-42b1-82df-fef82a579033",…}
billing: {firstName: "Vinay", lastName: "Krishna", address1: "415xxxxxxxxxxx", address2: "lakhimpur kheri",…}
address1: "415xxxxxxxxxxx"
address2: "lakhimpur kheri"
city: "Lucknow"
company: "sdfdsf"
country: "IN"
email: "[email protected]"
firstName: "Vinay"
lastName: "Krishna"
phone: "4444444444"
postcode: "226024"
state: "Uttar Pradesh"
clientMutationId: "44b09c60-0743-42b1-82df-fef82a579033"
customerNote: "note"
isPaid: false
paymentMethod: "cod"
shipToDifferentAddress: false
shipping: {firstName: "Vinay", lastName: "Krishna", address1: "415xxxxxxxxxxx", address2: "lakhimpur kheri",…}
address1: "415xxxxxxxxxxx"
address2: "lakhimpur kheri"
city: "Lucknow"
company: "sdfdsf"
country: "IN"
email: "[email protected]"
firstName: "Vinay"
lastName: "Krishna"
phone: "4444444444"
postcode: "226024"
state: "Uttar Pradesh"
transactionId: "hjkhjkhsdsdiui"

error is

{"errors":[{"debugMessage":"Too few arguments to function THMAF_Public::add_address_from_checkout(), 1 passed in /opt/bitnami/apps/wordpress/htdocs/wp-includes/class-wp-hook.php on line 287 and exactly 2 expected","message":"Internal server error","extensions":{"category":"internal"},"locations":[{"line":2,"column":3}],"path":["checkout"]}],"data":{"checkout":null},"extensions":{"debug":[]}}

ERROR #98123 WEBPACK

There is some error with the variables in the component's .scss files. In order to remove the error, both $button-margin and $grey-300 were added to each component that has a .scss file. Tried adding to sass/_essentials.scss file as well as via importing a custom .scss file, with no luck. Is there a better way to resolve this error?

undefined failed

width: calc(25% - #{ $button-margin });
                                       ^
Undefined variable: "$button-margin".

File: ../packages/gatsby-woocommerce-theme/src/components/wishlist/add-to-wishlist/style.scss

Redirects to backend (wordpress) website

Hello Mr. Sayed!

After payment has been completed through paypal, it redirects customers to backend wordpress website.
How can I fix it to make them get back to store homepage(static)?

Thanks in advance.

Error with plugin graphql 13.0.0

Hello i download the exact version needed and i got that

gatsby-source-wordpress  Your remote version of WPGraphQL is not within the accepted range (>=0.10.3 <0.13.0).

	Download v >=0.10.3 <0.13.0 at https://github.com/wp-graphql/wp-graphql/releases

	If you're upgrading from an earlier version, read the release notes for each version between your old and new versions to determine which breaking changes you might encounter based on your use of the schema.


Reasons:

- WPGraphQL 0.10.0 introduced a large number of changes that required internal source plugin code changes. A big feature is improved support for WordPress previews and improvements to how Menus are handled. 0.10.3 fixed a private post regression that could cause cold builds to fail.

    V0.11.0 introduced breaking changes, but none that will affect Gatsby users. https://github.com/wp-graphql/wp-graphql/pull/1407

    Head to https://github.com/wp-graphql/wp-graphql/releases/tag/v0.10.0 for more information on upgrading.

Error: Name "____________________________" must not begin with "__", which is reserved by GraphQL introspection.

Hi Imran,

I have an error when using npm run develop and deploying to vercel... everything is done as instructed

ERROR #11321  PLUGIN

"gatsby-woocommerce-theme" threw an error while running the createPages
lifecycle:

Name "____________________________" must not begin with "__", which is reserved
by GraphQL introspection.

Name "__________________________________" must not begin with "__", which is
reserved by GraphQL introspection.

   7 | // Create all pages.
   8 | exports.createPages = async ( { actions, graphql } ) => {
>  9 |  await createFrontPage( { actions, graphql } );
     |        ^
  10 |  await createArchivePages( { actions, graphql } );
  11 |  await createPages( { actions, graphql } );
  12 |  await createPosts( { actions, graphql } );

File: ..\packages\gatsby-woocommerce-theme\gatsby-node.js:9:8

ERROR

Missing onError handler for invocation 'extracting-queries', error was 'Error:
Name "____________________________" must not begin with "__", which is reserved
by GraphQL introspection.

Name "__________________________________" must not begin with "__", which is
reserved by GraphQL introspection.'. Stacktrace was 'Error: Name
"____________________________" must not begin with "__", which is reserved by
GraphQL introspection.

Name "__________________________________" must not begin with "__", which is
reserved by GraphQL introspection.
    at assertValidSchema
(C:\Server\www\wp-gatsby\node_modules\graphql\type\validate.js:71:11)
    at validate
(C:\Server\www\wp-gatsby\node_modules\graphql\validation\validate.js:54:35)
    at extractOperations (C:\Server\www\wp-gatsby\site\node_modules\gatsby\src\q
uery\query-compiler.js:212:20)
    at processQueries (C:\Server\www\wp-gatsby\site\node_modules\gatsby\src\quer
y\query-compiler.js:171:45)
    at compile (C:\Server\www\wp-gatsby\site\node_modules\gatsby\src\query\query
-compiler.js:82:19)
    at updateStateAndRunQueries (C:\Server\www\wp-gatsby\site\node_modules\gatsb
y\src\query\query-watcher.ts:220:40)
    at extractQueries (C:\Server\www\wp-gatsby\site\node_modules\gatsby\src\serv
ices\extract-queries.ts:18:3)'


 Error: Name reserved by GraphQL introspection

how can i fix it?

Request to create a course

Dear Imran sir, I want to know if you already have a course available on how to build / use this Gatsby Woocommerce Theme on your Codeytek website/Youtube? If so, please can you share its URL here or in the Readme file for us all to learn?

If not, I sincerely request you to please create a course on this theme as well. I am a big fan of yours and have learnt a lot from your courses available on Youtube and I wish to learn Gatsby Woocommerce development as well from you.

Vercel Deployment failed.

Hi,

I followed the setup guide along with this video Using React WooCommerce Theme | Gatsby Source WordPress Experimental | React WordPress WooCommerce, but keeps failing with the error below.

Is there something I'm missing?

Here is my configuration:

Error

[22:20:51.859] Cloning github.com/ernestkamara/gatsby-woocommerce-themes (Branch: main, Commit: 86d7be5)
[22:21:02.507] Cloning completed: 10.648s
[22:21:02.929] Installing build runtime...
[22:21:05.195] Build runtime installed: 2.265s
[22:21:05.916] Looking up build cache...
[22:21:06.184] Build Cache not found
[22:21:06.360] Detected package.json
[22:21:06.360] Installing dependencies...
[22:21:06.685] yarn install v1.22.17
[22:21:06.852] [1/4] Resolving packages...
[22:21:08.145] [2/4] Fetching packages...
[22:21:18.214] warning [email protected]: Invalid bin field for "url-loader".
[22:22:01.763] [3/4] Linking dependencies...
[22:22:01.766] warning " > [email protected]" has unmet peer dependency "gatsby@^2.24.74".
[22:22:01.766] warning " > [email protected]" has unmet peer dependency "react@^17.0.1".
[22:22:01.767] warning " > [email protected]" has unmet peer dependency "react-dom@^17.0.1".
[22:22:01.768] warning "workspace-aggregator-915a2bfc-02f7-4737-863e-215c85b16dcd > site > [email protected]" has incorrect peer dependency "react@^16.4.2".
[22:22:01.768] warning "workspace-aggregator-915a2bfc-02f7-4737-863e-215c85b16dcd > site > [email protected]" has incorrect peer dependency "react-dom@^16.4.2".
[22:22:01.768] warning "workspace-aggregator-915a2bfc-02f7-4737-863e-215c85b16dcd > gatsby-woocommerce-theme > @apollo/[email protected]" has unmet peer dependency "graphql@^14.0.0 || ^15.0.0".
[22:22:01.770] warning "workspace-aggregator-915a2bfc-02f7-4737-863e-215c85b16dcd > gatsby-woocommerce-theme > [email protected]" has unmet peer dependency "[email protected] - 3".
[22:22:01.771] warning "workspace-aggregator-915a2bfc-02f7-4737-863e-215c85b16dcd > gatsby-woocommerce-theme > [email protected]" has unmet peer dependency "popper.js@^1.16.1".
[22:22:01.771] warning "workspace-aggregator-915a2bfc-02f7-4737-863e-215c85b16dcd > gatsby-woocommerce-theme > [email protected]" has incorrect peer dependency "react@^16.4.2".
[22:22:01.771] warning "workspace-aggregator-915a2bfc-02f7-4737-863e-215c85b16dcd > gatsby-woocommerce-theme > [email protected]" has incorrect peer dependency "react-dom@^16.4.2".
[22:22:01.771] warning "workspace-aggregator-915a2bfc-02f7-4737-863e-215c85b16dcd > gatsby-woocommerce-theme > [email protected]" has unmet peer dependency "@reach/router@^1.3.3".
[22:22:01.772] warning "workspace-aggregator-915a2bfc-02f7-4737-863e-215c85b16dcd > gatsby-woocommerce-theme > [email protected]" has incorrect peer dependency "react@^16.4.2".
[22:22:01.772] warning "workspace-aggregator-915a2bfc-02f7-4737-863e-215c85b16dcd > gatsby-woocommerce-theme > [email protected]" has incorrect peer dependency "react-dom@^16.4.2".
[22:22:01.772] warning "workspace-aggregator-915a2bfc-02f7-4737-863e-215c85b16dcd > gatsby-woocommerce-theme > [email protected]" has incorrect peer dependency "gatsby@^2.25.0".
[22:22:01.773] warning "workspace-aggregator-915a2bfc-02f7-4737-863e-215c85b16dcd > gatsby-woocommerce-theme > [email protected]" has unmet peer dependency "jquery@>=1.8.0".
[22:22:01.773] warning "workspace-aggregator-915a2bfc-02f7-4737-863e-215c85b16dcd > gatsby-woocommerce-theme > @storybook/[email protected]" has unmet peer dependency "@storybook/source-loader@*".
[22:22:01.774] warning "workspace-aggregator-915a2bfc-02f7-4737-863e-215c85b16dcd > gatsby-woocommerce-theme > [email protected]" has unmet peer dependency "webpack@>=2".
[22:22:01.776] warning "workspace-aggregator-915a2bfc-02f7-4737-863e-215c85b16dcd > gatsby-woocommerce-theme > [email protected]" has unmet peer dependency "core-js@^3.0.0".
[22:22:01.776] warning "workspace-aggregator-915a2bfc-02f7-4737-863e-215c85b16dcd > gatsby-woocommerce-theme > [email protected]" has incorrect peer dependency "react@^16.14.0".
[22:22:01.776] warning "workspace-aggregator-915a2bfc-02f7-4737-863e-215c85b16dcd > gatsby-woocommerce-theme > [email protected]" has unmet peer dependency "webpack@^4.36.0 || ^5.0.0".
[22:22:01.776] warning "workspace-aggregator-915a2bfc-02f7-4737-863e-215c85b16dcd > gatsby-woocommerce-theme > [email protected]" has unmet peer dependency "react-is@>= 16.8.0".
[22:22:01.777] warning "workspace-aggregator-915a2bfc-02f7-4737-863e-215c85b16dcd > site > gatsby > @reach/[email protected]" has incorrect peer dependency "[email protected] || 16.x || 16.4.0-alpha.0911da3".
[22:22:01.777] warning "workspace-aggregator-915a2bfc-02f7-4737-863e-215c85b16dcd > site > gatsby > @reach/[email protected]" has incorrect peer dependency "[email protected] || 16.x || 16.4.0-alpha.0911da3".
[22:22:01.779] warning "workspace-aggregator-915a2bfc-02f7-4737-863e-215c85b16dcd > site > gatsby > [email protected]" has incorrect peer dependency "react@^16.4.2".
[22:22:01.779] warning "workspace-aggregator-915a2bfc-02f7-4737-863e-215c85b16dcd > site > gatsby > [email protected]" has incorrect peer dependency "react-dom@^16.4.2".
[22:22:01.780] warning "workspace-aggregator-915a2bfc-02f7-4737-863e-215c85b16dcd > gatsby-woocommerce-theme > @apollo/client > @graphql-typed-document-node/[email protected]" has unmet peer dependency "graphql@^0.8.0 || ^0.9.0 || ^0.10.0 || ^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0".
[22:22:01.781] warning "workspace-aggregator-915a2bfc-02f7-4737-863e-215c85b16dcd > gatsby-woocommerce-theme > @apollo/client > [email protected]" has unmet peer dependency "graphql@^0.9.0 || ^0.10.0 || ^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0".
[22:22:01.781] warning "workspace-aggregator-915a2bfc-02f7-4737-863e-215c85b16dcd > gatsby-woocommerce-theme > @wordpress/block-library > [email protected]" has incorrect peer dependency "react@^16.8.0".
[22:22:01.781] warning "workspace-aggregator-915a2bfc-02f7-4737-863e-215c85b16dcd > gatsby-woocommerce-theme > @wordpress/block-library > [email protected]" has incorrect peer dependency "react-dom@^16.8.0".
[22:22:01.781] warning "workspace-aggregator-915a2bfc-02f7-4737-863e-215c85b16dcd > gatsby-woocommerce-theme > gatsby > [email protected]" has incorrect peer dependency "gatsby@^2.24.79".
[22:22:01.782] warning "workspace-aggregator-915a2bfc-02f7-4737-863e-215c85b16dcd > gatsby-woocommerce-theme > gatsby-plugin-sass > [email protected]" has unmet peer dependency "webpack@^3.0.0 || ^4.0.0".
[22:22:01.782] warning "workspace-aggregator-915a2bfc-02f7-4737-863e-215c85b16dcd > gatsby-woocommerce-theme > react-medium-image-zoom > [email protected]" has incorrect peer dependency "react@^16.8.0".
[22:22:01.783] warning "workspace-aggregator-915a2bfc-02f7-4737-863e-215c85b16dcd > gatsby-woocommerce-theme > @storybook/addon-actions > @storybook/[email protected]" has unmet peer dependency "regenerator-runtime@*".
[22:22:01.786] warning "workspace-aggregator-915a2bfc-02f7-4737-863e-215c85b16dcd > site > gatsby > @reach/router > [email protected]" has incorrect peer dependency "react@^0.14.0 || ^15.0.0 || ^16.0.0".
[22:22:01.786] warning "workspace-aggregator-915a2bfc-02f7-4737-863e-215c85b16dcd > site > gatsby > @typescript-eslint/eslint-plugin > [email protected]" has unmet peer dependency "typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta".
[22:22:01.787] warning "workspace-aggregator-915a2bfc-02f7-4737-863e-215c85b16dcd > gatsby-woocommerce-theme > @wordpress/block-library > @wordpress/block-editor > [email protected]" has incorrect peer dependency "react@^0.14.0 || ^15.0.0 || ^16.0.0".
[22:22:01.788] warning "workspace-aggregator-915a2bfc-02f7-4737-863e-215c85b16dcd > gatsby-woocommerce-theme > @wordpress/block-library > @wordpress/block-editor > [email protected]" has incorrect peer dependency "react-dom@^0.14.0 || ^15.0.0 || ^16.0.0".
[22:22:01.788] warning "workspace-aggregator-915a2bfc-02f7-4737-863e-215c85b16dcd > gatsby-woocommerce-theme > @wordpress/block-library > @wordpress/components > @emotion/[email protected]" has unmet peer dependency "react-native@>=0.14.0 <1".
[22:22:01.789] warning "workspace-aggregator-915a2bfc-02f7-4737-863e-215c85b16dcd > gatsby-woocommerce-theme > @wordpress/block-library > @wordpress/components > [email protected]" has incorrect peer dependency "react@^0.14 || ^15.5.4 || ^16.1.1".
[22:22:01.789] warning "workspace-aggregator-915a2bfc-02f7-4737-863e-215c85b16dcd > gatsby-woocommerce-theme > @wordpress/block-library > @wordpress/components > [email protected]" has incorrect peer dependency "react-dom@^0.14 || ^15.5.4 || ^16.1.1".
[22:22:01.789] warning "workspace-aggregator-915a2bfc-02f7-4737-863e-215c85b16dcd > gatsby-woocommerce-theme > @wordpress/block-library > @wordpress/components > [email protected]" has incorrect peer dependency "react@^16.8.0".
[22:22:01.790] warning "workspace-aggregator-915a2bfc-02f7-4737-863e-215c85b16dcd > gatsby-woocommerce-theme > @wordpress/block-library > @wordpress/compose > [email protected]" has incorrect peer dependency "react@^16.8.0".
[22:22:01.790] warning "workspace-aggregator-915a2bfc-02f7-4737-863e-215c85b16dcd > gatsby-woocommerce-theme > @wordpress/block-library > @wordpress/url > [email protected]" has unmet peer dependency "react-native@*".
[22:22:01.790] warning "workspace-aggregator-915a2bfc-02f7-4737-863e-215c85b16dcd > gatsby-woocommerce-theme > @wordpress/block-library > reakit > [email protected]" has incorrect peer dependency "react@^16.8.0".
[22:22:01.790] warning "workspace-aggregator-915a2bfc-02f7-4737-863e-215c85b16dcd > gatsby-woocommerce-theme > @wordpress/block-library > reakit > [email protected]" has incorrect peer dependency "react-dom@^16.8.0".
[22:22:01.790] warning "workspace-aggregator-915a2bfc-02f7-4737-863e-215c85b16dcd > gatsby-woocommerce-theme > @wordpress/block-library > reakit > [email protected]" has incorrect peer dependency "react@^16.8.0".
[22:22:01.790] warning "workspace-aggregator-915a2bfc-02f7-4737-863e-215c85b16dcd > gatsby-woocommerce-theme > @wordpress/block-library > reakit > [email protected]" has incorrect peer dependency "react-dom@^16.8.0".
[22:22:01.791] warning "workspace-aggregator-915a2bfc-02f7-4737-863e-215c85b16dcd > gatsby-woocommerce-theme > @wordpress/block-library > reakit > [email protected]" has incorrect peer dependency "react@^16.8.0".
[22:22:01.800] warning "workspace-aggregator-915a2bfc-02f7-4737-863e-215c85b16dcd > gatsby-woocommerce-theme > @wordpress/block-library > @wordpress/components > react-dates > [email protected]" has incorrect peer dependency "react@^0.14 || ^15.0.0 || ^16.0.0-alpha".
[22:22:01.801] warning "workspace-aggregator-915a2bfc-02f7-4737-863e-215c85b16dcd > gatsby-woocommerce-theme > @wordpress/block-library > @wordpress/components > react-dates > [email protected]" has unmet peer dependency "react-with-direction@^1.1.0".
[22:22:01.804] warning "workspace-aggregator-915a2bfc-02f7-4737-863e-215c85b16dcd > site > gatsby > eslint-plugin-graphql > graphql-config > @endemolshinegroup/cosmiconfig-typescript-loader > [email protected]" has unmet peer dependency "typescript@>=2.7".
[22:22:01.806] warning "workspace-aggregator-915a2bfc-02f7-4737-863e-215c85b16dcd > gatsby-woocommerce-theme > @wordpress/block-library > @wordpress/components > react-dates > react-with-styles > [email protected]" has incorrect peer dependency "react@^0.14 || ^15 || ^16".
[22:22:01.806] warning "workspace-aggregator-915a2bfc-02f7-4737-863e-215c85b16dcd > gatsby-woocommerce-theme > @wordpress/block-library > @wordpress/components > react-dates > react-with-styles > [email protected]" has incorrect peer dependency "react-dom@^0.14 || ^15 || ^16".
[22:22:34.823] [4/4] Building fresh packages...
[22:22:44.667] success Saved lockfile.
[22:22:44.673] Done in 98.00s.
[22:22:45.257] 
[22:22:45.257] > [email protected] build /vercel/path0
[22:22:45.257] > yarn workspace site build
[22:22:45.258] 
[22:22:45.505] yarn workspace v1.22.17
[22:22:45.888] yarn run v1.22.17
[22:22:45.957] $ gatsby build
[22:22:48.959] error The site's gatsby-config.js failed validation:
[22:22:48.959] 
[22:22:48.959] child "siteMetadata" fails because [child "siteUrl" fails because ["siteUrl" must be a valid uri]]
[22:22:48.962] not finished open and validate gatsby-configs - 0.090s
[22:22:50.430] error Command failed with exit code 1.
[22:22:50.430] info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
[22:22:50.451] error Command failed.
[22:22:50.451] Exit code: 1
[22:22:50.451] Command: /node14/bin/node
[22:22:50.451] Arguments: /vercel/.yarn/lib/cli.js build
[22:22:50.452] Directory: /vercel/path0/site
[22:22:50.452] Output:
[22:22:50.452] 
[22:22:50.452] info Visit https://yarnpkg.com/en/docs/cli/workspace for documentation about this command.
[22:22:50.465] npm ERR! code ELIFECYCLE
[22:22:50.465] npm ERR! errno 1
[22:22:50.470] npm ERR! [email protected] build: `yarn workspace site build`
[22:22:50.470] npm ERR! Exit status 1
[22:22:50.470] npm ERR! 
[22:22:50.470] npm ERR! Failed at the [email protected] build script.
[22:22:50.470] npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
[22:22:50.481] 
[22:22:50.481] npm ERR! A complete log of this run can be found in:
[22:22:50.481] npm ERR!     /vercel/.npm/_logs/2022-04-08T21_22_50_470Z-debug.log
[22:22:50.488] Error: Command "npm run build" exited with 1

Can not install theme in Gatsby

I install this theme for my gatsby project .But when gatsby develop, it error in module "sharp"
"Something went wrong installing the "sharp" module"

Builds fails with message 'gatsby-source-wordpress Request failed with status code 500'

Build Fails on local and Vercel with backend WordPress Instance running on a shared Linux server

Current Behavior 😯

on following all the steps detailed in the readme, the build fails on running
yarn dev or yarn build

 ERROR
 
 gatsby-source-wordpress  Request failed with status code 500
 
Error occured while fetching nodes of the "Coupon" type.
 
GraphQL request to https://example.com/graphql failed.
 
Please ensure the following statements are true
  - your WordPress URL is correct in gatsby-config.js
  - your server is responding to requests
  - WPGraphQL and WPGatsby are installed in your WordPress backend

Expected Behavior 🤔

Successful Build

TypeError: Cannot read property 'title' of null

Hi,

i am getting following error

FrontPage
C:/Users/ginje/Downloads/Compressed/gatsby-woocommerce-themes-main/gatsby-woocommerce-themes-main/packages/gatsby-woocommerce-theme/src/templates/front-page/index.js:9
6 | import SEO from "../../components/seo";
7 | import { getOgImage } from "../../utils/functions";
8 |

9 | const FrontPage = ( props ) => {
10 |
11 | const {
12 | pageContext: {

118993 | var FrontPage = function FrontPage(props) {
118994 | var _props$pageContext = props.pageContext,
118995 | _props$pageContext$pa = _props$pageContext.page,

118996 | title = _props$pageContext$pa.title,
| ^ 118997 | seo = _props$pageContext$pa.seo,
118998 | uri = _props$pageContext$pa.uri,
118999 | categories = _props$pageContext.categories,

how can i resolve this error

Thanks in advance.

Not able upload more than 10 items

It gives me "error timeout of 30000ms exceeded" when I try to upload more than 10 items, I am hosting WP on cheapest AWS lightsail plan. If I get faster plan will it solve the problem?

build & dev failed with timeout error

Tried the commands after configuring environment variables.
yarn build
yarn dev
Both of them led me to the same errors as following:

`Error: timeout of 30000ms exceeded

• createError.js:16 createError
  [gatsby-woocommerce-themes]/[axios]/lib/core/createError.js:16:15

• http.js:256 ClientRequest.handleRequestTimeout
  [gatsby-woocommerce-themes]/[axios]/lib/adapters/http.js:256:16

• timers.js:531 listOnTimeout
  internal/timers.js:531:17

• timers.js:475 processTimers
  internal/timers.js:475:7

⠇ source and transform nodes
⠇ gatsby-source-wordpress fetching nodes — 0 total
⠇ gatsby-source-wordpress Category
⠇ gatsby-source-wordpress Comment
⠧ gatsby-source-wordpress ContentType
⠧ gatsby-source-wordpress Coupon
⠧ gatsby-source-wordpress Customer
⠧ gatsby-source-wordpress MenuItem
⠧ gatsby-source-wordpress Menu
⠧ gatsby-source-wordpress Order
⠧ gatsby-source-wordpress Page
⠧ gatsby-source-wordpress PostFormat
⠧ gatsby-source-wordpress Post

ERROR

gatsby-source-wordpress It took too long for http://mysite.com/graphql to respond (longer than 30 seconds).
`

How can I solve this?

Login/Register error

Hi

I get this error when trying to login or register.

Unhandled Rejection (TypeError): Cannot read property 'message' of undefined onError packages/gatsby-woocommerce-theme/src/components/login/index.js:47
44 | onError: (error) => {
45 | if (error) {
46 | if (!isEmpty(error)) {
47 | setErrorMessage(error.graphQLErrors[0].message);
48 | }
49 | }
50 | },

Taxes on Checkout Page

The taxes don't show on the checkout page, however they are added to the total when checking out via PayPal. I realize this is because the tax is calculated after the shipping/billing address is entered, but this should be done after leaving the zip code form field and displayed on your-order.js. How can we add the taxes to checkout?

Double image on single product page

i have checked the product carousel is calling more then one time

const ProductCarousel = ( { galleryImages } ) => {
console.log(render 😡');
let slider1 = null;
let slider2 = null;

const [nav1, setNav1] = useState( null );
const [nav2, setNav2] = useState( null );

useEffect( () => {
	setNav1( slider1 )
	setNav2( slider2 )
}, [slider1, slider2] );

if ( isEmpty( galleryImages.nodes ) ) {
	return null;
}

NO adding to the basket

Hi, I can not add prodct to the nbasket on the demo :(

https://gatsby-woocommerce-theme.netlify.app/product/polo/

acf-data json

Hi @imranhsayed i can't find any acf-data inside wordpress directory, can you clarify where exactly the file exist?

Doesn't work with latest version of WPGatsby

Can you please fix the issue? I have been trying to use the theme but running into a lot of issues.

Archive Pages question....

Does anyone know what this is supposed to do? I assumed blog archive but the archive graphql query pulls in products & categories. Trying to understand how it works. Also, when adding in archive or categories into the HCMS footer in the wp admin I am getting 404s.

Question: Accept payments with Stripe

Hi @imranhsayed. Thank you very much for this awesome theme, great work.

I'm looking into potentially accepting Stripe payments using this theme. I found https://github.com/dayhaysoos/use-shopping-cart and was wondering if something like that alone would work or would you still need something like https://woocommerce.com/products/stripe/ to be installed on the WP instance if you want to track inventory, have user account creation and checkout as you currently have it?

Any input you have would be great, would love to hear your opinion. I realize this is quite a broad question with many ways to go about it, I'm still exploring the domain with lots to learn.

Sub menu category

Hi,

How can we display sub product category menus in top navigation. After adding product sub category as menu 404 error when clicking on the menu.

like

Men
-- Winter
-- Casual
-- Pents
Childs
--Winter
-- Casual

Thanks,

When adding product to cart I get: Cannot read property 'message' of undefined

onError
src/components/cart/add-to-cart-button/index.js:63.

  60 |   },
  61 |   onError: (error) => {
  62 |     if (error) {
> 63 |       setRequestError(error.graphQLErrors[0].message);

Installed latest plugins. Any suggestions on what might be the issue would be greatly appreciated.

Moved the shop page results in white page on Netlify

I duplicated the front-page templates in create-page/, templates/, and on gatsby-node.js. The moved shop page works fine with gatsby serve, but shows a white page in production on Netlify. Any idea of what I'm missing?

Request: gdpr compliance

All that seems to be missing is the GDPR compliance part because Google Analytics writes one cookie, and it would be awesome if it also allowed you to add Facebook Pixel code! Just two things, it's awesome already without that!

graphql plugin throwing error on http://localhost:10005/graphql

Dear Imran Sir,

I have follow your given instruction on readme file and prepare a demo wordpress website, but when i access http://localhost:10005/graphql, it gives us this error

{"errors":[{"message":"Internal server error","extensions":{"category":"internal"}}]}

i search the internet, but did not find any related query or answer.
can you please help.

i am using local by flywheel to prepare a wordpress demo site and install all your given plugins.

'GraphQLError"

Hi
I am getting the following Error while running "npm run dev".
'GraphQLError: Enum "ImageFormat" cannot represent value: "auto"

Can you please explain the issue.

Thanks

SeoFragment issue

when running the seo fragment in graphiql I'm receiving the following error
"Unknown type WpSEO"

the build is not running also.
had to substitute the fragment with query ->
seo {
canonical
title
metaDesc
focuskw
metaRobotsNoindex
metaRobotsNofollow
opengraphAuthor
opengraphDescription
opengraphTitle
opengraphDescription
opengraphImage {
sourceUrl
}
opengraphUrl
opengraphSiteName
opengraphPublishedTime
opengraphModifiedTime
twitterTitle
twitterDescription
twitterImage {
sourceUrl
}
}