A Proof of Concept of WooCommerce & Frontity

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