Other platforms - How Can I Adapt the Widget to Artworks with Multiple Sizes (variants)

If the artworks you sell through your website come in different sizes, you need to add a specific code to the integration so that visitors can visualize your art in all sizes, with accurate proportions. This article describes how to configure the ArtPlacer widget JavaScript interface to enable this behavior. 

Introduction

For the ArtPlacer widget to display the variant selected by the visitor, we need to update that variant using JavaScript. When the visitor selects the variant, the method in the ArtPlacer class is called and the update is triggered. 

The ArtPlacer API

Note: This configuration works for dynamically integrated widgets only. This means that if the widget buttons are linked to artworks in your ArtPlacer catalog using their ID, this configuration won't work.

The ArtPlacer class is available when you install the ArtPlacer script on your page. 

ArtPlacer.changeAll

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

With this configuration, you can update all the ArtPlacer widgets in your page. 

Parameters

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

height (optional): A number representing the height of the artwork in inches. This lets 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 is displayed only for 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. This is displayed only for the Client Room Widget. Possible values are: $1000, Request a quote, Price upon request, etc.  You can also set a blank value to show no price.

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

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

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

With this configuration, you can update the artwork’s 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

ArtPlacer.changeArtworkURL(index, artwork_url)

With this configuration, you can update the artwork’s 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:

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

In the previsualization, you want the ArtPlacer widgets to display the size and price selected by the visitor.  

Now, 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);
});