WooCommerce & Frontity

A proof of concept of Frontity and WooCommerce together

A Proof of Concept of WooCommerce & Frontity

By admin

on Thu Dec 17 2020

This is only an experiment of a possible @frontity/woocommerce package using the WooCommerce Store API, which is not public yet. Don’t use this in production. If you want to know more about this proof of concept -or participate in the conversation- you can go to this thread in the community.

GitHub repository

https://github.com/frontity/woocommerce-proof-of-concept

Community thread

https://community.frontity.org/t/woocommerce-proof-of-concept/3596

The repository contains a Frontity project with two packages:

woocommerce-poc

  • Exposes state to be consumed by themes, including products, cart and checkout info.
  • Exposes actions to communicate with the WooCommerce Store API.
  • Adds some @frontity/wp-source handlers for the product pages and for the cart and checkout pages.
  • Also, it exports some types and type guards to be used by themes written in TypeScript.

woocommerce-theme

  • Consumes the state populated and actions exposed by the woocommerce package
  • Renders pages for the products, the cart, checkout and order.
  • It is based on the @frontity/mars-theme starter theme, and all the components related to WooCoomerce are placed into the /packages/woocommerce-theme/src/components/woocommerce folder.

What it does

Here’s a list of the things you can do with this proof of concept:

  •  List all products
  •  View products
  •  Add simple products to the cart
  •  Modify the quantity of each product in the cart
  •  Remove items from the cart
  •  Do the checkout
  •  Place an order and preview it

What it doesn’t do

These ones were not implemented yet:

  •  List products by category
  •  List products by tag
  •  List products by attribute
  •  Search and filter products
  •  Show product reviews
  •  Show related products
  •  Handle product collections
  •  Use coupons
  •  Change the payment method (“cheque” is hardcoded)
  •  Show orders after closing or refreshing the app
  •  Post previews for products

Run the demo

To setup and run the Frontity project, simply follow these steps:

Clone the repository:

git clone https://github.com/frontity/woocommerce-proof-of-concept.git cd woocommerce-proof-of-concept

Install the project dependencies:

npm install

Run the npx frontity dev command to start the project in development mode:

npx frontity dev