Shopify - 使用 jQuery 修改变体下拉名称

问题描述

我有一个 Shopify 商店，其中包含我购买的自定义主题。我的许多产品都有多个变体，当我使用选择框选择一个变体时，我只能看到变体的名称（即 20x20cm）。我想在变体名称旁边添加变体的价格（即 20x20 厘米 - 14.99 英镑），但是我在代码中找不到任何允许我这样做的地方。

我认为可以工作的一段代码如下，但修改它没有任何作用-

 <div class="variants-wrapper">
          <select id="product-select-{{ product.id }}" name="id" class="hide">
            {% for variant in product.variants %}
              {% if variant.available %}
              <option {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} value="{{ variant.id }}">{{ variant.title }} - {{variant.price}}</option>
              {% else %}
              <option disabled="disabled">{{ variant.title }} - {{'products.product.sold_out' | t }}</option>
              {% endif %}
            {% endfor %}
          </select>
        </div>

因此，我发现商店正在运行一个脚本，因此检查了 Chrome 中的元素并查看了事件侦听器，并注意到它正在运行一个名为 bc.script.js 的脚本

脚本部分如下所示：

 jQuery(document).on('change','.add-to-cart-sticky .sticky-select',function(){
      var optionSelect = $(this).find('option:selected');
      var price = optionSelect.data('price');
      $('.sticky-price').html('{{"products.product.price" | t }}: <span class="money">'+Shopify.formatMoney(price,'{{shop.money_format}}') + '</span>');
    });
    jQuery(document).on('change','.add-to-cart-sticky .sticky-select-option',function(){
      var selected_val = '';
      $('.add-to-cart-sticky .sticky-select-option').each(function(){
        selected_val += $(this).val().toLowerCase()+'/';
      })
      selected_val = selected_val.substring(0,selected_val.length-1);
      var optionSelect = $('.sticky-select option[data-check="'+selected_val+'"]'),v = optionSelect.val(),add_cart_btn = $('.add-to-cart-sticky .add-to-cart');

      if (typeof v == 'undefined') {
        add_cart_btn.attr('disabled','disabled');
      }
      else{
        add_cart_btn.removeAttr('disabled');
        optionSelect.prop('selected',true);
      }
      var price = optionSelect.data('price');
      if (price)
        $('.sticky-price').html('{{"products.product.price" | t }}: <span class="money">'+Shopify.formatMoney(price,'{{shop.money_format}}') + '</span>');
      else
        $('.sticky-price').html('<b>{{ "products.product.sold_out"| t}}</b>');

    });
  }

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）