Update Artplacer widget to update with Product Variant selections

I'm trying to update a widget from Artplacer that allows you to see art against a photograph from the customer.  The basic code injection (in the footer) to add the widget is below - however, it requires customization in order to update the size values when the customer selects a different product variant.  I have some coding experience but not with javascript and can read basic html but I was hoping someone can help me figure out how to update the code injection.  

Widget code:

<script src="https://widget.artplacer.com/js/script.js"></script>
<script type="application/javascript">
ArtPlacer.insert({
    gallery: "30905",
    default_style: "true",
    resizable: "false",
    frames: "true",
    rotate: "false",
    catalog: "visible",
    type: "1",
})

</script>

'Vanilla Javascript' from Artplacer to call the artplacer API and update sizes when different variants are selected:

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

It seems like I have to select the attributes from 'data-selected-variant' under the class 'product-variants preFade fadeIn' but I'm not sure how to do that.

Thanks for any help!

1 hour ago, MorganFitz said:

I'm trying to update a widget from Artplacer that allows you to see art against a photograph from the customer.  The basic code injection (in the footer) to add the widget is below - however, it requires customization in order to update the size values when the customer selects a different product variant.  I have some coding experience but not with javascript and can read basic html but I was hoping someone can help me figure out how to update the code injection.  

Widget code:

<script src="https://widget.artplacer.com/js/script.js"></script>
<script type="application/javascript">
ArtPlacer.insert({
    gallery: "30905",
    default_style: "true",
    resizable: "false",
    frames: "true",
    rotate: "false",
    catalog: "visible",
    type: "1",
})

</script>

'Vanilla Javascript' from Artplacer to call the artplacer API and update sizes when different variants are selected:

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

It seems like I have to select the attributes from 'data-selected-variant' under the class 'product-variants preFade fadeIn' but I'm not sure how to do that.

Thanks for any help!

 

Can you share your URL so I can take a look?

https://www.marxelitofineart.com/featuredfanfavorites-pFdXr/p/-rainbow-rousing

I can not see the variant field on your site

Can you check it again?