Shopify - 更改我的 selectorOption 产品下拉变体的文本答案

【问题标题】：Shopify - Change text of my selectorOption product dropdown variantShopify - 更改我的 selectorOption 产品下拉变体的文本
【发布时间】：2016-04-08 02:30:06
【问题描述】：

我整天都在研究它，但无法弄清楚，所以我需要一些帮助:)

我尝试在我的产品页面上“尺寸”下拉列表的每个变体行上添加一些文本：

如果产品数量> 0：尺寸+快速交货 else : 尺寸 + 2-3 周交货只是想在点击之前向客户显示，所以我不希望它只在 selectedVariant 上。

我试图通过我的 script.js 来改变它，我在想：

复制每个变体数量（我没找到方法）

将我的下拉列表复制到列表值/键中 + 添加文本（快速/2-3 周），具体取决于变体数量 var optionsSizes = {};

var optionsSizes = {};

$('#mySizes option').each(function(){
    optionsSizes[$(this).val()] = $(this).text() + variant.inventory_quantity;
});

//console.log(optionsSizes);    
    
var $el = $("#mySizes");
$el.empty(); // remove old options
$.each(optionsSizes, function(value,key) {
  $el.append($("<option></option>")
     .attr("value", value).text(key));
});

下拉菜单的复制/粘贴工作，仅此而已。在 variantSelected 上很容易做到，但这不是我想要的。

如果您有任何问题，请随时提问。

干杯，

看到

【问题讨论】：

variant.inventory_quantity 是来自液体还是有一个名为 variant 的 JSON 对象？
我认为 variant.inventory_quantity 来自液体
啊..你不能像这样结合JS和液体。提供该页面的链接，让我看看那里需要做什么。
感谢您帮助我。链接：loakeshoes.com.au/collections/all-product-available/products/… 例如，尺寸 10.5 可用而尺寸 7 不可用（单击它们查看差异），所以我想在每个变体前面显示一个文本（“快速交货 / 2-3 周交货") 取决于库存。如那里：loake.co.uk/shoe-care/belts/henry.html 如果您选择黑色，对于下拉尺寸，您有一些
这很棘手，但我想我可以提供帮助。您如何将 span 更改为 product__inventory-count product__form-message--success 类？

标签： javascript jquery select shopify liquid

【解决方案1】：

('#product-select-5916642311-option-0') 和 $('#mySizes') 这个select 元素默认不在您的主题中。 Shopify 或主题脚本会根据 Shopify 提供的产品 JSON 信息添加这两个元素。因此，没有直接的方法可以得到想要的结果。

这是可以实现您想要的技巧。

将所有变体及其所需属性加载到 JSON 对象中。为此，请在液体文件顶部添加 <script>variantsJSON = {}</script>。
现在以以下结构加载变体：

variantsJSON = { "variant_option1" : { "variant_option2_1_title" : "variant_option2_1_quantity", "variant_option2_2_title" : "variant_option2_2_quantity", } .... }
要获得上述结构，您需要在{% for variant in product.variants %} 内添加以下脚本或在您的液体文件中添加类似的循环。

<script> if (!variantsJSON['{{ variant.option1 }}']){ variantsJSON['{{ variant.option1 }}'] = {} } {% assign availability = 'QUICK DELIVERY' %} {% if variant.inventory_quantity == 0 %}{% assign availability = '2-3 WEEKS DELIVERY' %}{% endif %} if (!variantsJSON['{{ variant.option1 }}']['{{ variant.option2 }}']){ variantsJSON['{{ variant.option1 }}']['{{ variant.option2 }}'] = '{{ availability }}' } </script>

上述 sn-p（可能需要细化）会将所有变体及其可用性加载到 JSON 对象中

variant_option1

variant_option2

variant_availability

附注随意格式化我的答案。我不知何故无法获得正确的格式。

【讨论】：

他们删除了我的答案 -_- 烦人的规则，但无论如何，谢谢@HymnZ，因为你，我可以为所选项目创建我的 2 个对象到我的 Javascript 变体中（我不确定它会不会为快速商店工作，因为我停止了第一个产品的列表[只是为了选择产品]，但无论如何我稍后会修复它）:) 我已经创建了一个图像来显示我的结果和我的脚本。不幸的是，我不知道如何访问对象的子对象、获取值等。
我刚刚成功修改了下拉框文本，但我现在必须阅读我的 2 个列表以检查可用性并显示可变文本：“快速交付”或“2-3 周”。我从来没有如此接近，所以你的解决方案最终看起来是个好的 ^^ i.stack.imgur.com/UZEcS.jpg"> Script.js + Console
好的。我注意到我上面的代码有一个缺陷，我已经改变了它。要在“#mySizes option”循环中获得正确的结果，请执行以下操作：$(this).text($(this).val()+' '+variantsJSON[$('select[data-option="option1"]').val()][$(this).val()]+' delivery')
我无法实施您的“新解决方案”.. :*( 首先我必须在 {{ variant_option2 }} 之间添加 ' ' 否则会发生错误。之后，它返回给我每个选项 1 只有 1 个选项 2，所以我认为这不是好的选项。我认为第一个解决方案是好的，我只需要知道如何在我的控制台中访问子对象 {皮革黑色：对象，皮革测试：对象皮革黑色：对象变体可用性：数组[6] 0：“3”1：“4”
非常感谢 HymnZ，我找到了第一个解决方案！ :) 如果我有时间，我会在明天下午发布它，忙得不可开交。下周我将尝试您的其他解决方案！再次欢呼和感谢

【解决方案2】：

在

上回答 Hymnz

这很棘手，但我想我可以提供帮助。您如何使用 product__inventory-count product__form-message--success 类更改跨度？ – HymnZ 10 小时前块引用

if (variant) {
  {% if settings.product_show_shipping %}
    var myCount = variant['inventory_quantity'];
    var myPath = this.element.find('.product__inventory-count');
        if (myCount < 1){
            myPath.removeClass('product__form-message--success');
            myPath.addClass('product__form-message--error');
            myPath.text("2-3 weeks delivery");
        }else{
            //myPath.toggleClass('product__form-message--success').siblings().removeClass('checked');
            myPath.removeClass('product__form-message--error');
            myPath.addClass('product__form-message--success');
            myPath.text("Quick delivery");
        }
  {% endif %}

问题是，变体是选择的变体，而不是经过所有产品的变体。

【讨论】：