javascript - Shopify 使用 setCallBack 更改变体价格不起作用
问题描述
我正在尝试在选择变体时更新产品价格。到目前为止,我有以下内容;但只是不能让它工作。
我已将此脚本添加到 theme.liquid
{{ 'option_selection.js' | shopify_asset_url | script_tag }}
我在 product-template.liquid 中有价格
<div class="product-price"><span id="price-field">{{ product.price | money }}</span></div>
<select
v-model="form.id"
name="id" id="variant-id"
class="minimal mt-2 mb-2 {% if hide_default_title %}hidden{% endif %}">
{% for variant in product.variants %}
{% if variant.available %}
<option
{% if variant == current_variant %}selected="selected"{% endif %}
{% unless variant.available %}disabled="disabled"{% endunless %}
data-inventory-quantity="{{ variant.inventory_quantity }}"
data-price="{{ variant.price | money | strip_html }}"
value="{{ variant.id }}"
class="js-variant-radio">{{ variant.title }}
</option>
{% endif %}
{% endfor %}
</select>
以及这里的回调函数
<script>
// <![CDATA[
var selectCallback = function(variant, selector) {
if (variant) {
if (variant.available) {
// Selected a valid variant that is available.
$('#add').removeClass('disabled').removeAttr('disabled').val('Add to Cart').fadeTo(200,1);
} else {
// Variant is sold out.
$('#add').val('Sold Out').addClass('disabled').attr('disabled', 'disabled').fadeTo(200,0.5);
}
// Whether the variant is in stock or not, we can update the price and compare at price.
if ( variant.compare_at_price > variant.price ) {
$('#price-field').html('<span class="product-price on-sale">'+ Shopify.formatMoney(variant.price, "") +'</span>'+' <s class="product-compare-price">'+Shopify.formatMoney(variant.compare_at_price, "")+ '</s>');
} else {
$('#price-field').html('<span class="product-price">'+ Shopify.formatMoney(variant.price, "") + '</span>' );
}
} else {
// variant doesn't exist.
$('#add').val('Unavailable').addClass('disabled').attr('disabled', 'disabled').fadeTo(200,0.5);
}
}
// initialize multi selector for product
jQuery(function($) {
new Shopify.OptionSelectors("variant-id", { product: , onVariantSelected: selectCallback });
});
// ]]>
</script>
解决方案
查看代码,当您尝试初始化Shopify.OptionSelectors
new Shopify.OptionSelectors("variant-id", { product: , onVariantSelected: selectCallback });
尝试将产品对象添加到该行以查看是否可以解决问题。更新后的行应如下所示:
new Shopify.OptionSelectors("variant-id", { product: {{ product | json }}, onVariantSelected: selectCallback });
推荐阅读
- python - 如果 Django-admin 页面中的值为 null,则自引用外键将列出所有内容
- bash - 我如何获得 Joomla K2 Image 问题 HASH 的解决方案
- python - Having a 404 error on my second url using tornado. Why is this happening?
- php - PDO sql 请求出错((我知道错误在哪里,但不明白它想从我这里得到什么(
- xamarin - Xamarin Tap 事件不适用于 iOS 但适用于 Android
- python - AttributeError:“列表”对象没有属性“第一”
- python - 如何将熊猫数据框显示到 django 模板中?
- python - 如何使用 keras 在输入和目标中设计具有不同时间步长的 lstm
- javascript - 点击功能的jQuery加载只工作一次
- c++ - 函数 CGLGetCurrentContext 什么时候应该返回 NULL,什么时候不应该?