How do I add woocommerce endpoint to the state?

[vscopise]

I can save and get the cart from the localstorage:

const addToCart = ({ state, actions }) => ({ productId, quantity }) => {
  state.theme.cart.push({ productId, quantity });
  localStorage.setItem(
    'frontity_wc_cart',
    JSON.stringify(state.theme.cart)
  );
  actions.theme.calculateCartTotal();
}


...
actions: {
  theme: {
    afterCSR: ({ state, actions, libraries }) => {
      const cachedCart = window.localStorage.getItem('frontity_wc_cart');
      if (cachedCart && cachedCart.length !== 0) {
        state.theme.cart = JSON.parse(cachedCart);
        state.theme.cart.map(cartItem => {
          //here I need to read the details of the products of the cart 
          //and save them in the state
        });
      }
    }
  }

How can I get the details of the products stored in the cart?

[mmczaplinski]

As far as I can tell you should do it in the same way as desribed by @luisherranz in How do I add woocommerce endpoint to the state?

Does it not work? What approaches have you tried? Do you have an errors that occur with your solution?

[vscopise]

@luisherranz describes a handler to load a product, which is not necessary now, since I handle products like Custom Post Types.
Now I need to load the products from the shopping cart (which I charge from localStorage) at the start of the app, I have the product id(s) from the localStorage

Thks!

[vscopise]

Using localStorage now I be able to get the saved cart, in my connected component:

const HeaderCart = ({ state, actions }) => {
  ...

  if (state.frontity.platform === 'client') {
    if ( 0 === state.theme.cart.length ) {
      const storedCart = localStorage.getItem(
        'frontity_wc_cart'
      );

      if (storedCart && storedCart.length !== 0) {
        state.theme.cart = JSON.parse(storedCart);
        state.theme.cart.map(cartItem => {

          // here i need to fetch each product from the api...

        })
      };
    }
  }

Do I need a handler to get each product?

[vscopise]

the solution was a handler to read the necessary products:

const HeaderCart = ({ state, actions }) => {
  ...
  
  useEffect(() => {
    if (state.frontity.platform === 'client') {
      if (0 === state.theme.cart.length) {
        const storedCart = localStorage.getItem(
          'frontity_wc_cart'
        );
        if (storedCart && storedCart.length !== 0) {
          state.theme.cart = JSON.parse(storedCart);
          state.theme.cart.map(cartItem => {
            actions.source.fetch(
              `/product/${cartItem.productId}`,
            );
          })
        };
      }
    }
  }, []);

and the handler:

export const productHandler = {
  name: 'product',
  priority: 10,
  pattern: '/product/:slug',
  func: async ({ route, params, state, libraries }) => {
    // 1. get product
    const response = await libraries.source.api.get({
      endpoint: `product/${params.slug}`,
    });
    // 2. add product to state
    const [product] = await libraries.source.populate({ response, state });
    // 3. add route to data
    Object.assign(state.source.data[route], { product });
  }
}

It is important to consider when the product is loaded in the state to be able to display it in the component

Thanks everybody !

[luisherranz]

Great work @vscopise!!

Out of curiousity: why did you end up using useEffect instead of afterCSR to do the fetches?

[vscopise]

Good point @luisherranz,

now the handler is in afterCSR.

Until now you can see my progress in
https://frontity-wc.now.sh/
https://github.com/vscopise/frontity-wc

[403page]

Hey @vscopise! This method is awesome. I only just got around to trying it out. Did you ever get around to figuring out the payment handling and sending the order back to wordpress for processing? Working on it now, just curious if you already found a decent method.

[vscopise]

Hey @403page!
The payment works ok, I did not try many payment gateways, but the order is generated and confirmation emails are sent !

[403page]

Nice!
I’m just working on the create order bit. On submitting it I’m getting {“code”:“rest_no_route”,“message”:“No route was found matching the URL and request method”,“data”:{“status”:404}} for /wp-json/wp/v2/create-order. I’ve put your PXE Extends WC Api Rest plugin on the Wordpress side - but I guess I still need to write that specific endpoint in.

[vscopise]

Hey @403page !
I’ve update de WC Plugin in https://github.com/vscopise/pxe-wc-api-rest to include de create-order endpoint
Let me see if it’s ok for you

[mmczaplinski]

Hey @vscopise! I was just taking a look at the https://frontity-wc.now.sh/ project and it looks really promising! Have you launched it yet it or was it just a proof of concept?

Would love to hear what problems you came across (if any) and how you managed to solve them

[vscopise]

Hi, @mmczaplinski
Until now, its a proof of concept, and I am taking advantage to learn React and Frontity.
I think Woocommerce is an excellent opportunity to apply the framework.
Soon I will include news, such as variable products and different payment gateways

[403page]

I just updated the code on my local. Absolutely AWESOME. Orders work perfectly! I just want to add Stripe to my test frontity build to actually grab the payment before sending the order to wordpress and it’s ready for a basic live woocommerce store.

This use case is genuinely exciting. Woocommerce is a monster for CPU with all its admin ajax, cart refresh fragments, uncached logged in user sessions, etc.

Offloading that intensive part of the store to Frontity would save someone thousands, even tens of thousands in hardware costs at scale.

Really incredible work @vscopise!

[mmczaplinski]

Sounds great @vscopise, keep us updated!

[vscopise]

Hi @mmczaplinski !

I have a question that I would like to share:

To handle variable products I have a “variations” field:
https://wp.laotramirada.com.uy/wp-json/wp/v2/product/516

and I also have an endpoint to get each variation:
https://wp.laotramirada.com.uy/wp-json/wp/v2/product/516/variation/529

I would need to create a form to choose the desired variation and thus obtain its price, its description, its image, etc.

[mmczaplinski]

Hi @vscopise !

I’m sorry but what is your question exactly?

[vscopise]

Hi @mmczaplinski !

In this example you have a Typical variable product, with 2 variations: size and colour.

In the product endpoint the diferents variation id’s could be obtain and there’s another endpoint to obtain the variation itself.

I would like to build a form that allows choosing between the different variations, as you can see in the Woocommerce Storefront theme.

Thanks !!

[mmczaplinski]

Hey @vscopise !

Do you have an example of the code that you are using to try to accomplish what you’ve described? Can you describe the approach(es) that you have tried?

Are there any errors that you are facing?