display installments and auto update when variant is selected

[MOBX]

is there a way to update the installment calculation when a variant with different price is selected??
im using dawn theme

the calculation is working just with the first variant price, but when selecting another variant, the calculation doesnt update 

<div id="installments-info">
  <!-- Initial installment information -->
  {% assign initialVariant = product.selected_or_first_available_variant %}
  {% assign initialVariantPrice = initialVariant.price %}
  {% assign initialInstallments = initialVariantPrice | divided_by: 12 %}
  12 meses de {{ initialInstallments | money }}
</div>

<script>
  // Function to update installment information based on selected variant
  function updateInstallmentsInfo(variant) {
    var variantPrice = variant.price;
    var installments = variantPrice / 12;
    
    var installmentsInfo = document.getElementById('installments-info');
    installmentsInfo.innerHTML = '12 meses de ' + (installments).toFixed(2);
  }
  
  // Listen for variant selection event
  document.addEventListener('variant:changed', function(event) {
    var selectedVariant = event.detail.variant;
    updateInstallmentsInfo(selectedVariant);
  });
</script>

 

[gr_trading]

Hi @MOBX 

You should call your function on variant change event.

Try putting your function in below event.

<script>

  document.addEventListener('variant:change', function (evt) {

    // Installment function 

  });

</script>

Hope this will work...

[MOBX]

nope, i have already added an event listener but it is still not working. I have another idea, maybe adding a unique id for every variant, so that i can fetch the specific variant price

[MOBX · Accepted solution]

so i have found a solution for this and works really good.

<style>
.installment-wrapper {
    background-color: #f2f2f2;
    border-radius: 10px;
    padding: 5px;
    margin-top: 0px;
    display: flex;
    flex-direction: column; /* Stack elements vertically */
    align-items: center;
    justify-content: center; /* Center both horizontally and vertically */
    text-align: center; /* Center-align text */
    
}

.installment-text {
    font-weight: normal;
    font-size: 16px;
    color: #F6AC2F;
    padding: 5px;
    text-align: center;
    flex: 1;
    margin-bottom: 0px;
}

.installment-price {
    font-size: 16px;
    font-weight: bold;
    color: #F6AC2F;
}

.entire-price {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 5px;
    margin-top: 20px;
    color: #F6AC2F;
    text-align: center; /* Center-align text */
    justify-content: center; /* Center both horizontally and vertically */
}

.price--large {
    display: none; /* Hide the original price */
}

.price-container {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    margin-top: 0px;
    margin-bottom: -25px;
}

.original-price {
    font-size: 14px;
    color: #888;
    text-decoration: line-through;
    font-weight: normal; /* Set normal weight */
    margin-top: 0px;
    margin-bottom: 0px;
}

.discounted-price {
    font-size: 20px;
    font-weight: bold;
    color: #F6AC2F;
    margin-right: 10px;
    margin-left: 10px;
    margin-top: 0px;
    margin-bottom: 10px;
    
}

.offer-tag {
    font-size: 14px;
    background-color: #F6AC2F;
    color: white;
    padding: 3px 8px;
    border-radius: 3px;
    margin-top: 20px;
    margin-bottom: 0px;
    width: 100%; /* Make the offer tag the same length as the installment wrapper */
    box-sizing: border-box; /* Include padding and border in width calculation */
    text-align: center; /* Center the content horizontally */
    
}
</style>


<div class="installment-wrapper">
    <div {{ block.shopify_attributes }}>
        {%- assign product_form_installment_id = 'product-form-installment-' | append: section.id -%}
        {%- form 'product', product, id: product_form_installment_id, class: 'installment caption-large' -%}
            <input type="hidden" name="id" value="{{ product.selected_or_first_available_variant.id }}">
            
            {%- capture installment_text -%}
                {% assign selected_variant_price = product.selected_or_first_available_variant.price %}
                {% assign installment_price = selected_variant_price | divided_by: 12 %}
                <span class="installment-text">Hasta 12 MSI de <span class="installment-price">{{ installment_price | money }}</span></span>

            {%- endcapture -%}
            
            <div class="price-container">
                {% if product.selected_or_first_available_variant.compare_at_price > product.selected_or_first_available_variant.price %}
                    <span class="offer-tag">OFERTA</span>
                    <p class="original-price">{{ product.selected_or_first_available_variant.compare_at_price | money }}</p>
                    <p class="discounted-price">{{ product.selected_or_first_available_variant.price | money }}</p>
                    
                {% else %}
                    <p class="discounted-price">{{ product.selected_or_first_available_variant.price | money }}</p>
                {% endif %}
            </div>
            
            <p>{{ installment_text }}</p>
            {{ form | payment_terms }}
        {%- endform -%}
    </div>
</div>



<script>
document.querySelector('.variant_picker').addEventListener('change', function(e) {
    console.log("Variant picker change event fired.");
    
    const variantId = e.target.value;
    console.log("Selected variant ID:", variantId);
    
    document.querySelector('shop-payment-terms').setAttribute('variant-id', variantId);
    
    // Calculate and update installment text
    const selectedVariant = product.variants.find(variant => variant.id == variantId);
    console.log("Selected variant:", selectedVariant);
    
    const installmentPrice = selectedVariant.price / 12;
    console.log("Installment price:", installmentPrice);
    
    const installmentText = `Hasta 12 meses de ${installmentPrice.toFixed(2)}`;
    console.log("Updated installment text:", installmentText);
    
    document.querySelector('.installment p').textContent = installmentText;
    document.querySelector('.entire-price').textContent = selectedVariant.price | money;
});
</script>

obviously you can change the styling to fit yours, and it works for the dawn theme
this is configured for a 12 month installment, but you can easily change that to fit your desired amount.