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

Shopify - Change text of my selectorOption product dropdown variant

本文关键字：文本 我的 selectorOption Shopify-      更新时间：2024-02-25

我花了一整天的时间研究它，但不可能弄清楚，所以我需要一些帮助：）

我试着在我的产品页面上的"尺寸"下拉列表的每一行添加一些文本：

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

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

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

在列表值/键中复制我的下拉列表+添加文本（快速/2-3周），具体取决于变量数量var optionsSize=｛｝；

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

('#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. 现在，您只需要在$('#product-select-{{ product.id }}-option-0')发生更改时触发一个函数，该函数将清除$('#mySizes')中的所有<li>，然后使用variantsJSON的variant_option2&所选variant_option1的variant_availability

p.S.请随意格式化我的答案。不知怎么的，我无法获得正确的格式

在上回答赞美诗

这很棘手，但我想我能帮上忙。您是如何用类product__inventory-count product__form-message更改跨度的？–赞美诗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 %}

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

相关文章：