0
私は過去2日間、shopify Buyボタンを使用するのに苦労していましたが、私のwebshopでは3種類または4種類の異なるバリエーションの製品に、以下のようなビット： 1箱、箱あたりの価格$ 50 5箱、箱あたりの価格$ 30 10箱、箱当たりの価格は、私のshopify店で$ 20Shopify Buybutton JSは、コレクションの最も低いバリアント価格を表示します
私は、数量の選択を削除し、彼らは10個のボックスを選択すると、I自動的そのバリエーションを顧客のカートに10倍追加すると、カタログにうまく表示されます（ボックスXは20ドルから）
今私は別のウェブサイトに購入ボタンチャネルを追加したいと思っていて、さまざまな製品のコレクションを表示するために埋め込みコードを作成しました。 問題は、最初のバリアント価格（上記の例では最高価格$ 50）が常に表示されることです。
最も安いバリアント価格を表示するようにコレクションをレンダリングする方法はありますか？私がこれまで持って何
：あなたは私が6に数量を更新しようと見DomEventsで
<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>
、ユーザーがコレクション内の製品と異なるオプションを選択するたびに。これはうまくいくようですが、最初の製品の数量を変更するだけです。変更された製品の量をどのように更新すればいいのか分かりましたら、私に教えてください。