Skip to main content

Automatic DOM Binding

The Visual Component supports a DOM binding mechanism to bind host site controls (e.g. HTML elements such as buttons, selects, and radio/checkbox inputs) to properties and events on the Visual Component (e.g. updating the product with new colors, new materials, etc.).

To initialize the DOM binding, add the av-binding tag inside your av-product tag, and point its src attribute to the DOM binding JavaScript file:

<atlatl-visual id="atlatl-visual" client-id="a1a1a1a1-b2b2-c3c3-d4d4-e5e5e5e5e5e5" >
    <av-product id="my-product" namespace="my_namespace" name="my_product_name">
        <av-binding src="https://builds.dopple.io/atlatl-visual-component/releases/current/bindings/dom/index.js"></av-binding>
    </av-product>
</atlatl-visual>

Then, add the data-av-property and data-av-value attributes to any <button>, <select>/<option>, <input type="checkbox"> or <input type="radio"> elements to bind them to ATLATL Visual so that the product will be updated when those elements are clicked/changed.

Example <button> binding:​

<button data-av-property="product_color" data-av-value="red">
    Red
</button>

Example <input type="radio"> binding:​

<div data-av-property="product_color">
    <label>
        <input type="radio" name="product_color" data-av-value="red" checked="">
        Red
    </label>
    <label>
        <input type="radio" name="product_color" data-av-value="blue">
        Blue
    </label>
</div>
Note

The name attribute's value must match a data-av-property attribute value from a parent <div> element in order to trigger updates on the ATLATL Visual API product.

Example <input type="checkbox"> binding:​

<input type="checkbox" data-av-property="toggle_part_of_my_product" checked="">

Example <select> & <option> binding:​

<select data-av-property="product_color">
    <option data-av-value="red">Red</option>
    <option data-av-value="blue">Blue</option>
    <option data-av-value="yellow">Yellow</option>
    <option data-av-value="green">Green</option>
</select>