1. Home
  2. Docs
  3. Documentation
  4. Advanced Customization
  5. Detecting Variants

Detecting Variants

Chances are artworks or products in your store come in different variants, with different sizes and prices. In such cases, it is likely that your website allows visitors to choose from one of them to add them to the cart, go to checkout, or visualize them using the ArtPlacer Widgets.

For the latter, you will need to add specific code to your integration so that you can refresh the ArtPlacer Widgets in real time and let users visualize art in place accurately with the selected size.

In this brief tutorial, we will explain how to interact with the ArtPlacer Widget JavaScript Interface to accomplish this particular behavior.

Important: Web programming knowledge is required to carry out this customization. If you need help or would like to request a custom quote, please contact us.

Case Study

Let’s assume your website sells artworks in multiple sizes, and this is how your product page looks:

Every time the user selects a size by choosing one of the options in the dropdown menu, you will want the ArtPlacer Widgets to show the chosen size and price if the user decides to pre-visualize the artwork using ArtPlacer technology.

What To Do

In order to let the ArtPlacer Widgets display the information of the chosen variant, we need to update them using JavaScript. In the event of the dropdown change, or the radio button change, or whatever type of event that is triggered by your variant selector, you will need to call the method in the ArtPlacer class that will trigger the update.

The ArtPlacer API

The ArtPlacer class will be available to you as you install the ArtPlacer script in your page.

ArtPlacer.changeAll(height, size, price)

This method allows you to update all the ArtPlacer Widgets in your page.

Parameters

height (optional): A number representing the height of the artwork in inches. This will let the widget recalculate the size of the artwork in place. e.g: for a 12’H x 8’W artwork, the height will be 8.

size(optional): A text (string) representing the size of the artwork. This will be displayed only in the Client Room Widget. Possible values are: 12’x8’, Big, Size not informed, etc. You can also set a blank value to show no size at all.

price(optional): A text (string) representing the price of the artwork. It will be displayed only in the Client Room Widget, and possible values are: $1000, Request a quote, Price upon request, etc.  You can also set a blank value to show no price at all.

ArtPlacer.changeData(index, height, size, price)

This method allows you to update a specific widget in your page, but not all of them.

Parameters

index (required): The zero-based index of the widget you want to update. The index is correlative to the order in which the buttons have been added to your page. e.g: The first widget you added to your page will have an index of 0, and the second widget that was added will have an index of 1.

height (optional): Same as for changeAll.

size(optional): Same as for changeAll.

price(optional): Same as for changeAll.

Example

In this example we will solve the case presented in the Case Scenario section.

Let’s assume that the HTML for the analyzed variant selector is the following:

<h1 class=”product-title”>My Product</h1>
<h2 class=”active-price”>$1,000</h2>
<label>8 x 10 in</label><input type=”radio” name=”variant_selector” selected=”true” value=”8 x 10 in”/>
<label>16 x 20 in</label><input type=”radio” name=”variant_selector” value=”16 x 20 in”/>
<label>18 x 24 in</label><input type=”radio” name=”variant_selector” value=”18 x 24 in”/>

We will capture the input change event using Vanilla JavaScript, and we will trigger the call to our update method in the ArtPlacer API.

document.querySelector(‘input[name=variant_selector]’).addEventListener(change', function(){
	const size = this.value; // Get the size from the selected element
	const height = parseFloat(size.split(‘x’)[0]); // Extract the height from the size
	const price = document.querySelector(‘.active-price’).innerHTML // Get the price from the price HTML tag, assuming it has already changed

ArtPlacer.changeAll(height, size, price);
});

That’s it!

Conclusion

It should be quite easy to update the ArtPlacer Widgets using the ArtPlacer class interface.
Also, if you need help, or would like to request a quote for our developers to take care of this, get in touch.
Happy coding!

Was this article helpful to you? Yes No 1