Builder content link
e.g. Builder.io: Drag and drop Visual CMS
Builder public api key
go to Builder.io: Drag and drop Visual CMS and copy your PUBLIC api key
What are you trying to accomplish
e.g. I want to integrate builder on a landing page
I have assigned a custom HTML attribute to a component, for example
data-custom. I want to reference this value in a click event bound to custom code. What is the best way to do this? Something like
state['data-custom'] would be my best guess
Code stack you are integrating Builder with
e.g. NextJS, react, Shopify
Thanks for reaching out to support. To understand correctly, you have one HTML element with the data attribute data-custom. So when you click this data-custom element you want to grab some value from this element and use it elsewhere on your page?
If this is the case, you should be able to set state on the click event are target the value using basic JS, something like this…
state.someName = document.querySelector('data-custom')
This would set someName in the state object, and then in the element that you want to use this information, you can do a data element binding and reference it using
We have a great tutorial in our documentation about how to use and reference the State object to perform actions that should help to solidify the understanding.
Hope this was able to clarify things a bit further, but if you have any further questions, please feel free to reach back out!
Thanks for the reply. I do understand how to use state and
document.querySelector(), however the example you provided would not work for me. Reason being: the element with
data-custom is dynamically repeated. There could be multiple of them on the page. I was mainly wondering if Builder had a simple way for components to self-reference their DOM equivalents without using
One method I could envision is by using the
builder-id attribute, like
querySelector(['builder-id="builder-09cb2528254c4582afc8c82967139a53"]). But then that begs the question: Is there a way for a component to reference its own
Anyway, all said, what I was trying to do was a workaround for a completely separate issue. I found that Shopify blocks which have had their
click binding removed by the user, will never be able to have a functioning
click event after that point.
I ultimately worked around this bug by adding a custom code block after the components with
data-custom, and manually assigned the click events via
querySelectorAll() in client side JS.
Thanks for reaching back!
As of now, no not really. That workaround you mentioned sounds like a good option! If there are multiple, .querySelectorAll() may do the trick depending on your exact use case, and then write some JS to extract whatever information that you need. Your best bet would be using JS to extract any info from DOM elements, and then setting state.