Shopify Buybutton JS 显示集合中的最低变体价格

Question

在过去的 2 天里，我一直在努力使用 shopify 购买按钮，我的网上商店有 3 或 4 种不同变体的产品，这些产品具有不同的定价选项，用于大批量（所以变体看起来有点像： 1盒，每盒50美元 5盒，每盒30美元 10盒，每盒20美元

在我的 shopify 商店中，我删除了数量选择，当他们选择 10 个盒子时，我会自动在客户的购物车中添加 10 倍该变体，这样它就可以很好地显示在目录中（盒子 X 起价 20 美元）。

现在我想在另一个网站上添加一个购买按钮频道，并创建嵌入代码来显示不同产品的集合。 问题是，它总是会显示第一个变体的价格（在上面的例子中是最高的 50 美元）

有没有办法渲染集合以显示最便宜的变体价格？

到目前为止我所拥有的：

<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>

在您看到的 DomEvents 中，每当用户从集合中的产品中选择不同的选项时，我都会尝试将数量更新为 6。这似乎可行，但我只更改第一个产品的数量，如果您碰巧知道我如何更新更改后产品的数量，请随时加入并告诉我..

Answer 1

最简单的方法是在 shopify 后端重新排序变体。

要在选择选项时更新数量，您可以在产品对象中使用 userEvent "updateVariant" 只要选择另一个选项即可调用。

在我的例子中，变量的前 2 个字符是产品的数量。

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()));
}