当前位置：文江博客话题详情

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

发布于 2025-01-26 10:08:41 字数 135 浏览 2 评论 0原文

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

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

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

无妨# 2025-02-02 10:08:41

您无法将应用程序块添加到主题的原因可能是因为主题开发人员一开始就无法实现此类行为。您需要对源代码进行一些更改，以启用应用程序块。

解决方案：

在我的情况下，我使用的主题不允许我添加应用程序块。
我不能添加一个部分以包括应用程序块
如果适用于您，这是我解决这个问题的方法。

转到您的Shopify管理员，单击主题以编辑代码。导航以查找要编辑的适当文件，您应该寻找“ account.liquid”或
“ main-account.liquid”。路径应该看起来像这样：模板＆gt;客户＆gt; account.liquid。（文件和目录的名称有时可能有所不同）。

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

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

。
将以下代码添加到您的帐户中。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",

与“ name”属性的值匹配（）。

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

"t:sections.account.name"

"t:sections.main-account.name"

您想知道什么是“ t：pection。。

（就是您将得到的：

一个模板部分，使您可以添加应用块

，这解决方案的目的是我的个人解释（不是专业的）：

Shopify主题可以在其在线主题编辑中“添加”部分。您在编辑器中添加的部分

{
  "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"
  ]
}

。添加了“ app”的“类型”

。得到验证（这就是为什么JSON中的“类型” attr必须匹配液体中的“名称” attr）。

The reason why you cannot add app block to your theme is probably because the theme developer does not enable such behavior at the beginning. You need to do some changes to the source code in order to enable app block.

Solution:

In my case, the theme that I used does not allow me to add the app block.
I cannot add a section to include an app block
If the same situation applies to you, here is how I solve this problem.

Go to your Shopify admin, click on the themes to edit the code. Navigate to find the proper file to edit, you should be looking for 'account.liquid' or
'main-account.liquid'. The path should look something like this: templates > customers > account.liquid. (the name of the files and directory sometimes may vary).

Next, create a 'account.json' file under the same customers directory, copy&paste the following code into account.json:

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

move the 'account.liquid' file into the "sections" directory.
Add the following code into your 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 %}

Note: You should be carefully checking if the value for "type" attribute in json file:

"type": "account",

matches with the value for "name" attribute ("t:sections.account.name") in liquid file

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

e.g., if I changed the

"t:sections.account.name"

"t:sections.main-account.name"

This will raise an error. (you prob wondering what is "t:sections. .main doing here, good question, I don't know).

Go back to your shopify admin refresh the page to see if you can add the app block right now. If you succeeded, this is what you will get:

a template section that enables you to add app block

That is the end for the solution. Here is my personal explanation (not professional):

Shopify theme allows you to 'add section' in their online theme editor. Deep down in the code level, what it does is actually creating a json file to record any sections that you added in the editor. After adding an app (in my case, I created a custom app called 'pocky-du-card'), your account.json file will be looking something like this:

{
  "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"
  ]
}

A new block of code with 'type' of 'app' is added.

The json file will trace back to an schema within a liquid file (that's the reason why you need to include a {%schema%} in your liquid file) under the 'section' folder to be validated ( that is why the 'type' attr in json has to match the 'name' attr in liquid).

回复收藏 0 原文

~没有更多了~