Woo-next-br - WooCommerce React CMS Theme built with NextJs Babel, Node, using GraphQL and Apollo Client

Last update: Feb 23, 2022

WooCommerce Nextjs React Theme 🚀

Project Status: Active. Stars Forks Contributors Follow

  • This is a React WooCommerce theme, built with Next JS, Webpack, Babel, Node, GraphQl

📹 Full Course Video Tutorial

Important Note :

The code for the Video Tutorial is in the branch youtube-course However, since there is continuous contribution and updates to this project. The 'master' branch is upto date with those changes. You can also refer to the PR notes for changes.

Demo Desktop 📹

Live Demo:

Live Demo Site

Checkout Page Demo

Payment Demo ( Paypal example )

Order Received Demo

Stripe Checkout

Stripe Demo Video

Features:

  1. WooCommerce Store in React( contains: Products Page, Single Product Page, AddToCart, CartPage and Checkout Page with country selection ).
  2. SSR
  3. SEO friendly
  4. Automatic Code Splitting
  5. Hot Reloading
  6. Prefetching
  7. Incremental Static (Re)generation ( Next.js 10 support )
  8. GraphQL with Apollo Client
  9. Tailwindcss
  10. Stripe Checkout ( with Stripe Session and Stripe webhook)

Getting Started 🚀

These instructions will get you a copy of the project up and running on your local machine for development purposes.

Prerequisites 📄

Installing 🔧

  1. Clone this repo using terminal git clone [email protected]:imranhsayed/woo-next
  2. cd woo-next
  3. yarn install

Add GraphQl support for WordPress

  1. Download and activate the following plugins , in your WordPress plugin directory:
  • wp-graphql Exposes graphql for WordPress ( Tested with v-1.3.8 of this plugin )

  • wp-graphql-woocommerce Adds Woocommerce functionality to a WPGraphQL schema ( Tested with v-0.8.1 of this plugin )

  • headless-cms Extends WPGraphQL Schema ( Tested with v-1.8.0 of this plugin )

  • Make sure Woocommerce plugin is also installed in your WordPress site. 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

Hero Carousel.

To use Hero carousel, create a category called 'offers' from WordPress Dashboard > Products > Categories. Now create and assign as many child categories to this parent 'offers' category with name, description and image. These Child categories data will automatically be used to create hero carousel on the frontend.

Configuration(for GraphQL implementation) 🔧

  • Note Below is for GraphQL implementation , for REST API check feature/rest-api branch
  1. (Required) Create a .env file taking reference from .env-example and update your WordPressSite URL.
  • NEXT_PUBLIC_WORDPRESS_URL=https://example.com

Branch details

  1. feature/rest-api Contains REST API Implementation.

  2. The master branch has the GraphQL implementation.

Common Commands 💻

  • dev Runs server in development mode

Code Contributors ✰

Thanks to all the people who contributed to the code of this project 🤝

Imran Sayed Daniel F Fandi Rahmawan yudyananda

Contributing 👥

Please read CONTRIBUTING.md for details on our code of conduct, and the process for submitting pull requests to us.

Versioning 📑

I use Git for versioning.

Author 👤

License 📃

This project is licensed under the MIT License - see the LICENSE.md file for details

GitHub

https://github.com/fabiojundev/woo-next-br
You might also like...

A Visual Studio Code themed developer portfolio website built with Next.js and deployed on Vercel

vscode-portfolio A Visual Studio Code themed developer portfolio website built with Next.js and deployed on Vercel. Features Roadmap Themes and custom

Jul 31, 2022

A plugin to generate terraform configuration for Nextjs 8 and 9

A plugin to generate terraform configuration for Nextjs 8 and 9

Terraform nextjs plugin A plugin to generate terraform configuration from nextjs pages The reason Nextjs supports serverless pages, where it creates f

Jun 8, 2022

The easiest way to translate your NextJs apps.

The easiest way to translate your NextJs apps.

next-i18next The easiest way to translate your NextJs apps. If you are using next-i18next in production, please consider sponsoring the package with a

Aug 3, 2022

nextjs + purgecss for smaller css bundles

next-purgecss Next.js + Purgecss = 🔥 Next.js makes it easy to create SSR and static React applications. Purgecss helps you remove unused CSS. Install

Jun 30, 2022

Enable Fast Refresh for remote data in NextJS.

Enable Fast Refresh for remote data in NextJS.

Jul 19, 2022

NextJS VScode extension to visualize component tree.

NextJS VScode extension to visualize component tree.

Nexus A component tree extension for NextJS Report Bugs · Request Features Table of Contents About The Project Built With Installation Getting Started

May 13, 2022

🛠 Next.js stateless session utility using signed and encrypted cookies to store data

next-iron-session 🛠 Next.js and Express (connect middleware) stateless session utility using signed and encrypted cookies to store data This Next.js,

Aug 7, 2022

A beautiful and open source Landing Page Using Next JS

A beautiful and open source Landing Page Using Next JS

Taskia Landing Page Live Site Install Dependencies npm install Run App # Run in

Jul 20, 2022

Typed APIs using SWR and Next.js

Typed APIs using SWR and Next.js

Typed API with SWR Next.js plugin This Next.js plugin generates a TypeScript file to enhance the useSWR React Hook types so the return value is typed

