产品价格 % 折扣不随所选变体而变化答案

【问题标题】：Product Price % OFF not changing with selected variant产品价格 % 折扣不随所选变体而变化
【发布时间】：2019-08-02 12:54:41
【问题描述】：

请帮我解决此代码。根据选择的变体，我有一些折扣要显示，点击 2 包和 3 包时它不会改变，因为我们有不同的折扣百分比。这是我的 shopify 产品网址 https://us.buywow.com/products/wow-apple-cider-shampoo-cocounut-oil-conditioner-set-500ml
回调函数写了，但我不明白为什么它没有改变

产品.液体

<!-- /templates/product.liquid -->
{% assign on_sale = false %}
{% if product.compare_at_price > product.price %}
{% assign on_sale = true %}
{% endif %}

.

.

.

.

{% comment %}
------ Product Price ------
{% endcomment %}
<div class="product_prices">
<span class="visually-hidden">{{ 'products.general.regular_price' | t }}</span>
<h4 id="ProductPrice" class="product-regular-price" itemprop="price" content="{{ current_variant.price | divided_by: 100.00 }}">
{{ current_variant.price | money }}
</h4>
<span class="old-price">{{ current_variant.compare_at_price | money }}</span>
{% if on_sale %}
<div class="save_money_block">
<span class="save_off">
{% if current_variant.compare_at_price > current_variant.price %}
{{ current_variant.compare_at_price | minus: current_variant.price | times: 100.0 |
divided_by: current_variant.compare_at_price | money_without_currency | times: 100
| replace: '.0', ''}}% OFF{% endif %}
</span>
</div>
{% endif %}
</div>

.

.

.

.

.

<script>
(function(s3d) {
if (!s3d) {
console.warn('"window.Shopify3d" does not exist. Please ensure you\'ve added the <script> to your theme');
return;
}
{% for variant in product.variants %}
s3d.mapMetafieldAssets('{{ variant.id }}', '{{ variant.metafields.shopify3d['assets'] }}');
{% endfor %}
})(window.Shopify3d);
</script>

<script>
var selectCallback = function(variant, selector) {
timber.productPage({
money_format: "{{ shop.money_format }}",
variant: variant,
selector: selector
});
};

</script>

选择 Pack Of 3 - 60% OFF 应该是结果。这不会发生自动刷新。

【问题讨论】：

标签： shopify shopify-template

【解决方案1】：

请记住，Liquid 在文档发送到客户端浏览器之前是在服务器端编译的，因此结果不是动态的，并且在选择变体时无法自动更新。

为了在选择更改时适当地更改百分比部分，您需要添加将在变体选择更改时运行的 JavaScript 代码。幸运的是，您已经有一个可以做到这一点的函数，在您的主题中它恰好被称为selectCallback，然后它调用一个名为timber.productPage 的函数来完成所有繁重的工作。

您需要使用更新百分比字段所需的 javascript 代码更新 selectCallback 或 timber.productPage。（在您的情况下，后者可能是更好的选择，因为这将使所有相关的价格显示更新代码保持在一起。）variant 参数将是当前选择的变体或 undefined 如果当前选项选择与产品中的任何变体都不匹配； selector 参数将包含很多常用信息，例如父产品对象。

希望这会有所帮助！

【讨论】：

我真的很感激这个答案，但我无法纠正这个问题。如果您有代码 sn-p 显示请发送给我，在 selectCallback 之后，我想我错过了一些东西，如果您看到我共享的实时链接，则产品价格在单击变体时会发生变化。 %OFF 公式中使用的对象是否正确？或 product.price & product.compare_at_price 我需要使用吗？另外，如果我在 url 上使用 3Pack 变体点击刷新按钮，它会变为 60%。我的意思是，公式运行良好。
你能找到'productPage'功能吗？（它可能在一个名为“app.js”、“theme.js”或类似名称的资产文件中；可能以 .js.liquid 而不仅仅是 .js 结尾）这将是我们需要添加您的储蓄的地方-使用当前最活跃的变体的百分比代码。如果你能找到我应该能够帮你添加你需要的东西:)

【解决方案2】：

在 selectCallback 函数中添加下一段代码：

<script>
var selectCallback = function(variant, selector) {
var $discount = $('#offpercent'),
    $productPrice = $('#productPrice'),
    $comparePrice = $('#comparePrice');

alert(Shopify.formatMoney(variant.price, Shopify.money_format));
alert(Shopify.formatMoney(variant.compare_at_price, Shopify.money_format));

var percDiff =  Math.round((variant.compare_at_price-variant.price)/variant.compare_at_price * 100);

alert(percDiff);

$discount.html(percDiff);
};
</script>

【讨论】：