Кнопка «Добавить предзаказ», которая изменяется, если варианта нет в наличии

Question

Я пытаюсь настроить код в своей теме Shopify, чтобы в случае, если у продукта несколько вариантов размера, а у одного товара нет в наличии, кнопка изменит цвет на другой, а в тексте кнопки появится надпись «Предварительный заказ». а не Добавить в корзину. Это код, который у меня есть на данный момент, но я не могу заставить его работать:

Product-form.liquid

    <button type="submit" class="ProductForm__AddToCart Button {% if selected_variant.available and section.settings.show_payment_button == false %}Button--primary{% else %}Button--secondary{% endif %} Button--full" {% if selected_variant.available %}data-action="add-to-cart"{% else %}disabled="disabled"{% endif %}>
    {%- if selected_variant.available -%}
      <span>{% if product.template_suffix == 'pre-order' %}{{ 'product.form.pre_order' | t }}{% else %}{{ 'product.form.add_to_cart' | t }}{% endif %}</span>

      {%- if section.settings.show_price_in_button -%}
        <span class="Button__SeparatorDot"></span>
        <span data-money-convertible>{{ selected_variant.price | money_without_trailing_zeros }}</span>
      {%- endif -%}
    {%- else -%}
      {{- 'product.form.sold_out' | t -}}
    {%- endif -%}
  </button>

Тема. js

{
      key: '_updateAddToCartButton',
      value: function _updateAddToCartButton(newVariant) {
        var addToCartButton = this.element.querySelector('.ProductForm__AddToCart'),
            shopifyPaymentButton = this.element.querySelector('.shopify-payment-button'),
            newButton = document.createElement('button');

        newButton.setAttribute('type', 'submit');
        newButton.className = 'ProductForm__AddToCart Button Button--full';

        if (!newVariant) {
          newButton.setAttribute('disabled', 'disabled');
          newButton.removeAttribute('data-action');
          newButton.classList.add('Button--secondary');
          newButton.innerHTML = window.languages.productFormUnavailable;
        } else {
          if (newVariant['available']) {
            newButton.removeAttribute('disabled');
            newButton.classList.add(this.options['showPaymentButton'] ? 'Button--secondary' : 'Button--primary');
            newButton.setAttribute('data-action', 'add-to-cart');

            if (undefined === this.options['showPriceInButton'] || this.options['showPriceInButton']) {
              newButton.innerHTML = '\n            <span>' + window.languages.productFormAddToCart + '</span>\n            <span class="Button__SeparatorDot"></span>\n            <span data-money-convertible>' + __WEBPACK_IMPORTED_MODULE_4__helper_Currency__["default"].formatMoney(newVariant['price'], window.theme.moneyFormat) + '</span>\n          ';
            } else {
              newButton.innerHTML = '<span>' + window.languages.productFormAddToCart + '</span>';
            }
          } else {
            newButton.setAttribute('disabled', 'disabled');
            newButton.classList.add('Button--secondary');
            newButton.removeAttribute('data-action');
            newButton.innerHTML = window.languages.productFormSoldOut;
          }
        }

        if (this.options['showPaymentButton'] && shopifyPaymentButton) {
          if (!newVariant || !newVariant['available']) {
            shopifyPaymentButton.style.display = 'none';
          } else {
            shopifyPaymentButton.style.display = 'block';
          }
        }

        // We replace the HTML instead of editing as it prevents for the CSS transition to show up
          addToCartButton.parentNode.replaceChild(newButton, addToCartButton);
      }
    }