如何验证 Shopify 主题设置?

How to validate Shopify theme settings?

使用Shopify API您可以设置输入字段供用户调整主题,例如:

{
  "type": "number",
  "id": "products_per_page",
  "label": "Products per page",
  "default": 20
}

在页面主题管理面板侧边栏中显示一个复选框。但是,用户可以设置无效值,例如 -2.

在那种情况下,据我所知,我可以更改 liquid 文件以显示错误消息。

然而,问题是,当用户不会注意到错误时,其他用户就会看到它。

所以我的问题是:如何验证 Shopify 主题设置?

有没有办法在输入字段旁边的边栏中显示错误消息,或者只在 liquid 中向管理员显示错误消息?

很遗憾,不行:Shopify 不允许通过管理工具对主题设置进行自定义验证

如果您想对主题设置中的任何输入施加约束,则您只能使用可用数据类型的控件:

  • Range:适用于具有 min/max 的数字范围,但分辨率限于您指定的 step。 Shopify 在最小值和最大值之间也有大约 100 个步进点,因此如果您必须覆盖的范围足够大,这个选择将不会覆盖您

  • Select:最适合文本选项,如果选项超过 6-8 个,很快就会变得很麻烦。

  • Radio:也最适合文本选项,并且仅在只有少量选择的情况下使用。

如果这些有限的用例无法涵盖您的验证逻辑,那么很遗憾,您无法指定将在主题设置更新期间强制执行的自己的验证公式。

但是,有一种(有点笨拙的)方法可以仅在主题定制器中显示错误

使用 Shopify Community 中分享的这个技巧,您可以检查 content_for_header 的内容,以测试通过自定义程序预览查看主题时注入的脚本之一:

{% if content_for_header contains "Shopify.designMode" %}
  Customizer
{% else %}
  Live!
{% endif %}

这样您就可以编写一个代码片段来测试任何具有复杂验证逻辑的设置,并在设置未通过验证的情况下在主题定制器页面上显示一个很大的错误栏,同时不会警告任何实际购物者网站。

请注意,这将取决于您测试的注入代码是否存在 - 如果 Shopify 将来更新他们的代码注入,这个技巧将停止 working/would 需要更新以测试他们更新的内容定制程序代码注入到。