如何将应用程序块添加到 Shopify 客户帐户页面？

Question

我正在尝试向 Shopify 客户帐户页面添加一个应用程序块。

我可以将应用程序块添加到主页和产品详细信息页面，但无法将其添加到客户帐户页面。

在架构设置中，我添加了客户帐户模板选项 “模板”：[“产品”，“索引”，“客户/帐户”]

Answer 1

你的主题不能添加应用程序块的原因可能是因为主题开发者在开始时没有启用这种行为。您需要对源代码进行一些更改才能启用应用程序块。

解决方案：

1. 就我而言，我使用的主题不允许我添加应用程序块。

2. 如果同样的情况适用于你，这就是我解决这个问题的方法。

转到您的 Shopify 后台，单击主题以编辑代码。导航找到要编辑的正确文件，您应该寻找“account.liquid”或 '主账户.液体'。该路径应如下所示：templates > customers > account.liquid。 （文件和目录的名称有时可能会有所不同）。

3. 接下来，在同一客户目录下创建一个“account.json”文件，将以下代码复制并粘贴到 account.json 中：

     {
         "sections": {
            "main": {
              "type": "account",
              "settings": {
                "padding_top": 36,
                "padding_bottom": 36
              }
            }
          },
          "order": [
            "main"
          ]
        }

4. 将“account.liquid”文件移动到“sections”目录中。 将以下代码添加到您的 account.liquid:

{% schema %}
  {
    "name": "t:sections.account.name",
    "settings": [
      {
        "type": "header",
        "content": "t:sections.all.padding.section_padding_heading"
      }, {
        "type": "range",
        "id": "padding_top",
        "min": 0,
        "max": 100,
        "step": 4,
        "unit": "px",
        "label": "t:sections.all.padding.padding_top",
        "default": 36
      }, {
        "type": "range",
        "id": "padding_bottom",
        "min": 0,
        "max": 100,
        "step": 4,
        "unit": "px",
        "label": "t:sections.all.padding.padding_bottom",
        "default": 36
      }
    ]
  }
{% endschema %}

注意：您应该仔细检查 json 文件中“type”属性的值是否为：

"type": "account",

与 liquid 文件中“名称”属性（“t:sections.account.name”）的值匹配

"name": "t:sections.account.name",

例如，如果我改变了

"t:sections.account.name"

到

"t:sections.main-account.name"

这会引发错误。 （你可能想知道“t:sections..main 在这里做什么，好问题，我不知道）。

5. 返回您的 shopify 后台刷新页面，看看您是否可以立即添加应用程序块。如果你成功了，这就是你将得到的：

解决方案到此结束。以下是我个人的解释（非专业）：

Shopify 主题允许您在其在线主题编辑器中“添加部分”。在代码层面的深处，它所做的实际上是创建一个 json 文件来记录您在编辑器中添加的任何部分。添加应用程序后（在我的例子中，我创建了一个名为“pocky-du-card”的自定义应用程序），您的 account.json 文件将如下所示：

{
  "sections": {
    "main": {
      "type": "account",
      "settings": {
        "padding_top": 36,
        "padding_bottom": 36
      }
    },
    "1680234836ebfa6762": {
      "type": "apps",
      "blocks": {
        "1756c5a0-41fd-45c4-9f8f-1228909970ed": {
          "type": "shopify:\/\/apps\/pocky-du-card\/blocks\/card\/72688031-8cd1-4d7c-9f12-bf402f3cd04a",
          "settings": {
            "color": "#000000"
          }
        }
      },
      "block_order": [
        "1756c5a0-41fd-45c4-9f8f-1228909970ed"
      ],
      "settings": {
      }
    }
  },
  "order": [
    "main",
    "1680234836ebfa6762"
  ]
}

添加了“类型”为“应用程序”的新代码块。

json 文件将追溯到 liquid 文件中的模式（这就是为什么你需要在你的 liquid 文件中包含 {%schema%} 的原因）在要验证的“部分”文件夹下（这就是为什么 'type ' json 中的 attr 必须与 liquid 中的 'name' attr 匹配）。