在 Shopify JSON 模板中添加自定义表单字段

Posted 2023-02-15

【中文标题】在 Shopify JSON 模板中添加自定义表单字段

【英文标题】：Adding a custom form field in a Shopify JSON Template

【发布时间】：2022-01-06 17:26:21

【问题描述】：

我有一个使用新 Dawn 模板的 Shopify 商店，其中包括 JSON 模板。我想添加一个文本区域，客户可以在其中写下他们想在他们的商品上雕刻的文字，这似乎是一个常见的用例。

我向我的产品页面添加了一个“自定义液体”元素，并插入了一个由 Shopify UI 元素生成器生成的表单字段。但是，我注意到该字段不在 <form> 元素内，因此它没有包含在订单中。

我查看了产品页面的来源，发现表单的 ID 类似于 product-form-template--14290791497780__main。我复制了该 ID 并将其设置为我的文本框上的表单属性，现在一切正常，但感觉很脆弱。

在 JSON 模板中，是什么生成了表单字段的 ID？有没有办法从液体模板中引用它而无需对 ID 进行硬编码？

编辑： 这是我的product.json template

重要的是这一点

        "728d07ea-3e35-4ab1-bed3-ac9d9f35875c": 
          "type": "custom_liquid",
          "settings": 
            "custom_liquid": "<p class=\"line-item-property__field\">\n  <label for=\"engraving\">Engraving<\/label>\n  <p>\n<textarea id=\"engraving\" name=\"properties[Engraving]\"\nform=\"product-form-template--14302685823028__main\"><\/textarea>\n<\/p><\/p>"
          
        ,
        "buy_buttons": 
          "type": "buy_buttons",
          "settings": 
            "show_dynamic_checkout": true
          
        ,

据我所知，“buy_buttons”块是为产品创建提交表单的原因。我的自定义液体块包括form=\"product-form-template--14302685823028__main\"，这是我在页面上查看源得到的表单的ID。我想用一些液体表达式替换它，比如 product_form.id 或其他什么，但我不知道如何从自定义液体块中引用 JSON 模板中的其他块。

【问题讨论】：

请发布源代码。

【参考方案1】：

好的，我想通了。实际模板位于sections/main-product.liquid 中。我在那里为我的自定义字段添加了一个部分，将我的新块添加到模板末尾的架构中，并将其添加到我的可定制产品页面的 json 中。