Question

我正在为一个客户在Shopify网站上工作。他们要求在其产品页面上使用自定义实时预览选项。此选项包括一个下拉菜单，允许您选择某种字体，然后在其下方选择一个文本字段以键入任何数字或字母，然后生成一个实时预览选项以查看所选字体中的数字或字母。我添加了自定义HTML，CSS和JS，以使其开始工作。一切似乎都运行良好，但是现在产品页面上的“添加到购物车”按钮显示为“不可用”。

此外，我注意到当我能够“添加到购物车”时，购物车不会显示任何选定的自定义预览选项。

https://house-numbers1.myshopify.com/collections/flat-cut-metal/products/flat-cut-metal-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%;
}

Shopify“添加到购物车”无法正常工作

0 个答案: