Shopify 变体

Question

想知道是否有任何方法可以将变体分配给自定义 radio 输入？我想为 2 天、3 天和标准运输设置不同费率的分级运输。我可以使用变体来做到这一点，但下拉菜单对我不起作用。我想要日期信息和日期选择器，以便选择首选发货日期，并将其全部显示在带有其余交付选项的模式中。订单项属性不起作用，因为据我所知它们不会影响价格。所以我想知道，如果我为不同的运费创建了不同的变体，我可以将它们定向到我自己的单选按钮吗？我附上了迄今为止所得到的屏幕截图。我想使用右侧的 3 个单选按钮，而不是内置的 Shopify 下拉菜单。预先感谢您的帮助。

Answer 1

我建议查看 Shopify wiki 上的此讨论:Mixing dropdown and radio buttons on product page

Caroline发布了这个答案:

That's a difficult one, because you need to use option_selection.js to 'descramble' variants into options, and option_selection.js generates drop-downs, one for each option. Personally, I would keep that.

You can add radio buttons for your colors — while keeping your Color drop-down on the page and hide it with CSS — then update the selected option in the drop-down when a radio button is checked.

In the following example, anchor elements are used instead of radio buttons, but the method is the same: http://wiki.shopify.com/Color_swatches_made_easy_in_Shopify

该色样教程的最新版本是 available on the Shopify Wiki here ，并且我之前已经成功使用过它(尽管仅使用默认代码，而不是单选按钮)。

如果这对您不起作用，我认为您正在考虑实现一个更复杂的事情...请参阅我在 Shopify wiki 上找到的有关使用单选按钮进行变体的其他讨论:

• Radio Buttons for product variations?
• Change to Radio Buttons
• Use radio button instead of drop down for Multi-Select
• product variants as radio buttons javascript

编辑:

在下面的评论中:

...still unsure if I can assign the buttons to custom variant titles using javascript elements.

我尝试过这个想法，我不确定这是否正是您所追求的，但它可能会给您一些从哪里开始的想法。

我的变体是:

• 标准运输
• 3 天 express 。额外 15 美元
• 2 天 express 。额外 25 美元

我在 product.liquid 的变体下方添加了一个跨度，其中显示预计交货日期，以及一些 jQuery，根据在跨度中选择的发货日期更新跨度中的预计交货日期文本。日期选择器。

我在 this discussion 中使用了 Caroline Schnapp 的代码为变体创建单选按钮(与您所做的相同)。我稍微修改了代码，添加了 Line Item Property在表单末尾之前的隐藏输入字段中:

<input type="hidden" id="delivery-date" name="properties[DeliveryDate]" /> 

并在此 jQuery 函数的末尾添加了 2 行，以便在单击单选按钮时更新隐藏行项目属性:

jQuery("input[type='radio']").click(function() {
  var variant_price = jQuery(this).attr("data-price");
  jQuery(".price-field span").html(variant_price);
  var variant_compare_at_price = jQuery(this).attr("data-compare-at-price") || '';
  jQuery(".price-field del").html(variant_compare_at_price);

  var delivery_date = jQuery("ul li input[type='radio']:checked").siblings("span").html();
  jQuery("#delivery-date").val(delivery_date);
});

然后，当用户单击“购买”按钮将商品添加到购物车时，它会显示变体和订单项属性，如下所示:

不确定这是否正是您所追求的，但希望其中一些对您有所帮助!

编辑2:

要点如下:https://gist.github.com/stephsharp/6865599