如何使用Shopify BuyButton.js为特定产品变体创建“立即购买”按钮

Question

我正在使用Shopify BuyButton.js在我的网站上创建一个购买按钮和购物车。

我有一个具有多种变体的产品。

我可以轻松创建带有以下内容的产品的购买按钮：

ui.createComponent('product', {
    id: [productid],
    node: document.getElementById('container'),
    options: {
        product: {
            layout: 'horizontal',
            contents: {
                img: false,
                title: false,
                options: true
            }
        },
        cart: {
            startOpen: false,
        }
    }
});

此产品有几个变种，可以通过下拉菜单进行选择，第一个变种是所选的。

我想要做的是创建一个“购买”按钮，但仅针对该产品的特定变体。没有下拉菜单，然后单击“添加到购物车”将添加选择了特定变体的产品。

我可以通过设置options: false来隐藏下拉菜单，但是所选的变体是第一个，我无法设置特定的变体。

Answer 1

在您的行下 id: [productid], 输入：

variantId: [variantid],

其中 variantid 是变体的 ID。当您在 Shopify 仪表板中单击以编辑变体时，可以在 URL 中找到它。