Dawn主题自定义个性化输入框无法同步至购物车问题求助

核心原因 #

Minimal是Shopify 1.0传统主题，产品页依赖原生表单提交逻辑，自定义properties输入框只要在<form>标签内就能被自动携带到购物车。而Dawn属于Online Store 2.0主题，采用Ajax异步加购，不会自动提交表单内所有字段，仅通过JS主动收集指定参数，你的自定义输入框未被纳入JS的收集范围，导致内容无法同步到购物车。

另外需排查基础问题：你添加的自定义Liquid代码是否放在了产品页的<form>标签外部，若是则无论主题版本都无法提交。

解决方法 #

1. 确保输入框在表单范围内 #

找到Dawn主题产品模板中的<form>标签（通常在main-product.liquid或product-form.liquid组件内），将你的自定义输入框代码插入到该标签内部，比如放在数量选择器下方、加购按钮上方的位置。

2. 适配Ajax加购的JS逻辑 #

Dawn的加购JS默认只识别主题预设的选项字段，需要让它能捕捉到你的自定义属性：

• 给输入框添加data-product-option属性，让JS自动识别：

  <label for="name-on-pottery">Name on Pottery (Max 12 characters)</label>
  <input id="name-on-pottery" type="text" name="properties[Name on pottery]" maxlength="12" style="width:auto !important;" data-product-option>
  

• 如果上述方法无效，可修改主题的product-form.js文件：在收集表单数据的函数中，主动获取该输入框的值，并添加到请求参数的properties对象里。

3. 确保购物车页面能渲染属性 #

在购物车模板（如main-cart-items.liquid）中，添加以下代码来显示自定义属性：

{% for property in item.properties %}
  {% if property.first == 'Name on pottery' %}
    <div class="cart-item-property">
      {{ property.first }}: {{ property.last }}
    </div>
  {% endif %}
{% endfor %}

内容的提问来源于stack exchange，提问作者Tom humphries