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