如何修改ORO Commerce商品列表每页显示数量的下拉选项

方法一：通过后端数据网格配置覆盖（推荐） #

ORO Commerce的数据网格分页选项由YAML配置控制，直接覆盖对应配置即可避免前端修改的兼容问题：

1. 在你的自定义模块（如AcmeDemoBundle）中创建配置文件 src/Acme/DemoBundle/Resources/config/oro/datagrids.yml
2. 添加以下配置覆盖商品列表的分页选项：

datagrids:
    product-grid:
        pagination:
            page_limit_options: [5, 10, 20, 30]
            default_page_limit: 10 # 可选，设置默认选中的每页数量

3. 清除缓存：

# 生产环境
php bin/console cache:clear --env=prod
# 开发环境
php bin/console cache:clear

4. 刷新商品列表页面，下拉选项已更新。

方法二：前端事件监听（适用于后端配置无法覆盖的场景） #

如果后端配置修改不生效，可通过监听数据网格初始化事件动态修改下拉选项，避免直接修改核心JS文件：

1. 在自定义模块的Resources/public/js目录下创建product-grid-pagination.js：

$(document).on('datagrid:initialized', function(e, datagrid) {
    // 仅针对商品列表的数据网格
    if (datagrid.getName() !== 'product-grid') return;

    const $perPageSelect = datagrid.$el.find('.pagination-select');
    if (!$perPageSelect.length) return;

    // 替换选项
    $perPageSelect.empty();
    const options = [5, 10, 20, 30];
    const defaultLimit = 10;

    options.forEach(limit => {
        const isSelected = limit === defaultLimit;
        $perPageSelect.append(new Option(limit, limit, isSelected, isSelected));
    });

    // 触发变更事件确保数据网格生效
    $perPageSelect.trigger('change');
});

2. 在模块的Resources/config/oro/assets.yml中注册该JS文件：

assets:
    js/product-grid-pagination.js: ~

3. 执行资产打包命令：

# 安装资产
php bin/console oro:assets:install --env=prod
# 构建前端资源（若使用Webpack）
yarn install && yarn build

4. 清除缓存后刷新页面。

为什么之前修改JS文件未成功？ #

直接修改核心JS文件会被ORO的缓存机制覆盖，且升级后修改会丢失。正确的做法是通过自定义模块扩展，或使用事件监听的方式注入修改逻辑，而非直接修改核心代码。

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