Shopify Variants

时间：2013-09-30 01:39:22

标签： shopify variants

想知道是否有任何方法可以为自定义无线电输入分配变体？我想设置不同价格的分层运费2天，3天和标准运费。我可以使用变体执行此操作，但下拉列表对我不起作用。我希望有日期信息和日期选择器，以便选择首选发货日期，并将所有日期信息显示在模式上，其余的交付选项。订单项属性不起作用，因为据我所知它们不会影响价格。所以我想知道，如果我为不同的运费创建不同的变种，我可以将它们引导到我自己的单选按钮吗？我附上了迄今为止我所拥有的截图。右边的3个单选按钮是我想要使用的，而不是内置的Shopify下拉菜单。 在此先感谢您的帮助。

enter image description here

3 个答案:

答案 0 :(得分：4)

我建议您在Shopify wiki上查看此讨论：Mixing dropdown and radio buttons on product page

Caroline发布了这个回答：

  

这很难，因为你需要使用option_selection.js   'descramble'变体到选项中，并生成option_selection.js   下拉菜单，每个选项一个。就个人而言，我会保留它。

     

您可以为您的颜色添加单选按钮 - 同时保留您的颜色   在页面上下拉并用CSS隐藏它 - 然后更新所选的   选中单选按钮时下拉列表中的选项。

     

在以下示例中，使用锚元素而不是无线电   按钮，但方法是相同的：   http://wiki.shopify.com/Color_swatches_made_easy_in_Shopify

该色样教程的最新版本是available on the Shopify Wiki here，之前我已成功使用它（虽然只使用默认代码，而不是单选按钮）。

如果这对您不起作用，我认为您正在寻找一个更复杂的事情来实现...请参阅以下关于在Shopify维基上找到的变体使用单选按钮的其他讨论：

修改

在下面的评论中：

  

...仍然不确定我是否可以使用javascript元素将按钮指定给自定义变体标题。

我有一个关于这个想法的游戏，我不确定这是不是你想要的，但它可能会给你一些关于从哪里开始的想法。

我的变种是：

  • 标准送货
  • 3天快递。额外15美元
  • 2天快递。额外25美元

我在 product.liquid 中的变体下方添加了一个范围，其中显示了估计的投放日期，以及一些更新估算的投放日期文本的jQuery，具体取决于在日期选择器。

Shopify variants as radio buttons

我在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);
});

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

Shopify cart with line item properties

不确定这是否正是您所追求的，但希望其中一些有用！

编辑2：

这是要点：https://gist.github.com/stephsharp/6865599

答案 1 :(得分：2)

另请注意，没有理由使用option_selector.js代码。 Shopify将所有产品信息（包括选项和变体）作为JSON提供。您可以自由构建所需的任何数据结构，分配您想要的任何事件，并根据需要进行客户端编码。不使用那段代码。这只是一个关于如何用Shopify做事的建议。它得到了广泛的使用，但它并不是最终的全部。

答案 2 :(得分：1)

我们最近添加了在Liquid中获取变体选项和值的功能，因此您不必强制使用JS渲染无线电或选择元素。查看https://help.shopify.com/themes/liquid/objects/product#product-options_with_values

上的更新文档
相关问题
最新问题