(Shopify)如何使用当前主题JSON+更新关于变体更改的库存消息;AJAX设置
背景:(Shopify)如何使用当前主题JSON+更新关于变体更改的库存消息;AJAX设置,json,ajax,shopify,liquid,Json,Ajax,Shopify,Liquid,背景: 我目前正在帮助一家公司将其当前网站迁移到Shopify,并试图在产品页面中添加一个自定义功能。我是一名网页设计师,不是开发人员,所以我在实现这一点上遇到了困难 以下是我的情况: 此时,我们的主题允许我们在产品页面上显示“库存和准备发货”或“缺货”消息(如果变量)。库存数量分别大于0或等于0。在我的例子中,我添加了另一个选项,该选项将在以下情况为真时显示消息: section.settings.show_special_order_选项和所选_variant.inventory_管理和所选
我目前正在帮助一家公司将其当前网站迁移到Shopify,并试图在产品页面中添加一个自定义功能。我是一名网页设计师,不是开发人员,所以我在实现这一点上遇到了困难 以下是我的情况:
此时,我们的主题允许我们在产品页面上显示“库存和准备发货”或“缺货”消息(如果
变量)。库存数量分别大于0或等于0。在我的例子中,我添加了另一个选项,该选项将在以下情况为真时显示消息:
section.settings.show_special_order_选项和所选_variant.inventory_管理和所选_variant.inventory_策略==“continue”和所选_variant.inventory_数量==0
在本例中,section.settings.show_special_order_option
是我创建的一个复选框选项,选中该选项后[理想情况下]将显示消息。我希望此消息仅在满足上述条件时显示,并在不满足条件的情况下,在选择每个新变体时更新
现在,这是我在product-info.liquid部分的代码:
{%- if selected_variant.available -%}
{%- if selected_variant.inventory_management and selected_variant.inventory_policy == 'deny' and section.settings.low_inventory_threshold > 0 -%}
{%- if selected_variant.inventory_quantity <= section.settings.low_inventory_threshold -%}
<span class="product-form__inventory inventory inventory--low">{{ 'product.form.low_stock_with_quantity_count' | t: count: selected_variant.inventory_quantity }}</span>
{%- else -%}
<span class="product-form__inventory inventory inventory--high">{{ 'product.form.in_stock_with_quantity_count' | t: count: selected_variant.inventory_quantity }}</span>
{%- endif -%}
{%- elsif section.settings.show_special_order_option and selected_variant.inventory_management and selected_variant.inventory_policy == 'continue' -%}
{%- if selected_variant.inventory_quantity == 0 -%}
<span class="product-form__inventory inventory inventory--special-order">{{ 'product.form.no_stock_special_order' | t }}</span>
{%- else -%}
<span class="product-form__inventory inventory inventory--high">{{ 'product.form.in_stock' | t }}</span>
{%- endif -%}
{%- else -%}
<span class="product-form__inventory inventory inventory--high">{{ 'product.form.in_stock' | t }}</span>
{%- endif -%}
{%- else -%}
<span class="product-form__inventory inventory">{{ 'product.form.sold_out' | t }}</span>
{%- endif -%}
<script type="application/json" data-product-json>
{
"product": {{ product | json }},
"options_with_values": {{ product.options_with_values | json }},
"selected_variant_id": {{ selected_variant.id }}
{%- if section.settings.show_inventory_quantity -%}
,"inventories": {
{%- for variant in product.variants -%}
{%- if variant.available -%}
{%- if variant.inventory_management and variant.inventory_policy == 'deny' and section.settings.low_inventory_threshold > 0 -%}
{%- if variant.inventory_quantity <= section.settings.low_inventory_threshold -%}
{%- capture inventory_message -%}{{ 'product.form.low_stock_with_quantity_count' | t: count: variant.inventory_quantity }}{%- endcapture -%}
{%- else -%}
{%- capture inventory_message -%}{{ 'product.form.in_stock_with_quantity_count' | t: count: variant.inventory_quantity }}{%- endcapture -%}
{%- endif -%}
{%- elsif section.settings.show_special_order_option and selected_variant.inventory_management and selected_variant.inventory_policy == 'continue' -%}
{%- if selected_variant.inventory_quantity == 0 -%}
{%- capture inventory_message -%}{{ 'product.form.no_stock_special_order' | t }}{%- endcapture -%}
{%- else -%}
{%- capture inventory_message -%}{{ 'product.form.in_stock' | t }}{%- endcapture -%}
{%- endif -%}
{%- else -%}
{%- capture inventory_message -%}{{ 'product.form.in_stock' | t }}{%- endcapture -%}
{%- endif -%}
{%- else -%}
{%- capture inventory_message -%}{{ 'product.form.sold_out' | t }}{%- endcapture -%}
{%- endif -%}
"{{ variant.id }}": {
"inventory_management": {{ variant.inventory_management | json }},
"inventory_policy": {{ variant.inventory_policy | json }},
"inventory_quantity": {{ variant.inventory_quantity | json }},
"inventory_message": {{ inventory_message | json }}
}{% unless forloop.last %},{% endunless %}
{%- endfor -%}
}
{%- endif -%}
}
</script>
function _updateinven(newVariant) {
if (!this.options['showInventoryQuantity'] || !newVariant) {
return;
}
var productFormInventoryElement = this.element.querySelector('.product-form__inventory'),
variantInventoryManagement = this.variantsInventories[newVariant['id']]['inventory_management'],
variantInventoryPolicy = this.variantsInventories[newVariant['id']]['inventory_policy'],
variantInventoryQuantity = this.variantsInventories[newVariant['id']]['inventory_quantity'],
variantInventoryMessage = this.variantsInventories[newVariant['id']]['inventory_message'];
productFormInventoryElement.classList.remove('inventory--high');
productFormInventoryElement.classList.remove('inventory--low');
productFormInventoryElement.classList.remove('inventory--special-order');
if (newVariant['available']) {
if (null !== variantInventoryManagement && variantInventoryPolicy === 'deny' && this.options['lowInventoryThreshold'] > 0) {
if (variantInventoryQuantity <= this.options['lowInventoryThreshold']) {
productFormInventoryElement.classList.add('inventory--low');
} else {
productFormInventoryElement.classList.add('inventory--high');
}
} else if (variantInventoryQuantity === 0) {
productFormInventoryElement.classList.add('inventory--special-order');
} else {
productFormInventoryElement.classList.add('inventory--high');
}
}
// We also need to update the stock countdown if setup
var stockCountdown = this.element.querySelector('.inventory-bar');
if (stockCountdown) {
var stockCountdownProgress = Math.min(Math.max(variantInventoryQuantity / parseInt(stockCountdown.getAttribute('data-stock-countdown-max')) * 100.0, 0), 100);
stockCountdown.classList.toggle('inventory-bar--hidden', stockCountdownProgress === 0);
stockCountdown.firstElementChild.style.width = stockCountdownProgress + '%';
}
productFormInventoryElement.innerHTML = variantInventoryMessage;
}
{%-如果选择了\u variant.available-%}
{%-如果选择了\u variant.inventory\u管理和\u variant.inventory\u策略=='deny'和section.settings.low\u inventory\u阈值>0-%}
{%-如果选择了\u变量。库存\u数量0-%}
{%-if variant.inventory\u数量0){
如果(变量)错误数量