液体：显示特定产品变体的文本答案

【问题标题】：Liquid: Show Text for specific Product Variant液体：显示特定产品变体的文本
【发布时间】：2022-09-27 14:34:32
【问题描述】：

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

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

主要问题是，URL 不会通过选择变体而改变。否则我可以简单地检查 URL。但在我的情况下，URL 总是相同的..

标签： shopify product liquid variant

【解决方案1】：

您对液体的工作原理有误解。

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

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

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

【讨论】：

嗨，谢谢你的解释。你认为你能帮我找出我需要的javascript吗？

【解决方案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>

【讨论】：