What is Reactivity?

Vinoshipper Injector components allow for certain settings to be defined as data-vs-* attributes in the HTML. When these HTML attributes are changed, they will propagate and update the component. The Injector will handle changing the component's display, including calling the Vinoshipper API when needed.

How you change these attributes is up to you and your style of programming.

What attributes are Reactive?

All optional and required Vinoshipper HTML attributes (data-vs-*) are reactive, even if the attribute isn't initially set in the HTML Element. See the Settings section of each Injector component for more information.

When should I use the Reactive HTML Attributes?

Reactive HTML Attributes should be used mainly for interactions by the user outside of the component in question.

As an example, you may have an interface element that switches between different custom Product Catalogs.

Example

Let's assume you have this Product Catalog set to a custom list with the ID of 1, which displays a custom list of Rosé and Pinot Noir. Note that we added an ID my-custom-products to refer to this instance. You can also use a unique class name or any other identifier you wish to use.

<div id="my-custom-products" class="vs-products" data-vs-list="1"></div>

Then through a button or other instance, this JavaScript is called to change the list ID to 2:

let targetProductList = window.document.querySelectorAll('#my-custom-products');
targetProductList.forEach((item) => {
  item.setAttribute('data-vs-list', '2');
})

The Product Catalog now displays the Mead & Zinfandel custom catalog:

As you can see, Reactive HTML Attributes are very powerful as they allow inline changes to your Vinoshipper Injector components after your page load.