Update % OFF & $ SAVED after User Loads Page For First Time

[dwindlhurst]

Good evening,

I am currently scratching my head (I like to figure things out myself usually but this has taken it’s toll), on how to update a message shown on a product page below the price of an item - dependent on what variant is selected through the wide bundles app.

The message appears like this:

“You save 10% ($10.00 USD)”

I am having problems with using Javascript and a

element to both pull data on change and also display new values.

Here is the Javascript, it’s currently on the product-template.liquid in Motion theme. (will move to theme.js eventually or no?)

And here is the code that’s displaying the above with the information in my example:

    {% if current_variant.compare_at_price > current_variant.price %}
        You save
            {% capture saved_percentage %}{{ current_variant.compare_at_price | minus: current_variant.price | times: 100.0 |divided_by: current_variant.compare_at_price | money_without_currency | times: 100 | remove: '.0'}}%{% endcapture %}
            {{ saved_percentage }}
        
        ({{ current_variant.compare_at_price | minus: current_variant.price|money_with_currency}})
    {% endif %}

Part of my thinks there may be too much code going on, but it’s currently functional right up until you change the selected ‘variant’ in the Wide Bundles app that is displayed on the product page.

Any help, recommendation or editing of the code is greatly appreciated as I have lost a few too many hairs on this puzzle.

Cheers.

[mics]

It sounds like you want to update the message that appears below the price on your product page based on the variant selected through the Wide Bundles app. The code you provided looks like it’s already doing some of the calculations to update the message based on the selected variant’s price and compare at price.

To make sure that the message updates when the variant is changed through the Wide Bundles app, you’ll need to modify the JavaScript code you provided to detect when the variant is changed through the app and update the message accordingly.

Assuming that the Wide Bundles app uses a standard Shopify variant selector to change the variant, you can modify the code you provided like this:

javascriptCopy code
// Detect when user changes variant through the Wide Bundles app $(document).on('change', '#product-select', function(){ // Get variant price var variantPrice = $(this).find(':selected').data('price'); // Calculate the difference between the variant price and the compare at price var youSave = variantPrice - '{{ current_variant.compare_at_price }}'; // Calculate the saved percentage var savedPercentage = (youSave / '{{ current_variant.compare_at_price }}') * 100; // Round to 2 decimal places var roundedPercentage = Math.round(savedPercentage * 100) / 100; // Update the DOM $('.yousave .save-percentage').text(roundedPercentage + '%'); $('.yousave .save-amount').text('(' + youSave.toFixed(2) + ')'); });

This code binds a change event handler to the document that listens for changes to the standard Shopify variant selector with the ID “product-select”. When the variant is changed through the app, the code updates the message based on the selected variant’s price and compare at price, and then updates the DOM to display the new message.

Make sure that you are using the correct ID for the variant selector in the Wide Bundles app. If it’s not “product-select”, you’ll need to modify the code accordingly.

I hope this helps! Let me know if you have any further questions.