Custom Builder React component that needs Redux data

Technical Questions CMS
1

Question on custom builder components: what is the recommended way to pass in data from a Redux store to a custom Builder component? We have an “add to cart” button that needs to be fed in Shopify product data that normally would be provided by a custom React hook, which then stores that data in Redux.

Would building a custom component that feeds in that data from Redux be the way to go, or would it be better to build a custom data fetch in Builder to get that data, and then build in some utility methods to format it how we need it? I know Builder can make API calls.

Or is there another suggested way?

Thanks!

2 Likes
2

Hey @sage930, great Q! Like you mentioned, there are a few options here -

Smart components

So you absolutely can register a component that is pre connected to shared (e.g. redux) data and actions.

export function MyAddtoCart() {
  let data = myDataHook();

  return (
     <Button onClick={() => addToCart(data.currentProduct)}>
      {props.text}
     </Button>
   )
}

Builder.registerComponent(MyAddtoCart, { 
  name: 'Add to cart'
})

Passing down data and actions

You can also pass down data and actions to be used in the editor

export default MyBuilderProductPage() {
  let data = myDataHook();

  return <BuilderComponent 
    name="page" 
    data={{ 
      /* Allows calling this function from layers in the visual editor */
      addToCart: () => addToCart(data.product.id),
      /* Allows binding product data to the layers of the visual editor */
      product: data.product
    }} 
  />
)

Then you can bind that data directly in the visual editor and call your custom actions as well. E.g. from the data tab add a new click action and in that call state.addToCart()

action example

You can see more about calling the actions here and binding the data here and (more advanced) here - note though in your case you can skip the bits about connecting remote data and jump to binding the data, if your react component will pass the data down (the data schema show up in the UIs just the same - aka prefilling the dropdown menus with available data binding options).

If you use this method, you can create an “add to cart” button template that has the click action already attached to it so it’s easy to drop into page pre-configured

Requesting data through Builder

This guide in particular can show you how to fetch data dynamically, e.g. based on the url - e.g. for any /products/:product url use the :product url fragment to fetch different data per page (or query param, etc), and bind those in the UIs.

This likewise can be combined with the above example to pass down actions or data to the add to cart button or component too

Anyway, lots of options here, and best option can depend on your specific use case and desired tradeoffs (e.g. degree of flexibility and customizability you’d like in the UIs vs control in your codebase, etc)

Happy to go into more detail about anything here or more specific suggestions based on your use case as you’d like!

3 Likes