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
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
<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”/>
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);
});