Skip to content

Latest commit

 

History

History
115 lines (70 loc) · 3.93 KB

README.md

File metadata and controls

115 lines (70 loc) · 3.93 KB
Raw

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 [email protected]:imranhsayed/woo-next
  2. cd woo-next
  3. npm 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-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 )

  • 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

Configuration 🔧

  • 1.Rename client-config-example.js to client-config.js and update your React Site URL, WordPressSite URL ( Used access it in ES6 file. ), productImagePlaceholder, singleImagePlaceholder
const clientConfig = {
	siteUrl: 'xxxxx', // e.g. 'https://xyz.com'
    graphqlUrl: 'xxxxx' // e.g. 'https://wordpressSiteUrl.com/graphql',
    productImagePlaceholder: 'https://via.placeholder.com/800', // e.g https://via.placeholder.com/434 - Placeholder image URL for index page
    singleImagePlaceholder: 'https://via.placeholder.com/200', // e.g https://via.placeholder.com/200 - Placeholder image URL for individual product page
};

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: 'xxxxx', // e.g. 'https://xyz.com'
    graphqlUrl: 'xxxxx' // e.g. 'https://wordpressSiteUrl.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