3

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

在此处输入图像描述

4

3 回答 3

4

我建议在 Shopify wiki 上查看此讨论：在产品页面上混合下拉和单选按钮

卡罗琳发布了这个答案：

这很困难，因为您需要使用 option_selection.js 将变体“解扰”为选项，并且 option_selection.js 会生成下拉菜单，每个选项一个。就个人而言，我会保留这一点。

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

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

该色板教程的最新版本可在此处的 Shopify Wiki 上找到，我之前已经成功使用过它（尽管只有默认代码，而不是单选按钮）。

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

编辑：

在下面的评论中：

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

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

我的变种是：

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

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

Shopify 变体作为单选按钮

我在这个讨论中使用了来自 Caroline Schnapp 的代码来为变体创建单选按钮（和你做的一样）。我稍微修改了代码，在表单末尾之前的隐藏输入字段中添加了一个Line Item 属性：

<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 购物车

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

编辑2：

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

于 2013-09-30T02:53:23.930 回答
2

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

于 2013-09-30T15:25:01.303 回答
1

我们最近添加了在 Liquid 中获取变体选项和值的功能，因此您不必被迫使用 JS 渲染收音机或选择元素。在https://help.shopify.com/themes/liquid/objects/product#product-options_with_values查看更新的文档

于 2016-10-05T18:58:39.437 回答