/woo-next

:rocket: React WooCommerce theme, built with Next JS, Webpack, Babel, Node, Express, using GraphQL.

Primary LanguageJavaScript

Woo Next React Theme 🚀

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

Full Course Video Tutorial

Demo Desktop 📹

Demo Tablet and Mobile View 📹

Categories

Live Demo:

Live Demo Site

Checkout Page Demo

Payment Demo ( Paypal example )

Order Received Demo

Features:

  1. WooCommerce Store in React( contains: Products Page, Single Product Page, AddToCart, CartPage and Checkout Page )
  2. SSR
  3. SEO friendly
  4. Automatic Code Splitting
  5. Hot Reloading
  6. Prefetching
  7. GraphQL with Apollo Client

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 git@github.com:imranhsayed/woo-next
  2. cd woo-next
  3. npm install

Add GraphQl support for WordPress

  1. Clone and activate the following plugins , in your WordPress plugin directory:
  • wp-graphql Exposes graphql for WordPress ( Tested with v-0.8.0 of this plugin )
  • wp-graphiql Provides GraphiQL IDE (playground) to the WP-Admin.
  • wp-graphql-woocommerce Adds Woocommerce functionality to a WPGraphQL schema ( Tested with v-0.5.0 of this plugin )

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

Configuration 🔧

  • 1.Rename client-config-example.js to client-config.js and update your React Site URL and WordPressSite URL ( Used access it in ES6 file. )
const clientConfig = {
	siteUrl: 'http://xyz.com',
    graphqlUrl: 'http://wordpressSiteUrl.com/graphql'
};

export default clientConfig;
    1. Rename wooConfig.example.js to wooConfig.example.js and update your React Site URL and WordPressSite URL ( Used access it in common js file. )
const wooConfig = {
	siteUrl: 'https://xyz.com',
	graphqlUrl: 'https://xxwordpresssitexx.com/graphql',
};

module.exports = wooConfig;

Branch details

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

The master branch has the GraphQL implementation.

Common Commands 💻

  • dev Runs server in development mode

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