virusword.com

Learn Wordpress

Home/Videos/Using React WooCommerce Theme | Gatsby Source WordPress Experimental | React WordPress WooCommerce

Using React WooCommerce Theme | Gatsby Source WordPress Experimental | React WordPress WooCommerce



Learn about using React WooCommerce Theme and deploying it in production.
A React theme for WooCommerce using Gatsby in a Decoupled WordPress Architecture.
* Front end in React
* Backend in WordPress.
* Uses GraphQL to fetch WordPress data withe the help of wp-graphql and wp-graphql-woocommerce.

This theme uses gatsby-source-wordpress@v4 BETA

*** 👨‍💻 Please star my repo and follow me to support my work 🙏 ***
Repo: https://github.com/imranhsayed/gatsby-woocommerce-themes
Live Demo: https://gatsby-woocommerce-theme.netlify.app/

It has following features:

Uses React with Gatsby ( Blazing Fast )
PWA ( Works Offline )
Image Optimization ( blur effect )
GraphQL ( with wp-graphql on WordPress )
Custom Widgets, Menus, Social elements.
WooCommerce store
Yoast SEO supported ( with og tags )
Product Search with pagination ( even works offline )
Product pagination
Archive pages.
Authentication with JWT
My Account page ( with Login and Registration )
Create an account on checkout.
Social share.
Product Carousel.
Add to wishlist( even works offline )

Uses wp-graphql-jwt-authentication, wp-graphql-yoast-seo, wp-gatsby
#reactjs #wordpress #woocommernce

source

Reader Interactions

Comments

  3. This looks great but after doing it locally for 8 hours and on another computer for 4 and vercel. Following everything I think 100%. I constantly get errors. Vercel following this I get Build failed with error code: 1. Having to give up, but locally it also asks "You must define the GraphQL JWT Auth secret to use the WPGraphQL JWT Authentication plugin." I guess thats a step I missed

  5. Hi, I have followed all the steps from video, but once I click on deploy, I get error Deployment failed with error.
    error: gatsby-source-wordpress Request failed with status code 404
    Error: Command "npm run build" exited with 1
    please guide on this

  6. Hi,
    I have followed all the steps from the video, once I start deploying I'm facing error: " gatsby-source-wordpress Request failed with status code 404 " please guide on this

  7. Thanks for your Awesome work and i will using your gatsby theme into my digital agency & increase my service charges. But there is one question, Is Electra theme support Elementor page layout like your Phoenix theme? Thank you

  8. Hi Imran, really like your videos. I'm just getting into Gatsby and love the idea of combining it with my current Woocommerce/wP site. You said at the end of the video that you will probably be creating a video series about how you built this…did you do this? I looked on your website and in the YT playlists but couldnt see anything specifically about it. Please let me know!

  11. Hi! thanks for this amazing content!!
    it's seems that's not working well with variable products still gives these errors on deploying

    error Error: Request failed with status code 500

    11:39:21.101

    at createError (/vercel/path0/node_modules/axios/lib/core/createError.js:16:15)

    11:39:21.101

    at settle (/vercel/path0/node_modules/axios/lib/core/settle.js:17:12)

    11:39:21.101

    at IncomingMessage.handleStreamEnd (/vercel/path0/node_modules/axios/lib/adapters/http.js:236:11)

    11:39:21.101

    at IncomingMessage.emit (events.js:412:35)

    11:39:21.101

    at endReadableNT (internal/streams/readable.js:1317:12)

    11:39:21.102

    at processTicksAndRejections (internal/process/task_queues.js:82:21)

    message: '<p>There has been a critical error on this website.</p><p><a href="https://wordpress.org/support/article/faq-troubleshooting/">Learn more about troubleshooting WordPress.</a></p>',

    error gatsby-source-wordpress Your wordpress server at https://syourioutlet.com/graphql appears to be overloaded.

  13. thank Imran , nice work. I am having a problem when i try to deploy on vercel , SeoFragment issue "Unknown type WpSEO"
    Do you know what is the problem? Any suggestions? , Thank you.

  22. Am I missing something? Somehow I'm unable to deploy from Vercel! Getting stuck at:
    "[3/4] Linking dependencies…"
    AND Lots of
    "warning " > gatsby-woocommerce-theme" – ISSUES
    AND
    "error gatsby-source-wordpress"
    —-

    I've used all the plug-ins that you provided, and installed wordpress on local, and installed wordpress on a live site as well. still the same errors.

    Also – i can't event run dev as it failed. I've installed Yarn, and ran the code npm run dev – here's the error i'm getting:
    'yarn' is not recognized as an internal or external command,
    Failed at the gatsby-woocommerce-themes@2.0.1 dev script.

    Any help is appreciated…

    Thanks

  23. Thanks Imran Sayed for your awesome work! I want to add stripe payment method with woocommerce and gatsby front end site. What the steps should I follow for a successful payment transaction?

  24. Can you please guide me regarding WP setup for that theme because I setup as you discribed in the video but still have deploy problem getting error /graphql failed.

  25. Great video. I am having a problem. I followed all the steps but when I go to localhost:8000 after the dev build, I am getting an error: TypeError: Cannot read property 'title' of null – seems to not be picking up the page title for the frontpage

  27. getting this on build 🙁

    18:05:13 – WPGatsby 0.4.14 supports WPGraphQL 0.10.3. Version 0.4.13 and before had a bug where making a published post into a draft wouldn't delete the post in Gatsby.

    18:05:13 not finished createSchemaCustomization – 5.777s

    18:05:13 error Command failed with exit code 1.

    18:05:13 info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

    18:05:13 error Command failed.

    18:05:13 Exit code: 1

    18:05:13 Command: /node12/bin/node

    18:05:13 Arguments: /vercel/.yarn/lib/cli.js build

    18:05:13 Directory: /vercel/workpath0/site

    WHat can bee the reason?

  30. Killer content Imran! Don’t know why you don’t have more followers. Don’t know anyone else talking about this and it’s absolutely game changing. Is it already working with stripe and paypal? Can we create post purchase upsells? If you answer yes to both I would really love to talk!

  33. Hello Imran, thank you for the video, I'm really excited to try out your theme! Unfortunately I'm running into an error while running npm run dev command locally (ERROR gatsby-source-wordpress WPGatsby and WPGraphQL are both outside the accepted version ranges). Im running the plugin versions you provided via github, updated versions of the plugins yield the same error. Any idea what i might be doing wrong?

Explore more

Get our Wordpress Guide Get Plugins Get Connected