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

Posted 2023-02-15

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

【英文标题】：Shopify DAWN Theme - Add custom fields in Cart page and Show results in Orders Admin panel

【发布时间】：2022-01-13 01:17:45

【问题描述】：

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

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

【参考方案1】：

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

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

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

使用 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>

另一个非常重要的部分是命名括号内的部分是它在管理方面的显示方式以及您应该如何搜索订单上的信息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" />

【讨论】：

嗨@chefjuanpi，您的建议有效。我已将它添加到我创建和测试的每个字段中。数据现在显示在管理面板的我的订单页面中。感谢您的帮助！

【参考方案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>