区块缺少 shopify_attributes 后编辑器点不中
现象#
在预览区点击某个自定义区块毫无反应,侧栏无法定位到它,拖动排序时高亮落在整个 section 上而不是区块。
原因#
- 编辑器靠区块最外层元素上的编辑器属性识别区块,该属性由
block.shopify_attributes输出 - 主题在 wrapper 外又包了一层 div,属性加在内层,点击外层时命中的是 section
- 用
{% content_for 'blocks' %}渲染主题 block 时漏传属性,嵌套区块同样无法选中 - section 的包装元素由 Shopify 自动生成,区块必须自己写
处理步骤#
- 在最外层开始标签内写
{{ block.shopify_attributes }},不要放在标签外 - 确认属性位于开始标签内部,不能被输出成独立文本节点
- 一个区块有多个根元素时,只保留一个根元素承载该属性
- 主题 block 的父级 wrapper 也要带属性,再在其中输出子区块
- 刷新编辑器后点击预览区,观察侧栏是否自动切到该区块
验收标准#
点击预览区区块时侧栏自动选中该项,上移、下移、删除按钮作用于该区块而非整段。
本文由 风格技术 技术团队整理,适用于 Shopify 标准版与 Plus 店铺。Shopify 平台能力迭代较快,具体操作路径与字段以官方文档和店铺后台实际版本为准。