Odoo 18电商模块onchange事件未触发问题求助

问题根源 #

Odoo 18 前端基于OWL框架开发，你的模板中使用了t-on-change="onShopChange"，但未将模板元素与ShopSelection组件实例关联，导致事件无法绑定到组件方法；同时JS代码缺少OWL核心模块的导入，组件也未正确注册到前端资产。

具体修正步骤 #

1. 补全JS组件的OWL核心导入 #

修改你的JS文件，添加Component和useService的导入：

import { Component, useService } from "@odoo/owl";
import { _t } from "@web/core/l10n/translation";

export class ShopSelection extends Component {
    setup() {
        this.rpc = useService("rpc");
    }

    async onShopChange(ev) {
        const shopId = ev.target.value;
        if (!shopId) return;

        try {
            const result = await this.rpc("/select/shop", {
                shop_id: parseInt(shopId)
            });

            if (result.success) {
                console.log("Shop changed successfully");
                window.location.reload(); // Refresh to apply company changes
            } else {
                this.showStockErrors(result);
            }
        } catch (error) {
            console.error("Error:", error);
            alert(_t("Operation failed"));
        }
    }

    showStockErrors(result) {
        // Clear previous errors
        document.querySelectorAll("[class^='shop-selection-errors-']").forEach(el => el.innerHTML = "");
        
        // Display new errors
        result.products?.forEach(p => {
            const errorDiv = document.querySelector(`.shop-selection-errors-${p.id}`);
            if (errorDiv) {
                errorDiv.innerHTML = `
                    <div class="alert alert-danger mb-2">
                        <small>
                            ${_t("Available")}: ${p.available} (${_t("Required")}: ${p.required})
                        </small>
                    </div>
                `;
            }
        });
        alert(result.message || _t("Insufficient stock"));
    }
}

// 标记组件无需独立模板（使用现有继承模板）
ShopSelection.template = false;

2. 在模板中关联组件到元素 #

修改shop_selection_cart模板，将组件绑定到包含select的容器元素上，添加t-component="ShopSelection"属性，确保事件能找到对应的组件方法：

<template id="shop_selection_cart" inherit_id="website_sale.cart">
    <xpath expr="//div[hasclass('col')]" position="before">
        <t t-if="website_sale_order and website_sale_order.website_order_line">
            <div class="col-12 mb-4">
                <div class="card">
                    <!-- 绑定组件到当前容器 -->
                    <div class="card-body" t-component="ShopSelection">
                        <h4 class="text-uppercase small fs-6 fw-bold">Select Shop</h4>
                        <select name="shop_id" class="form-select" required="required" t-on-change="onShopChange">
                            <option value="">Select a Shop</option>
                            <t t-foreach="shops" t-as="shop">
                                <option t-att-value="shop.id" 
                                        t-att-selected="website_sale_order.shop_company_id and website_sale_order.shop_company_id.id == shop.id">
                                    <t t-esc="shop.name"/>
                                </option>
                            </t>
                        </select>
                        <div class="text-danger mt-2">
                            Please select the shop nearest to your location.
                        </div>
                        <div class="shop-selection-errors mt-3"></div>
                    </div>
                </div>
            </div>
        </t>
    </xpath>
</template>

3. 将JS文件添加到模块前端资产 #

修改模块的__manifest__.py，将你的JS文件添加到web.assets_frontend资产中，确保页面加载时会引入该组件：

{
    # 其他manifest配置项...
    'assets': {
        'web.assets_frontend': [
            'your_module_name/static/src/js/shop_selection.js',
        ],
    },
}

4. 验证与测试 #

• 升级模块：在Odoo后台应用列表中找到你的模块，点击升级
• 强制刷新页面：按Ctrl+Shift+R清除浏览器缓存后刷新购物车页面
• 测试功能：切换店铺下拉选项，查看浏览器控制台是否有日志输出，检查后端是否接收到请求

额外检查点 #

• 确保shops变量在模板上下文可用：需要在website_sale.cart的控制器或继承的控制器中传递shops数据，比如在cart方法中添加'shops': request.env['res.company'].sudo().search([('is_shop', '=', True)])
• 查看浏览器控制台错误：按F12打开开发者工具，检查Console标签页是否有导入错误或组件注册异常

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