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? BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox) 🗓️ Delivery Date Picker (Squarespace Date format) 💫 Animated Buttons (Referral URL) 🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations) 🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates) If you find my answer useful, 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? BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox) 🗓️ Delivery Date Picker (Squarespace Date format) 💫 Animated Buttons (Referral URL) 🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations) 🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates) If you find my answer useful, 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