Odoo 16自定义BMI计算器模块安装后片段未显示求助

问题描述 #

• 为Odoo 16开发自定义模块，目标是给Website Builder添加BMI计算器snippet
• 模块安装成功，但该片段未出现在页面编辑器的区块区域

已完成操作 #

• 在snippet_templates.xml文件中添加了该片段
• 在assets.xml文件中引入了CSS和JS文件
• __manifest__.py中已配置视图和资源的路径
• 模块安装成功，但片段未在snippets区域显示

已尝试的解决方法 #

• 清除了Odoo缓存
• 确认模块已正确安装
• 尝试多种方式将片段注入website.snippets模板

排查与解决步骤 #

1. 检查snippet_templates.xml结构正确性 #

Odoo的snippet必须正确嵌套在website.snippets模板继承中，且需指定分类与正确结构，示例正确代码：

<odoo>
  <template id="snippet_bmi_calculator" inherit_id="website.snippets" name="BMI Calculator Snippet">
    <!-- 将snippet入口插入到结构区块容器 -->
    <xpath expr="//div[@id='snippet_structure']" position="inside">
      <div class="oe_snippet" data-snippet="snippet.bmi.calculator">
        <div class="oe_snippet_thumbnail">
          <img src="/your_module_name/static/src/img/bmi_thumbnail.png" alt="BMI Calculator"/>
        </div>
        <div class="oe_snippet_title">BMI Calculator</div>
      </div>
    </xpath>
    <!-- 定义snippet实际渲染的HTML结构 -->
    <template id="snippet_bmi_calculator_content" name="BMI Calculator Content">
      <section class="bmi-calculator">
        <h2>BMI Calculator</h2>
        <input type="number" placeholder="Height (cm)" class="bmi-height"/>
        <input type="number" placeholder="Weight (kg)" class="bmi-weight"/>
        <button class="bmi-calculate">Calculate</button>
        <div class="bmi-result"></div>
      </section>
    </template>
  </template>
</odoo>

关键注意点：

• 必须通过xpath将snippet入口插入到snippet_structure容器内
• data-snippet属性值需唯一，且要与后续JS注册的键对应
• 必须配置缩略图，否则可能无法在区块区域显示

2. 验证__manifest__.py配置准确性 #

确保视图、依赖和资源路径配置正确，示例代码：

{
    'name': 'BMI Calculator Snippet',
    'version': '1.0',
    'depends': ['website'],
    'data': [
        'views/snippet_templates.xml',
    ],
    'assets': {
        'web.assets_frontend': [
            'your_module_name/static/src/css/bmi_calculator.css',
            'your_module_name/static/src/js/bmi_calculator.js',
        ],
    },
    'installable': True,
    'auto_install': False,
}

关键注意点：

• depends必须包含website模块
• data字段需正确指向snippet_templates.xml的路径
• 前端资源需挂载到web.assets_frontend，而非后端资源组

3. 检查JS文件的snippet注册逻辑 #

Odoo需通过JS完成snippet的注册，确保JS文件包含以下代码：

odoo.define('your_module_name.bmi_calculator', function (require) {
    'use strict';

    var snippets = require('web_editor.snippets');

    snippets.registry.bmi_calculator = snippets.Class.extend({
        selector: '.bmi-calculator',
        // 可选：添加编辑器内的交互逻辑
        start: function () {
            this._super.apply(this, arguments);
            // 初始化代码
        },
    });

    return {
        bmi_calculator: snippets.registry.bmi_calculator,
    };
});

关键注意点：

• 模块命名需与assets.xml中的引入路径对应
• snippets.registry后的键需与snippet_templates.xml中的data-snippet值一致

4. 强制刷新前端资源 #

仅清除Odoo缓存可能无效，需执行以下操作：

1. 开启开发者模式，进入设置 > 技术 > 资产
2. 搜索web.assets_frontend，点击刷新资产按钮
3. 按Ctrl+Shift+R强制刷新浏览器页面，清空前端缓存

5. 检查权限与模块状态 #

• 确保当前用户拥有Website Editor权限
• 进入应用列表，确认模块处于已安装并启用状态

额外排查点 #

• 检查snippet_templates.xml是否存在XML语法错误（可通过Odoo视图管理工具查看加载状态）
• 确认静态资源路径正确（图片、CSS、JS文件路径需与代码中定义一致）
• 打开浏览器控制台（F12），查看是否存在资源加载失败或JS语法错误

内容的提问来源于stack exchange，提问作者Adil