Shopify "Добавить в корзину" не работает должным образом

Question

Я работаю над сайтом Shopify для одного из моих клиентов. Они запросили пользовательский вариант предварительного просмотра на странице своего продукта. Этот параметр включает в себя раскрывающееся меню, в котором можно выбрать определенный шрифт, а под ним - текстовое поле для ввода любых цифр или букв, которое затем генерирует параметр предварительного просмотра для просмотра цифр или букв выбранного шрифта. Я добавил пользовательский HTML, CSS и JS, чтобы начать работать. Кажется, все работает хорошо, но теперь кнопка «Добавить в корзину» на странице продукта показывает «Недоступно».

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

https://house -numbers1.myshopify.com / коллекции / плоский вырезать металл / продукты / плоский вырезать металл-17

var TextInput = document.getElementById('Line1');
var Fonts = document.getElementById('product-select-option-0');
var Preview = document.getElementById('Preview');

TextInput.addEventListener('keyup', textChange, false);

function textChange() {
  Preview.textContent = TextInput.value;
}

Fonts.addEventListener('change', fontChange, false);

function fontChange() {
  var newClass = this.value.replace(/ *\([^)]*\) */g, "").replace(/\s/g, '_');
  Preview.className = newClass;
  console.log(newClass);
};

<select class="single-option-selector" data-option="option1" id="product-select-option-0">
  <option value="AR Julian">AR Julian</option>
  <option value="Times New Roman">Times New Roman</option>
  <option value="Impact">Impact</option>
  <option value="Arial">Arial</option>
  <option value="Helvetica">Helvetica</option>
  <option value="Courier">Courier</option>
  <option value="Verdana">Verdana</option>
    <option value="Pacifico">Pacifico</option>
</select>
<div>
  <p><strong>Live Preview:</strong></p>
  <p>
    <input required="" type="text" maxlength="100" placeholder="Type Here" id="Line1" name="properties[Line 1:]">
  </p>  
</div>
<div id="Preview">Text preview</div>
</br>
</br>
  {%- if section.settings.show_quantity_selector -%}
    <div class="form__control">
      <label class="form__label">{{ 'product.form.quantity' | t }}</label>
      <div class="quantity-selector" >
        <a href="#" data-action="decrease-product-quantity" title="{{ 'product.form.decrease_quantity' | t }}">{%- include 'icon' with 'minus' -%}</a>
        <span class="quantity-selector__current-quantity">1</span>
        <a href="#" data-action="increase-product-quantity" title="{{ 'product.form.increase_quantity' | t }}">{%- include 'icon' with 'plus' -%}</a>
      </div>
    </div>
  {%- endif -%}
  <input type="hidden" name="quantity" value="1">
  <div class="product__payment-container">
    {%- if product.selected_or_first_available_variant.available -%}
      <button type="submit" class="product__add-to-cart button button--primary">
        {%- if product.template_suffix == 'pre-order' -%}
          {{- 'product.form.pre_order' | t -}}
        {%- else -%}
          {{- 'product.form.add_to_cart' | t -}}
        {%- endif -%}
      </button>
    {%- else -%}
      <button type="submit" class="product__add-to-cart button button--secondary" disabled="disabled">{{ 'product.form.sold_out' | t }}</button>
    {%- endif -%}

    {%- if section.settings.show_payment_button -%}
      {{ form | payment_button }}
    {%- endif -%}
  </div>

.Brush_Script {
  font-family: Brush Script;
}

.Freehand {
  font-family: Freehand;
}

.Old_English {
  font-family: Old English;
}

.AR_Julian {
  font-family: AR Julian;
}

.Impact {
  font-family: Impact;
}

.Times_New_Roman {
  font-family: Times New Roman;
}

.Allura {
  font-family: Allura;
}
.Arial {
  font-family: Arial;
}
.OpenSans {
  font-family: Open Sans Light;
}
.Helvetica {
  font-family: Helvetica;
}
.Courier {
  font-family: Courier;
}
.Verdana {
  font-family: Verdana;
}
.Pacifico {
  font-family: 'Pacifico', cursive;
}


#Preview {
  margin: 20px 0;
}

#Preview {
  height: 10px;
  width: 300px;
  text-align: center;
  font-size: 175%;
}