ArtPlacer's Help Center

Please Note: This requires advanced development skills. If you don't have development knowledge or a developer working on your website, we also offer custom integrations performed by our development team.
Contact us to get a quote.

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.

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

Please Note: The methods below will only work with dynamically integrated widgets. That means that if the widget buttons are linked to artworks in your ArtPlacer catalog using their ID, this methods won't work.

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

ArtPlacer.changeAll(height, size, price, width, artwork_url)

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

Parameters

The parameters specified below are optional. In case you don't want to pass a specific parameter, you can use null.

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.

width (optional): A number representing the width of the artwork in inches. While only the height is taken into account to calculate the artwork scale, this will let the widget properly displayed the artwork size.

artwork_url (optional): The URL of the artwork image to be displayed on the widget. This is useful if you want the new variant to display a different image.

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

This method allows you to update the artwork attributes for a specific widget in your page, but not for 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.

width (optional): Same as for changeAll.

ArtPlacer.changeArtworkURL(index, artwork_url)

This method allows you to update the artwork image URL for a specific widget in your page, but not for all of them.

Parameters

index (required): Same as for changeData.

artwork_url (required): Same as for changeAll.

Example

In this example we will solve the case presented in the Case Study 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!