Skip to content
This repository has been archived by the owner on Jun 9, 2022. It is now read-only.
/ woo-next Public archive
forked from imranhsayed/woo-next

🚀 React WooCommerce theme, built with Next JS, Webpack, Babel, Node, Express, using GraphQL and Apollo Client

Notifications You must be signed in to change notification settings

nadiavanleur/woo-next

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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 📹

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. 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

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

About

🚀 React WooCommerce theme, built with Next JS, Webpack, Babel, Node, Express, using GraphQL and Apollo Client

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 99.5%
  • Other 0.5%