MorganFitz Posted February 1 Share Posted February 1 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! Link to comment
Beyondspace Posted February 1 Share Posted February 1 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? Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Lightbox Studio pluginIf you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you Link to comment
MorganFitz Posted February 1 Author Share Posted February 1 https://www.marxelitofineart.com/featuredfanfavorites-pFdXr/p/-rainbow-rousing Link to comment
Beyondspace Posted February 3 Share Posted February 3 I can not see the variant field on your site Can you check it again? Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Lightbox Studio pluginIf you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment