Use currently selected variant to calculate discount table values

UPDATE: If You have installed after 9/3/2024 or have upgraded to the Shopify Discounts installation method, follow the below instructions. Otherwise, skip below to Legacy App

In order to update the discount table values based on the price of the currently selected variant, you will need to add some code that triggers an update when the selected variant changes. Usually this can be found in a theme file called something like "theme.js" or "global.js", but it could be anywhere depending on your theme. You should ask your theme developer to locate where to place similar code to the example below.

Latest App Version

try {
    window.shopacado.productUpdateWithNewPrice(this.currentVariant.price);
} catch (e) {
    //console.log(e);
}

Below is the snippet from the global.js file within the Dawn theme where I added this custom code inside the renderProductInfo function.

Legacy App Version

In this example, the IF statement is just a safety check so that if our apps code is removed, your site will not break trying to reference undefined objects. The part that matters is that you set the value of window.appikon.product.variant_price and then call the function window.appikonDiscount.loadProductPageApi(). This will cause the discount table to update based on the price of the currently selected variant. In the theme that I tested this on (Dawn), I was able to use this.currentVariant.price from within an existing function, but that part can change depending on your theme, so you will need to reach out to your theme developer for exact details.

if (window.appikon && window.appikon.product && window.appikonDiscount && window.appikonDiscount.loadProductPageApi) {
    window.appikon.product.variant_price = this.currentVariant.price;
    window.appikonDiscount.loadProductPageApi();
}

Below is the snippet from the global.js file within the Dawn theme where I added this custom code inside the renderProductInfo function.