# Builder context example

**URL:** <https://forum.builder.io/t/builder-context-example/4570>\
**Category:** General\
**Created:** [November 29, 2023, 1:57pm UTC](https://forum.builder.io/t/builder-context-example/4570 "2023-11-29T13:57:39Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Dhruvesh](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/dhruvesh/32/4051_2.png) [@Dhruvesh](https://forum.builder.io/u/Dhruvesh)\
**Post date:** [November 29, 2023, 1:57pm UTC](https://forum.builder.io/t/builder-context-example/4570/1 "2023-11-29T13:57:39Z")

</div>

So I was going through the Builder’s Custom data & context ([Custom Data and Context - Builder.io](https://www.builder.io/c/docs/custom-actions))  
In that I have few questions and need explanation (detailed if possible)

```auto
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](http://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.

---

<div class="post-metadata">

**Author:** ![manish-sharma](https://avatars.discourse-cdn.com/v4/letter/m/8797f3/32.png) [@manish-sharma](https://forum.builder.io/u/manish-sharma)\
**Post date:** [December 1, 2023, 5:05pm UTC](https://forum.builder.io/t/builder-context-example/4570/2 "2023-12-01T17:05:49Z")

</div>

Hello @Dhruvesh,

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

> <https://github.com/BuilderIO/nextjs-shopify/blob/master/pages/%5B%5B...path%5D%5D.tsx>

---

<div class="post-metadata">

**Author:** ![Dhruvesh](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/dhruvesh/32/4051_2.png) [@Dhruvesh](https://forum.builder.io/u/Dhruvesh)\
**Post date:** [December 2, 2023, 10:49am UTC](https://forum.builder.io/t/builder-context-example/4570/3 "2023-12-02T10:49:17Z")

</div>

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](http://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!

---

<div class="post-metadata">

**Author:** ![manish-sharma](https://avatars.discourse-cdn.com/v4/letter/m/8797f3/32.png) [@manish-sharma](https://forum.builder.io/u/manish-sharma)\
**Post date:** [December 4, 2023, 12:23pm UTC](https://forum.builder.io/t/builder-context-example/4570/4 "2023-12-04T12:23:08Z")

</div>

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.

> **[Custom Code in the Visual Editor - Builder.io](https://www.builder.io/c/docs/guides/custom-code)**
>
> Add custom JavaScript and CSS to your Builder content. Learn how to access browser events, state properties, and add custom CSS to your pages.

> **[Building Interactivity Using State and Actions - Builder.io](https://www.builder.io/c/docs/guides/state-and-actions)**
>
> Making interactive content in Builder.io with state and actions. Watch the 5-minute video walkthrough and get started.