There’s no explanation of the most important thing the WooCommerce in the docs. Whether it’s supported or not. If supported how things will work!? If WooCommerce isn’t compatible yet there should be page talking solely about why it’s not yet. When frontity is made for WP only, we shouldn’t forget to mention WooCommerce which is the second important use of WP.
As far as I am aware, Frontity has WooCommerce integration added to their roadmap, but they have prioritized other components. That being said, Frontity is an open source project, so you are free to go ahead and work on integrating Frontity with WooCommerce. The team is great at answering any question you may have and I’m sure would be happy to help in away way possible.
2 Likes
Hi @inamkbmail
Sorry for the delay in the answer.
I’ve been doing some research to provide a proper answer.
Frontity provides you a way to create a theme with React that connects easily to your WP REST API. The type of React app you’ll be creating is what is called an isomorphic app, this is, a React App that can be used in both the server and the client
So, when connecting to other API’s you need to take this into account as it has to do with things like authentication.
WooCommerce provides its own API
But with this WooCommerce API when you add products to your shopping cart, for a Frontity app (theme) the data should be:
- Exclusive for every user
- Available from the server (load a shopping cart page)
- Available from the client (add a new product and get the current status of the shopping cart page)
The thing with WooCommerce API is that is back-end only (requires auth for everything) and it doesn’t cover things like shopping cart management. So, to work properly with WooCommerce, as far as we know, the only viable options right now are:
- CoCart API (paid plugin).
- WPGraphQL-WooCommerce plugin (free plugin but with GraphQL).
- Create a custom front-end API using the current WooCommerce back-end API.
We have in our Roadmap some tasks to create some projects with WooCommerce and improve our documentation regarding this
In the meantime, in this post, you may find some clues to start with your WooCommerce project with Frontity → How do I add woocommerce endpoint to the state?
Hope this helps
3 Likes
Yes your answer is nice but I added this topic to ask you guys why the official docs don’t cover WooCommerce. I asked here just to remind you people to improve docs. As people coming to frontity are in suspense if they’d make WooCommerce store. But docs unfortunately, don’t even mention Woocommerce. If you search something like woo, woocommerce nothing match. So, please add a little section in frontity about section – if not a full page yet – to tell people if WooCommerce is supported
3 Likes
Duly noted.
Thanks for your feedback. We’ll take into account.
1 Like
Hi, @juanma, I hope you are well 
I think the best way to use Woocommerce in Frontity is to keep in mind that the products are custom_ post_type,
I realized that I need to extend the Woocommerce endpoint with a custom plugin:
<?php
/**
* Plugin Name: PXE Extends WC Api Rest
* Plugin URI:
* Description: Extends the Woocommerce Rest Api
* Version: 1.0.0
* Author: Pixie
* Author URI: http://www.pixie.com.uy/
* License: GPL-2.0+
* License URI: http://www.gnu.org/licenses/gpl-2.0.txt
* Text Domain: pxe-extend-wc-api-rest
* Domain Path: /languages/
*/
// If this file is called directly, abort.
if ( ! defined( 'WPINC' ) ) {
die;
}
if ( ! class_exists( 'PXE_Extend_Api_Rest' ) ) :
class PXE_Extend_Api_Rest {
protected static $instance = NULL;
public static function get_instance() {
if ( null === self::$instance ) {
self::$instance = new self;
}
return self::$instance;
}
public function __construct() {
add_action( 'rest_api_init', __CLASS__ . '::extend_product_endpoint' );
add_filter( 'woocommerce_taxonomy_args_product_cat', __CLASS__ . '::extend_product_cat' );
}
public static function extend_product_endpoint() {
$fields = array(
'product_image_gallery',
'regular_price',
'sale_price_dates_from',
'sale_price_dates_to',
'sale_price',
'sku',
);
foreach( $fields as $field ) {
register_rest_field ( 'product', $field, array(
'get_callback' => function($object, $field) {
return get_post_meta($object['id'], '_' . $field, true);
}
));
}
register_rest_field( 'product', 'product_cat', array(
'get_callback' => function( $object ) {
$terms = get_the_terms( $object['id'], 'product_cat' );
foreach( $terms as $term ) {
//$categories[] = $term->slug;
$categories[] = $term->term_id;
}
return $categories;
}
));
register_rest_field( 'product', 'price', array(
'get_callback' => function( $object ) {
$product = wc_get_product( $object['id'] );
return $product->get_price();
}
));
register_rest_field( 'product', 'featured', array(
'get_callback' => function( $object ) {
$product = wc_get_product( $object['id'] );
return $product->get_featured();
}
));
register_rest_field( 'product', 'rating_count', array(
'get_callback' => function( $object ) {
$product = wc_get_product( $object['id'] );
return $product->get_rating_counts();
}
));
register_rest_field( 'product', 'average_rating', array(
'get_callback' => function( $object ) {
$product = wc_get_product( $object['id'] );
return $product->get_average_rating();
}
));
}
public static function extend_product_cat( $args ) {
$args['show_in_rest'] = true;
return $args;
}
}
$PPXE_Extend_Api_Rest = new PXE_Extend_Api_Rest;
endif;
to drive the cart I can use local storage to have a local car as described in this post
For the payment process you can use Woocommerce’s own endpoints, I did not try them all
I also didn’t test the variable products, etc.
4 Likes
Hi, @vscopise, you did not test the variable products, but you know how to do it? If so, can you tell me how?
I like to correct that CoCart is a Freemium plugin so there is a free version available to get you started.