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

Question

我花了一整天的时间想弄清楚，所以我需要一些帮助:)

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

如果产品数量>0: Size +快速交付，否则: Size + 2-3周交付只想在点击之前向客户显示，所以我不希望它只出现在selectedVariant上。

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

复制每个变量的数量(我没有找到方法)

根据变量变量var optionsSizes ={}，在列表值/key+ add文本(Quick/2-3周)中复制我的下拉列表；

​

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上做这件事很容易，但这不是我想要的。

如果你有什么问题，请随便问。

干杯,

bkseen

Answer 1

('#product-select-5916642311-option-0')和$('#mySizes') --默认情况下，select元素不在主题中。Shopify或主题脚本根据通过Shopify获得的产品的JSON信息添加这两个元素。因此，没有直接的方法来获得想要的结果。

这里有一个技巧，可以实现你想要的。

1. 将所有变体及其所需的属性加载到JSON对象中。为此，在液体文件的顶部添加<script>variantsJSON = {}</script>。
2. 现在，按以下结构加载这些变体： variantsJSON = { "variant_option1" : { "variant_option2_1_title" : "variant_option2_1_quantity", "variant_option2_2_title" : "variant_option2_2_quantity", } .... }
3. 要获得上述结构，您需要在{% 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>

1. 上面的片段(可能需要细化)将将所有变体及其可用性加载到JSON对象中。
2. 现在，您所需要做的就是在更改variantsJSON's variant_option2时触发一个函数，该函数将清除$('#mySizes')中的所有<li>，然后使用所选variant_option1的variant_option1& variant_availability中存储的值填充它们。

请随意给我的答案打格式。我不知何故无法得到正确的格式。

Answer 2

回答希姆兹

这很棘手，但我想我能帮上忙。您是如何使用产品_库存-计数产品__表单-消息-成功？- 10小时前的HymnZ类更改广度的？

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 %}

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