Hi, Community. The code currently only displays the price of the first variant and doesn’t update dynamically when other variants are selected from the dropdown. Please help me with this. Thank you.
Here is the code:
{% assign ai_gen_id = block.id | replace: ‘_’, ‘’ | downcase %}
{% style %}
.ai-variant-price-display-{{ ai_gen_id }} {
padding: {{ block.settings.padding }}px 0; background-color: {{ block.settings.background_color }}; border-radius: {{ block.settings.border_radius }}px; text-align: center;}.ai-variant-price-display__price-container-{{ ai_gen_id }} {
display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap;}
.ai-variant-price-display__discounted-price-{{ ai_gen_id }} {
color: {{ block.settings.discounted_price_color }}; font-size: {{ block.settings.discounted_price_font_size }}px;}
.ai-variant-price-display__original-price-{{ ai_gen_id }} {
color: {{ block.settings.original_price_color }}; text-decoration: line-through; opacity: 0.7; font-size: {{ block.settings.original_price_font_size }}px;}
.ai-variant-price-display__sale-badge-{{ ai_gen_id }} {
background-color: {{ block.settings.sale_badge_color }}; color: {{ block.settings.sale_badge_text_color }}; padding:2px 6px; border-radius: 3px; font-size: {{ block.settings.sale_badge_font_size }}px; text-transform: uppercase;margin-left: 4px;}
@media screen and (max-width: 749px) {
.ai-variant-price-display__price-container-{{ ai_gen_id }} { gap: 8px; }}
{% endstyle %}
<variant-price-display-{{ ai_gen_id }}
class=“ai-variant-price-display-{{ ai_gen_id }}”
data-product-id=“{{ product.id }}”
{{ block.shopify_attributes }}
>
<span class="ai-variant-price-display__discounted-price-{{ ai_gen_id }}" data-discounted-price>{% if product.selected_or_first_available_variant.price %}
{% assign discounted_price = product.selected_or_first_available_variant.price | times: 0.85 %}
{{ discounted_price | money }}
{% else %}
{{ block.settings.price_unavailable_text }}
{% endif %}
</span> <span class="ai-variant-price-display__original-price-{{ ai_gen_id }}" data-original-price>{% if product.selected_or_first_available_variant.price %}
{{ product.selected_or_first_available_variant.price | money }}
{% else %}
{{ block.settings.price_unavailable_text }}
{% endif %}
</span> <span class="ai-variant-price-display__sale-badge-{{ ai_gen_id }}">{{ block.settings.sale_badge_text }}
</span></variant-price-display-{{ ai_gen_id }}>
{% schema %}
{
“name”: “Discounted Price Display”,
“tag”: null,
“settings”: [
{ "type": "header", "content": "Content" }, { "type": "text", "id": "price_unavailable_text", "label": "Price unavailable text", "default": "Price not available" }, { "type": "text", "id": "sale_badge_text", "label": "Sale badge text", "default": "Sale" }, { "type": "header", "content": "Typography" }, { "type": "range", "id": "discounted_price_font_size", "min": 10, "max": 60, "step": 1, "unit": "px", "label": "Discounted price font size", "default": 18 }, { "type": "range", "id": "original_price_font_size", "min": 10, "max": 60, "step": 1, "unit": "px", "label": "Original price font size", "default": 16 }, { "type": "range", "id": "sale_badge_font_size", "min": 8, "max": 20, "step": 1, "unit": "px", "label": "Sale badge font size", "default": 12 }, { "type": "header", "content": "Colors" }, { "type": "color", "id": "background_color", "label": "Background color", "default": "#ffffff" }, { "type": "color", "id": "discounted_price_color", "label": "Discounted price color", "default": "#ff4315" }, { "type": "color", "id": "original_price_color", "label": "Original price color", "default": "#666666" }, { "type": "color", "id": "sale_badge_color", "label": "Sale badge background color", "default": "#ff4315" }, { "type": "color", "id": "sale_badge_text_color", "label": "Sale badge text color", "default": "#ffffff" }, { "type": "header", "content": "Layout" }, { "type": "range", "id": "padding", "min": 0, "max": 60, "step": 4, "unit": "px", "label": "Padding", "default": 20 }, { "type": "range", "id": "border_radius", "min": 0, "max": 40, "step": 2, "unit": "px", "label": "Border radius", "default": 8 }],
“presets”: [
{ "name": "Discounted Price Display" }]
}
{% endschema %}
