WooCommerce & Frontity [Proof of Concept]

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

⚠️️ This repository is still a Work In Progress so some features may not work yet.

Summary

This 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

---

WordPress Setup - optional

By default, the Frontity project uses https://woocommerce.frontity.org as the WordPress source. You can check this message in the community to know more about how it is configured.

It can be run with your own WordPress but only in Embedded mode, because the Store API uses cookies and the SameSite setting they have by default doesn't allow it to be used by a different domain.

So, if you prefer to use your own instance, you can set it up in Embedded mode following these steps:

• Create a WordPress instace. If you are working in your own machine, you can use Local for that.

• Install the following plugins:

  • WooCommerce (tested with v4.8.0)

  • WooCommerce Blocks (tested with v4.0.0)

  • Frontity Embedded Mode - [Proof of Concept]

    ⚠️ This plugin is required to avoid cross-site issues. See this thread in the community for more information.

• The following code snippet should be added as well. It disables the nonce check for all of the Store API endpoints that require nonces.

  add_action( 'rest_api_init', function () {
    add_filter( 'woocommerce_store_api_disable_nonce_check', '__return_true' );
  });

• Once the WooCommerce plugin is installed and activated, the WooCommercee configuration wizard will show up. Just skip it by clicking on "Skip setup store details".

  WooCommerce should have created these pages:

  • Cart — Cart Page
  • Checkout — Checkout Page
  • My account — My Account Page
  • Shop — Shop Page

• To add some product examples, you can import the WooCommerce sample data as explained in their docs.

• Now, in "WooCommerce > Settings > Payments", enable the "Check payments" method.

• After that, go back to the Frontity project and, in the frontity.settings.js file, point the state.source.url setting inside @frontity/wp-source to your WordPress instance.

  {
    name: "@frontity/wp-source",
    state: {
      source: {
        // Set here the URL to your WordPress instance.
        url: "http://my-woocommerce.local",
      },
    },
  },

• To run the project, you should add the public-path argument this time.

  npx frontity dev --public-path http://localhost:3000/static

• Navigate to the URL of your WordPress instance (not to http://localhost:3000) to see the Frontity site in action.

If you want to deploy this to a real server remember to use frontity build:

npx frontity build --public-path https://your-frontity-domain.com/static

---

Frontity Channels 🌎

We have different channels at your disposal where you can find information about the Frontity project, discuss it and get involved:

• 📖 Docs: this is the place to learn how to build amazing sites with Frontity.
• 👨‍👩‍👧‍👦 Community: use our forum to ask any questions, feedback and meet great people. This is your place too to share what are you building with Frontity!
• 🐞 GitHub: we use GitHub for bugs and pull requests. Questions are answered in the community forum!
• 🗣 Social media: a more informal place to interact with Frontity users, reach out to us on Twitter.
• 💌 Newsletter: do you want to receive the latest framework updates and news? Subscribe here

» Get involved 🤗

Got questions or feedback about Frontity? We'd love to hear from you. Use our community forum yo ! ❤️

Frontity also welcomes contributions. There are many ways to support the project! If you don't know where to start, this guide might help: How to contribute?