Shopify Buybutton JS show lowest variant price on collection - scripting

Question

I've been struggling to use the shopify Buy button for the past 2 days, My webshop has products with 3 or 4 different variants with different pricing options for larger quantities (so variants look a bit like:
1 box, price per box $50
5 boxes, price per box $30
10 boxes, price per box $20
In my shopify store I removed the quantity selection and when they select 10 boxes, I automatically add 10x that variant in the customer's cart, this way it displays nicely in the catalog (box X starting at $20).
Now I would like to add a buy button channel on another website, and created the embed code to show a collection of the different products.
The problem is, it will always show the first variants price (which is the highest price $50 in the above example)
Is there a way to render the collection to display the cheapest variant price?
What I have so far:
<div id='collection-component-5e11b1274c8'></div>
<script type="text/javascript">
/*<![CDATA[*/
(function () {
var scriptURL = 'https://sdks.shopifycdn.com/buy-button/latest/buy-button-storefront.min.js';
if (window.ShopifyBuy) {
if (window.ShopifyBuy.UI) {
ShopifyBuyInit();
} else {
loadScript();
}
} else {
loadScript();
}
function loadScript() {
var script = document.createElement('script');
script.async = true;
script.src = scriptURL;
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(script);
script.onload = ShopifyBuyInit;
}
function ShopifyBuyInit() {
var client = ShopifyBuy.buildClient({
domain: 'mydomain',
apiKey: 'mykey',
appId: '6',
});
ShopifyBuy.UI.onReady(client).then(function (ui) {
ui.createComponent('collection', {
id: 157236225,
node: document.getElementById('collection-component-5e11b1274c8'),
moneyFormat: '%E2%82%AC%7B%7Bamount%7D%7D',
events :{
afterRender : function(e){
console.log('after Render');
}},
options: {
"product": {
"variantId": "all",
"isButton": false,
"contents": {
"imgWithCarousel": false,
"variantTitle": false,
"description": false,
"buttonWithQuantity": false,
"quantity": false
},
templates : {
price: "{{ data.selectedVariant.price }}"
},
DOMEvents: {
'change .shopify-buy__option-select': function (event, target) {
var data = target;
var product = ui.components;
console.log(product);
console.log(product.product);
console.log(product.productSet);
console.log(product.model);
console.log(Object.getOwnPropertyNames(product));
product.updateQuantity(() => parseInt(6, 10));
}
},
"styles": {
"product": {
"text-align": "left",
"#media (min-width: 601px)": {
"max-width": "calc(33.33333% - 30px)",
"margin-left": "30px",
"margin-bottom": "50px"
}
},
"button": {
"font-family": "Open Sans, sans-serif",
"font-weight": "normal"
},
"variantTitle": {
"font-family": "Open Sans, sans-serif",
"font-weight": "normal"
},
"title": {
"font-family": "Open Sans, sans-serif",
"font-weight": "normal",
"font-size": "16px"
},
"description": {
"font-family": "Open Sans, sans-serif",
"font-weight": "normal"
},
"price": {
"font-family": "Open Sans, sans-serif",
"font-size": "16px",
"font-weight": "normal"
},
"compareAt": {
"font-family": "Open Sans, sans-serif",
"font-weight": "normal",
"font-size": "13.6px"
}
},
"googleFonts": [
"Open Sans",
"Open Sans",
"Open Sans",
"Open Sans",
"Open Sans",
"Open Sans"
]
},
"cart": {
"contents": {
"button": true
},
"text": {
"title": "Winkelmand",
"total": "subtotaal",
"notice": "",
"button": "Afrekenen"
},
"styles": {
"button": {
"font-family": "Open Sans, sans-serif",
"font-weight": "normal"
},
"footer": {
"background-color": "#ffffff"
}
},
"googleFonts": [
"Open Sans"
]
},
"modalProduct": {
"contents": {
"img": false,
"imgWithCarousel": true,
"variantTitle": false,
"buttonWithQuantity": true,
"button": false,
"quantity": false
},
"text": {
"button": "In winkelmand"
},
"styles": {
"product": {
"#media (min-width: 601px)": {
"max-width": "100%",
"margin-left": "0px",
"margin-bottom": "0px"
}
},
"button": {
"font-family": "Open Sans, sans-serif",
"font-weight": "normal"
},
"variantTitle": {
"font-family": "Open Sans, sans-serif",
"font-weight": "normal"
},
"title": {
"font-family": "Open Sans, sans-serif",
"font-weight": "normal",
"font-size": "30px"
},
"description": {
"font-family": "Open Sans, sans-serif",
"font-weight": "normal"
},
"price": {
"font-family": "Open Sans, sans-serif",
"font-weight": "normal"
},
"compareAt": {
"font-family": "Open Sans, sans-serif",
"font-weight": "normal"
}
},
"googleFonts": [
"Open Sans",
"Open Sans",
"Open Sans",
"Open Sans",
"Open Sans",
"Open Sans"
]
},
"toggle": {
"styles": {
"toggle": {
"font-family": "Open Sans, sans-serif",
"font-weight": "normal"
}
},
"googleFonts": [
"Open Sans"
]
},
"option": {
"styles": {
"label": {
"font-family": "Open Sans, sans-serif"
},
"select": {
"font-family": "Open Sans, sans-serif"
}
},
"googleFonts": [
"Open Sans",
"Open Sans"
]
},
"productSet": {
"styles": {
"products": {
"#media (min-width: 601px)": {
"margin-left": "-30px"
}
}
}
}
}
});
});
}
})();
/*]]>*/
</script>
In the DomEvents you see I try to update the quantity to 6, whenever a users selects a different option from a product in the collection. This seems to work, but I only change the quantity for the first product, if you happen to know how I can update the quantity of the changed product feel free to jump in and let me know..

Answer 1

The easiest way is to reorder the variants in the shopify backend.
To update the quantity when an option is selected you can use the userEvent "updateVariant" in the product object
Which is called whenever another option is selected.
In my case the first 2 chars of the variant are the amount of the product.
events: { "updateVariant" : function(e){
console.log('update variant');
console.log(e.model.selectedVariant.title.substr(0,2).trim());
e.updateQuantity(() => parseInt(e.model.selectedVariant.title.substr(0,2).trim()));
}