Aug 1, 2022
Comments
  • 1. Bump terser from 5.12.1 to 5.14.2

    Bumps terser from 5.12.1 to 5.14.2.

    Changelog

    Sourced from terser's changelog.

    v5.14.2

    • Security fix for RegExps that should not be evaluated (regexp DDOS)
    • Source maps improvements (#1211)
    • Performance improvements in long property access evaluation (#1213)

    v5.14.1

    • keep_numbers option added to TypeScript defs (#1208)
    • Fixed parsing of nested template strings (#1204)

    v5.14.0

    • Switched to @​jridgewell/source-map for sourcemap generation (#1190, #1181)
    • Fixed source maps with non-terminated segments (#1106)
    • Enabled typescript types to be imported from the package (#1194)
    • Extra DOM props have been added (#1191)
    • Delete the AST while generating code, as a means to save RAM

    v5.13.1

    • Removed self-assignments (varname=varname) (closes #1081)
    • Separated inlining code (for inlining things into references, or removing IIFEs)
    • Allow multiple identifiers with the same name in var destructuring (eg var { a, a } = x) (#1176)

    v5.13.0

    • All calls to eval() were removed (#1171, #1184)
    • source-map was updated to 0.8.0-beta.0 (#1164)
    • NavigatorUAData was added to domprops to avoid property mangling (#1166)
    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    Reviewed by dependabot[bot] at 2022-07-21 01:04
  • 2. Bump sharp from 0.30.3 to 0.30.5

    Bumps sharp from 0.30.3 to 0.30.5.

    Changelog

    Sourced from sharp's changelog.

    v0.30.5 - 23rd May 2022

    v0.30.4 - 18th April 2022

    • Increase control over sensitivity to invalid images via failOn, deprecate failOnError (equivalent to failOn: 'warning').

    • Ensure create input image has correct bit depth and colour space. #3139

    • Add support for TypedArray input with byteOffset and length. #3146 @​codepage949

    • Improve error message when attempting to render SVG input greater than 32767x32767. #3167

    • Add missing file name to 'Input file is missing' error message. #3178 @​Brodan

    Commits
    • db654de Release v0.30.5
    • a6aeef6 Install: pass PKG_CONFIG_PATH via env rather than substitution
    • 7bf6cbd Docs: correct links to libvips documentation
    • 04c31b3 Install: warn about filesystem owner running npm v8+ as root
    • ee9cdb6 Bump deps
    • 8960eb8 Docs: changelog entry for #3218
    • 54d9dc4 Fix rotate-then-extract for EXIF orientation 2 (#3218)
    • 51b4a7c Add support for --libc flag to improve cross-platform install (#3160)
    • 5b03579 Docs: more details about concurrency, parallelism, threads
    • 58c2af3 Docs: improve output format info for toBuffer
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    Reviewed by dependabot[bot] at 2022-06-01 23:53
  • 3. Bump moment from 2.29.1 to 2.29.2

    Bumps moment from 2.29.1 to 2.29.2.

    Changelog

    Sourced from moment's changelog.

    2.29.2 See full changelog

    • Release Apr 3 2022

    Address https://github.com/advisories/GHSA-8hfj-j24r-96c4

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    Reviewed by dependabot[bot] at 2022-04-09 14:07
next-gql-dogs code for the NextJS + GraphQL + Typescript Blueprint video

next-gql-dogs code for the NextJS + GraphQL + Typescript Blueprint video

Aug 2, 2022
Perfect Next.js dark mode in 2 lines of code. Support System preference and any other theme with no flashing

Perfect Next.js dark mode in 2 lines of code. Support System preference and any other theme with no flashing

Aug 2, 2022
Apollo HOC for Next.js

next-with-apollo Apollo HOC for Next.js. For Next v9 use the latest version. For Next v6-v8 use the version 3.4.0. For Next v5 and lower go here and u

Jul 25, 2022
Vulcan Next helps you build GraphQL-based applications with Next.js
Vulcan Next helps you build GraphQL-based applications with Next.js

Vulcan Next Vulcan Next helps you build GraphQL-based applications with Next.js. What's in the box? Vulcan Next provides: A production-grade Next.js +

Dec 29, 2021
Next-js movie-app - Sample movie app using NextJS and TMDB as an API
Next-js movie-app - Sample movie app using NextJS and TMDB as an API

Next.JS Boilerplate with Typescript and Redux Toolkit A Next.JS Boilerplate in T

Apr 1, 2022
The TypeScript-ready, minimal router and middleware layer for Next.js, Micro, Vercel, or Node.js http/http2

next-connect The smol method routing and middleware for Next.js (also works in other frameworks). Powered by trouter. Features Compatible with Express

Aug 6, 2022
Next-base64: Base64 decoder and encoder for nextjs 🎉

next-base64 is a library for client-side and server-side base64 encoding and decoding

Jul 12, 2022
Next SEO is a plug in that makes managing your SEO easier in Next.js projects.
Next SEO is a plug in that makes managing your SEO easier in Next.js projects.

Next SEO Next SEO is a plugin that makes managing your SEO easier in Next.js projects. Pull requests are very welcome. Also make sure to check out the

Aug 6, 2022
next-useragent parses browser user-agent strings for next.js
next-useragent parses browser user-agent strings for next.js

next-useragent ⚠️ Version 2 of this library will work only with Next.js 9. If you're using Next.js 6-8 you can use previous versions. ⚠️ next-useragen

Jul 27, 2022
A Minimal PokéDex App built using Next.js and React
A Minimal PokéDex App built using Next.js and React

ToxaDex A PokéDex App built using Next.js and React. Uses the PokéAPI directly to fetch data on all 898 Pokémon. Uses Static Site Generation for rende

Jul 14, 2022