Shopify

Question

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

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

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

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

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

在列表中复制我的下拉列表 value/key + 根据变体数量添加文本（Quick/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));
});

下拉菜单的 copy/paste 仅此而已。在 variantSelected 上很容易做到，但这不是我想要的。

如有任何问题欢迎随时提问

干杯，

bkseen

Answer 1

在

上回答 Hymnz

That's tricky but I think I can help. How are you changing the span with the classes product__inventory-count product__form-message--success ? – HymnZ 10 hours ago Blockquote

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

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

Answer 2

默认情况下，

('#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 %} 或 liquid 文件中的类似循环中添加以下脚本。

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

上面的代码片段（可能需要改进）会将所有变体及其可用性加载到 JSON 对象中
现在您需要做的就是在 $('#product-select-{{ product.id }}-option-0') 发生变化时触发一个函数，该函数将清除 $('#mySizes') 中的所有 <li>，然后使用值存储在 variantsJSON 的 variant_option2 & variant_availability 已选择 variant_option1

P.S。随意格式化我的答案。我无法获得正确的格式。

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

Shopify - Change text of my selectorOption product dropdown variant

javascript

jquery

select

liquid