Shopify变体 [英] Shopify Variants
问题描述
想知道是否可以将变体分配给自定义无线电输入吗?我想为2天，3天和标准运输设置不同的费率分层运输.我可以使用变体来完成此操作，但下拉菜单对我不起作用.我想获取日期信息和日期选择器，以便选择首选的发货日期，并在所有交货方式中将其全部显示在模式中.订单项属性无效，因为据我所知它们不会影响价格.所以我想知道，如果我为不同的运费创建了不同的变体，是否可以将它们定向到我自己的单选按钮?我已经附上了到目前为止的截图.我想使用右侧的3个单选按钮，而不是内置的Shopify下拉菜单. 预先感谢您的帮助.
Wondering if there is any way to assign variants to custom radio inputs? I'd like to set up tiered shipping with different rates for 2 Day, 3 Day and Standard shipping. I can do this with variants but the drop down won't work for me.I'd like to have date information and a datepicker in order to choose preferred shipping dates and have it all appear on a modal with the rest of the delivery options. Line item properties won't work because as far as I know they cannot affect price. So I wondered, if I created different variants for the different shipping rates, could I direct them to my own radio buttons? I've attached a screenshot of what I've got so far. The 3 radio buttons on the right are what I'd like to use rather than the built in Shopify drop down. Thanks in advance for your help.
推荐答案
I would suggest checking out this discussion on the Shopify wiki: Mixing dropdown and radio buttons on product page
Caroline 发布了此答案:
这是一个困难的过程，因为您需要使用option_selection.js来 将变种"变种为选项，然后option_selection.js生成 下拉菜单，每个选项一个.就我个人而言，我会保留.
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.
您可以为颜色添加单选按钮，同时保留颜色 页面上的下拉菜单并使用CSS隐藏它-然后更新所选的 选中单选按钮时，下拉菜单中的选项.
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.
在下面的示例中，使用锚元素代替radio 按钮，但方法相同: http://wiki.shopify.com/Color_swatches_made_easy_in_Shopify
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
The lastest version of that color swatch tutorial is available on the Shopify Wiki here, and I've used it before with success (although only with the default code, not radio buttons).
如果这对您不起作用，我认为您正在考虑实施更复杂的事情...请参阅有关在Shopify Wiki上找到的将单选按钮用于变体的其他这些讨论:
If that doesn't work for you, I think you're looking at a much more complicated thing to implement... See these other discussions about using radio buttons for variants I found on the 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
在下面的评论中:
...仍然不确定是否可以使用javascript元素将按钮分配给自定义变体标题.
...still unsure if I can assign the buttons to custom variant titles using javascript elements.
我有一个想法，我不确定这是否正是您所追求的，但是它可能会给您一些从哪里开始的想法.
I had a play around with this idea, and I'm not sure if this is exactly what you are after, but it might give you some ideas on where to start.
我的变体是:
- 标准运输
- 3天特快专递.额外的$ 15
- 2天特快专递.额外的$ 25
我在 product.liquid 中的变体下方添加了一个跨度，其中显示了预计的交付日期，还有一些jQuery根据跨度中的所选交付日期来更新跨度中的预计的交付日期文本.日期选择器.
I added a span below the variants in product.liquid where I display the estimated delivery date, and some jQuery that updates the estimated delivery date text in the span depending on the shipping date selected in the datepicker.
我在此讨论来为变体创建单选按钮(与您所做的相同).我通过添加
I used the code from Caroline Schnapp in this discussion to create radio buttons for the variants (the same as you did). I modified the code slightly by adding a Line Item Property in a hidden input field just before the end of the form:
<input type="hidden" id="delivery-date" name="properties[DeliveryDate]" />
并在此jQuery函数的末尾添加了2行，以在单击单选按钮时更新隐藏的订单项属性:
And added 2 lines to the end of this jQuery function to update the hidden line item property when a radio button is clicked:
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);
});
然后，当用户单击购买"按钮以将商品添加到购物车时，它会显示变体和订单项属性，如下所示:
Then when the user clicks the Purchase button to add the item to their cart, it shows the variant and line item property something like this:
不确定这是否正是您所追求的，但是希望其中一些会有所帮助！
Not sure if that's exactly what you're after, but hopefully some of it is helpful!
要点如下: https://gist.github.com/stephsharp/6865599
这篇关于Shopify变体的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
