你能帮我弄清楚如何显示特定变体的通知吗?如果客户选择";IPhone 14〃;显示通知";这是预购;并且如果客户改变为"0",则隐藏该消息;IPhone 13";。
{% if selected variant.name contains '14' %}
{p} Thats a Pre-order {/p}
{% endif %}
主要问题是,URL不会通过选择变体来更改。否则,我可以简单地检查URL。但在我的情况下,URL总是一样的。。
您对液体的工作原理有误解。
加载DOM之前执行的液体结束。(也就是说,当你看到页面液体完成时,之后不会处理任何代码(。
您所描述的是与DOM元素(选择或单选按钮(交互,并期望liquid在变体更改后执行一些代码,这是不可能的。
长话短说,你需要使用Javascript来处理这个逻辑,而不是液体。
您可以使用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>
您可以使用Shopify元字段来完成此操作。将元文件数据添加到变体例如:产品-iPhone-变体-iPhone 14,iPhone 13,iPhone SE
变量元域-命名空间&key:pro.preorder Value-预购
在javascript中更改变体,如果元字段不为空,则可以添加一个条件,然后显示如下:
{{variant.metafields.pro.preorder}}
输出将是您为该元字段编写的值:预购