FROM CACHE - en_header

Shop Pay Banner dynamically change installment price on variant change

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-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"]}">






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>






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 =
 document.querySelector('shop-payment-terms').setAttribute('variant-id', variantId) //trigger rerender






Replies 0 (0)