Looking for a theme that calculates dynamic price deltas (selected variant price - other variant price) and displays that in the variant picker.
← This is just a mock up, but I want our product page to look exactly like this. Note the +$XXX in the actual button copy.
My inspiration is the way Apple does their configurations:
They make it easy to think whats the cost breakdown as you are configuring a high ticket item..
I searched for themes that support this, but cant find anything.
I was considering getting my hands dirty to modify the Dawn 9.0 theme we are currently using. If I went with this approach I guess there will be two parts:
1). Calculate the price deltas. in the global.js, make a method called updatePriceDeltas() which returns an objects with variant names as keys and the difference between (the price of that variant) - (the price of the selected variant).
updatePriceDeltas() {
var productVariants = {{ product.variants | json }}; // Get the product variants from Liquid and convert to JS object
// Assuming the selectedVariantId is available
var selectedVariantPrice = productVariants.find(variant => variant.id === selectedVariantId).price;
var priceDifferences = {}; // Initialize empty object to store price differences
productVariants.forEach(variant => {
priceDifferences[variant.id] = variant.price - selectedVariantPrice;
});
console.log(priceDifferences); // Outputs the object with variant IDs as keys and price differences as values
return(priceDifferences);
}
2). Display the price deltas as as string in the radio button. In the product-variant-picker.liquid file, when looping throught the product variants, concatenate the variant name with the variant’s price delta.
{%- for option in product.options_with_values -%}
{%- endfor -%}
I’ve never done this before, but does anyone have any tips or examples I can follow?
