Product Selector


The product selector must be instantiated, before it can be used. To do this, the HTML tag om:editable must be assigned to the containing HTML element with the value "products" along with an om:id attribute.


Inside of the HTML element containing the om:editable="products", individual products can be referenced either inside of a for loop or by referencing their position in the products list. 


All of the same values can be called in the same way as when using basket.products (eg. image_url, url, title).


An example of referencing the product with its list position:

<div om:editable="products" om:id="1">
    <a href="{{products[0].url}}" target="_blank">
        <img src="{{products[0].image_url}}">
        <p>{{products[0].title}}"</p>
    </a>
</div>


An example of referencing the product with a for loop:

<div om:editable="products" om:id="2">
    {% for product in products %}
        <a href="{{product.url}}" target="_blank">
            <img src="{{product.image_url}}">
            <p>{{product.title}}"</p>
        </a>
    {% endfor %}
</div>


products[0] is an object containing data on the first product that has been selected when using the visual editor

products[1] is an object containing data on the second product that has been selected when using the visual editor

... and so on


Extra data

Users can edit and extend product data via the UI, by clicking the "Edit" button next to each selected product. On the "Extra data" field, they're able to insert a JSON object that will be injected into a extra_data key in the product definition. (ie, product[0].extra_data). 


Common use cases include configuring the product appearance, background colours, CTA content, etc, dynamically using these variables.