FROM CACHE - en_header

Shop Pay Banner dynamically change installment price on variant change

mcqua007
New Member
3 0 0

If you have a multiple variants with different prices and you want to update the shop pay banner to reflect the correct installment price hen you change a variant. You need to pass the newly selected variant id to the variant-id property( attribute) on the shop pay component.

 

For example, Shopify renders a native web component for the shop pay banner like so:

 

 

 

 

<shopify-payment-terms 
   variant-id="12340001" 
   shopify-meta="{"type": "product", "variants": [{ "id": 12340001, "price": "$45.99", "eligable": true, "available_loan_types": ["split_pay"]}, "id": 12340002, "price": "$32.00", "eligable": true, "available_loan_types": ["split_pay"]}], "min_price": "$20.00", "max_price": "$50.00", "number_of_payment_terms": 4, "available_loan_types": ["split_pay"]}">
</shopify-payment-terms>

 

 

 

 

 

As you can see its has the variant-id="12340001", if you change this property with javascript to the newly selected variant the component will internally re-render with the correct updated price.

 

So let's say you have a select statement with all the variants as options and the variant id as the option value that gets passed back when a new variant is selected. For example:

 

 

 

 

 

<select id="variant-list">
  <option value="12340001">24" 4k Monitor - $250.00</option>
  <option value="12340002">27" 4k Monitor - $280.00</option>
  <option value="12340003">32" 4k Monitor - $320.00</option>
</select>

 

 

 

 

 

You need to get the newly selected variant id to pass it to the shop pay component. We can use the on change event listener like so:

 

 

 

 

 

//using jQuery syntax or quantdom.js library
$('#variant-list').on('change', function(){
  const variantId = $(this).val()
  $('shopify-payment-terms').attr('variant-id', variantId) //this will trigger a rerender and update the banner
});

 

 

 

 

 

Using vanilla javascript syntax:

 

 

 

 

document.querySelector('#variant-list').addEventListener('change', function(e){
 const variantId = e.target.value
 document.querySelector('shop-payment-terms').setAttribute('variant-id', variantId) //trigger rerender
});

 

 

 

 

 

Replies 0 (0)