液体：显示特定产品变体的文字

Question

你能帮我弄清楚如何显示特定变体的通知吗？ 如果客户选择“iPhone 14”，则显示通知“这是预购”，如果客户更改为“iPhone 13”，则隐藏此消息。

{% if selected variant.name contains '14' %}
    {p} Thats a Pre-order {/p}
  {% endif %}

主要问题是，URL 不会因选择变体而改变。否则我可以简单地检查 URL。但在我的案例中，URL 总是相同的..

Answer 1

你对液体的工作原理有误解

Liquid 在加载 DOM 之前完成执行。 （也就是当您看到页面液体完成并且之后不会处理任何代码的那一刻）。

您所描述的是与 DOM 元素（选择或单选按钮）交互，并期望 liquid 在变量更改后执行一些代码，这是不可能的。

长话短说，你需要使用 Javascript 来处理这个逻辑，而不是 liquid。

Answer 2

您可以使用 js 显示某些选项的特定文本，然后将其与所有其他选项一起隐藏，如下所示：

$(document).on('change', '.js-variant-id-text', function() {
  let
    variant_id = this.value,
    variant_text = $('.single-product-text[data-variant="' + variant_id + '"]');
  variant_text.show()
  //get all single product text div's, if it isn't a variant text, hide it.
  $(".single-product-text").not(variant_text).hide()
})

.single-product-text {
  display: none
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="{{option_name}}" id="select-{{option_name}}" class="js-variant-id-text">
  <option class="js-variant-radio" value="placeholder" disabled selected>Select one</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>

<div class="single-product-text single-option-selector" data-variant="1" style="">Some text for option 1</div>
<div class="single-product-text single-option-selector" data-variant="2" style="">Some text for option 2</div>
<div class="single-product-text single-option-selector" data-variant="3" style="">Some text for option 3</div>

Answer 3

您可以使用 Shopify 元字段执行此操作。 将图元文件数据添加到变体 例如： 产品 - iPhone - 变体 - iPhone 14、iPhone 13、iPhone SE

Variant Metafield - namespace&key :pro.preorder Value - Preorder

在变体更改的 javascript 中，如果元字段不为空，则可以添加条件，然后显示：

{{variant.metafields.pro.preorder}}

输出将是您为该元字段编写的值：Preorder