Shopify DAWN 主题 - 在购物车页面添加自定义字段并在订单管理面板中显示结果

Question

尝试了另一位开发人员在 Shopify 主题购物车页面中添加自定义字段的解决方案，方法是从此处生成字段 - https://ui-elements-generator.myshopify.com/pages/cart-attribute，并将它们放置在我的购物车模板的表单标签中。它适用于 Debut 主题，但是，当我尝试在 Dawn 中对其进行测试时，表格显示但数据从未出现在我的订单（管理面板）中。

是否有 2.0 主题的替代解决方案，特别是 Shopify Dawn 主题？

Answer 1

UI 生成器 mise form="cart" 这将创造奇迹。无论元素在屏幕上的哪个位置，它都会将元素添加到购物车表单。

为什么要用那个？好吧，请记住 2.0 的原则是灵活使用块、应用程序块、在屏幕上移动它、以不同方式组织等等。form="cart" 在购物车页面上提供这种灵活性

我在我写的应用程序上使用类似的东西在订单上添加 PO 编号。

使用 UI 生成器的结果应该是：

    <p class="cart-attribute__field">
      <label for="long-custom-text">Long Custom Text</label>
      <textarea 
        required 
        form="cart" 
        class="required"
        id="long-custom-text" 
        name="attributes[Long Custom Text]"
      >
        {{ cart.attributes["Long Custom Text"] }}
      </textarea>
    </p>

另一个非常重要的部分是命名 braquets 内的部分是它在管理员端的显示方式以及您应该如何搜索订单信息 name="attributes[Long Custom Text]"

您可以更改方括号内的内容 Long Custom Text 但名称的其余部分应该在那里。

<input type="text" name="attributes[other custom Atribute]" form="cart" />
<input type="email" name="attributes[custom email]" form="cart" />

Answer 2

@chefjuanpi 的解决方案有效。我已经尝试过了并且有效。这是我创建的示例字段。

  <p class="cart-attribute__field">
      <label for="business-name">Business Name</label>
      <input form="cart" id="business-name" type="text" name="attributes[Business Name]" value="{{ cart.attributes["Business Name"] }}">
  </p>
  <p class="cart-attribute__field">
      <label for="tagline">Tagline</label><small>(If applicable)</small>
      <input form="cart" id="tagline" type="text" name="attributes[Tagline]" value="{{ cart.attributes["Tagline"] }}">
  </p>
  <p class="cart-attribute__field">
      <label for="colors">Colors</label>
      <input form="cart" id="colors" type="text" name="attributes[Colors]" value="{{ cart.attributes["Colors"] }}">
  </p>
  <p class="cart-attribute__field">
      <label for="upload">Upload Logo</label>
      <input form="cart" id="upload" type="file" name="attributes[Upload]" class="product-form__input">
  </p>

Shopify DAWN 主题 - 在购物车页面添加自定义字段并在订单管理面板中显示结果

Shopify DAWN Theme - Add custom fields in Cart page and Show results in Orders Admin panel

shopify

shopify-template