(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){
如果(变量)错误数量