(Shopify) Как обновить сообщение об инвентаре при изменении варианта, используя текущую тему JSON + AJAX setup

Question

Справочная информация:
В настоящее время я помогаю компании перевести свой текущий веб-сайт на Shopify и пытаюсь добавить пользовательскую функцию на страницу продукта. Я веб-дизайнер, а не разработчик, поэтому у меня возникли проблемы с реализацией этого.

Вот моя ситуация:
На данный момент наша тема позволяет нам отображать "В «на складе и готово к отправке» или сообщение «Нет в наличии» на странице нашего продукта, если значение variant.inventory_quantity больше 0 или равно 0 соответственно. В моем случае я добавил еще один параметр, который будет отображать сообщение, если верно следующее:

section.settings.show_special_order_option and selected_variant.inventory_management and selected_variant.inventory_policy == 'continue' and selected_variant.inventory_quantity == 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 -%}

А это мой JSON Сценарий:

<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>

А наконец, это фрагмент кода JS, который выполняется при изменении варианта:

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;
  }

Как работает функция:
На данный момент, когда щелкнув по продукту, который доступен и имеет запас больше 0, сообщение «В наличии и готово к отправке» отображается зеленым (класс «инвентарь - высокий» - это то, что делает его зеленым). При нажатии на другой вариант, которого нет в наличии, но установлен вариант «Продолжить продажу, когда нет в наличии», сообщение остается прежним, но цвет меняется на оранжевый (класс «инвентарь - специальный заказ» делает его оранжевым) ,

В чем проблема:
Я сузил эту проблему до функции жидкости и / или JSON сценария. При просмотре исходного кода страницы я смотрю на вычисленный сценарий JSON, и он отображает одно и то же сообщение для всех вариантов, когда он должен отображать уникальные сообщения в зависимости от изложенных условий. (Другими словами, у каждого варианта в сценарии JSON есть одно и то же сообщение об инвентаре «В наличии и готово к отправке» или «Специальный заказ: этот продукт займет 7-10 дней», даже если в наличии имеется несколько вариантов и несколько, которых нет в наличии, но которые могут продолжить продажу).

Мой вопрос:
Предполагая, что я предоставил всю необходимую информацию, мне нужны некоторые рекомендации, чтобы исправить мои функция для отображения правильного инвентарного сообщения для каждого варианта, когда пользователь выбирает различные варианты. Может ли кто-нибудь помочь мне решить эту проблему? Пожалуйста, дайте мне знать, если вам нужна дополнительная информация от меня.