Question

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

在我的shopify商店中，我删除了数量选择，当他们选择10个盒子时，我会自动在客户的购物车中添加10x该变种，这样它就可以很好地显示在目录中（方框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＆＃34; updateVariant＆＃34;在产品对象中只要选择了其他选项，就会调用它。

在我的情况下，变体的前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()));
}

Shopify Buybutton JS展示了最低的不同价格

1 个答案: