GitPlanet

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Created with love in Canada, visit hostnodejs.com today

Feel like to post an Ad? Learn Details
All Projects → imranhsayed → nextjs-woocommerce-restapi

imranhsayed / nextjs-woocommerce-restapi

Licence: MIT license
A React WooCommerce Project Example With REST API

Programming Languages

javascript
184084 projects - #8 most used programming language
SCSS
7915 projects

Labels

wordpressstripereactjsnextjsheadlessrestapiwoocommercecartdecoupledcheckout-pagenextjs-woocommerce-restapi-exampleheadless-wordpress-framework

Projects that are alternatives of or similar to nextjs-woocommerce-restapi

Ecommwar
A leaderboard of the top open-source e-commerce platforms. Promoting the bests for building reliable stores.
Stars: ✭ 203 (+20.83%)
Mutual labels:  woocommerce, cart
Example Storefront
Example Storefront is Reaction Commerce’s headless ecommerce storefront - Next.js, GraphQL, React. Built using Apollo Client and the commerce-focused React UI components provided in the Storefront Component Library (reactioncommerce/reaction-component-library). It connects with Reaction backend with the GraphQL API.
Stars: ✭ 471 (+180.36%)
Mutual labels:  headless, cart
saleor
A modular, high performance, headless e-commerce platform built with Python, GraphQL, Django, and React.
Stars: ✭ 15,824 (+9319.05%)
Mutual labels:  headless, cart
awesome-ecommerce
Collect and develop Open Source or Free Projects for building ecommerce platform easy and fast and free
Stars: ✭ 39 (-76.79%)
Mutual labels:  woocommerce, cart
7cart
7cart is a php7 project for building online shops, catalogs or service platforms. 7cart built with simple code and database schema. It is easy to support and fast.
Stars: ✭ 27 (-83.93%)
Mutual labels:  woocommerce, cart
Co Cart
🛒 CoCart is a flexible, open-source solution to enabling the shopping cart via the REST API for WooCommerce.
Stars: ✭ 198 (+17.86%)
Mutual labels:  woocommerce, cart
Nopcommerce
The most popular open-source eCommerce shopping cart solution based on ASP.NET Core
Stars: ✭ 6,827 (+3963.69%)
Mutual labels:  headless, cart
Awesome Woocommerce
Plugins and code snippets to improve your WooCommerce store.
Stars: ✭ 279 (+66.07%)
Mutual labels:  woocommerce, cart
Reaction
Mailchimp Open Commerce is an API-first, headless commerce platform built using Node.js, React, GraphQL. Deployed via Docker and Kubernetes.
Stars: ✭ 11,588 (+6797.62%)
Mutual labels:  headless, cart
Saleor
A modular, high performance, headless e-commerce platform built with Python, GraphQL, Django, and React.
Stars: ✭ 14,720 (+8661.9%)
Mutual labels:  headless, cart
cart-woocommerce
Mercado Pago's Official WooCommerce Plugin
Stars: ✭ 82 (-51.19%)
Mutual labels:  woocommerce, cart
Expresscart
A fully functioning Node.js shopping cart with Stripe, PayPal, Authorize.net, PayWay, Blockonomics, Adyen, Zip and Instore payments.
Stars: ✭ 2,069 (+1131.55%)
Mutual labels:  stripe, cart
TriTan-CMS
TriTan CMS is a developer centric content management framework that allows you to go completely headless or nearly headless. With the mighty TriTan, you can build amazing RESTful applications and robust websites.
Stars: ✭ 19 (-88.69%)
Mutual labels:  headless, decoupled
Unchained
Headless & open-source e-commerce toolkit. The Unchained Engine is our core product and is written in Node.js ES6
Stars: ✭ 92 (-45.24%)
Mutual labels:  headless, cart
Commerce.js
Open source, JS eCommerce SDK for building headless, Jamstack applications. Build custom storefronts, carts, and checkouts in any frontend framework, platform, or device. Integrates with Stripe, Square, PayPal, Paymill and Razorpay with support for 135+ currencies.
Stars: ✭ 112 (-33.33%)
Mutual labels:  stripe, headless
FlexDotnetCMS
A powerful, flexible, decoupled and easy to use and Fully Featured ASP .NET CMS, it can also be used as a Headless CMS
Stars: ✭ 45 (-73.21%)
Mutual labels:  headless, decoupled
cart
Shopping cart composer package
Stars: ✭ 109 (-35.12%)
Mutual labels:  cart
saving-card-after-payment
Learn how to save a card for later reuse after making a payment
Stars: ✭ 78 (-53.57%)
Mutual labels:  stripe
commerce-stripe
Stripe payment gateway for Craft Commerce
Stars: ✭ 21 (-87.5%)
Mutual labels:  stripe
laravel-stripe
No description or website provided.
Stars: ✭ 14 (-91.67%)
Mutual labels:  stripe
View All Similar Projects ➔

🎨 Next.js WooCommerce REST API

Project Status: Active. Stars Forks Contributors Follow

  • React WooCommerce Theme, using Decoupled Architecture in Next.js
  • Backend in WordPress
  • Front end in React.
  • Data is Fetched through REST API.

Features

  1. Home Page, Blog Page, Post Page
  2. Post Preview ( Coming Soon )
  3. Product Pagination ( Coming Soon )
  4. Load More Products ( Coming Soon )
  5. REST API endpoints.
  6. Header and Footer in Next.js fetching from WordPress Menu items.
  7. WordPress Widgets displayed on Next.js frontend.
  8. Site title, tagline, copyright text, social links sourced from WordPress.
  9. Next.js Image component, that has image optimization at request time
  10. Authentication with JWT and Http Only Cookie implementation. ( Coming Soon )
  11. Login feature for WP Post Preview in Next.js ( Coming Soon )
  12. Incremental Static (Re)generation and automatic creation of New Static post pages without having to re-build next.js the application. ( Coming Soon )
  13. Gutenberg styles support
  14. Checkout Page with Stripe Payment Gateway Integration.

Tutorial Course

Live Demo Link

Setup

First clone/fork the repo and cd into it.

git clone https://github.com/imranhsayed/nextjs-woocommerce-restapi.git
cd nextjs-woocommerce-restapi
npm ci
npm run dev

Add Headless features for WordPress

  • Install and Activate following WordPress Plugins:

Configuration 🔧

  1. (Required) Create a .env file taking reference from .env-example and update your WordPressSite URL and Frontend next.js URL.
  • NEXT_PUBLIC_WORDPRESS_URL=https://example.com
  • NEXT_PUBLIC_SITE_URL=http://localhost.com ( This will be your frontend Next.js URL)

  1. Add your WC_CONSUMER_KEY and WC_CONSUMER_SECRET to the .env by following WooCommerce > Settings > Advanced > REST API

  2. In your WordPress Dashboard, Go to Settings > General > Site Address (URL) ( Set this to Frontend URL e.g. http://localhost:3000 during development )

  3. Create the Header and Footer Menus In WordPress Dashboard and set them to HCMS Header menu and HCMS Footer Menu respectively.

Useful Links

Versioning 📑

I use Git for versioning.

Author 👤

License 📃

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

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].