Builder context example

General
1

So I was going through the Builder’s Custom data & context (Custom Data and Context - Builder.io)
In that I have few questions and need explanation (detailed if possible)

addToCart: () => myService.addToCart(currentProduct),

I understand we can expose a function as part of context and hence we can trigger this addToCart event from builder.io UI console.
But how do I pass this currentProduct? where do I get this currentProduct info from?

Consider, I have a product list page - which has list of all product and each product has “Add To Cart” button.

2

Hello @Dhruvesh,

For assistance, you can refer to our GitHub example for NextJS Shopify at:

3

Hi @manish-sharma ,
Thank you for your quick response.
I went through the code, so I understand we can get any data in the exposed method from the builder.io Visual Editor.

So,
Consider I have a “Add To Cart” button on the page and I bind it with the event - On Click call context.addToCart(selectedProductObject)

Can you suggest what should be the code in builder visual editor? and how to create the selectedProductObject ?

I suppose we can use the event reference that is created after the Click Event.

Thanks!

4

Hello @Dhruvesh,

Yes, you can use data binding and event binding to bind product reference. Then using click event, pass the object reference to the context addToCart function. You can refer to the below linked articles for reference.