Shopware站点Twig模板下Ajax分页页码在页面标题的多语言展示问题求助

步骤1：配置多语言Snippet #

先在Shopware后台「Snippets」模块对应销售渠道的语言包中添加统一命名的分页片段：

• 英文（en-GB）：片段名称填 component.pagination.pageTitle，值填 Page "%page%"
• 德文（de-DE）：片段名称同样填 component.pagination.pageTitle，值填 Seite "%page%"
  其他语言按照相同规则配置即可，统一用%page%作为页码占位符。

步骤2：Twig模板基础逻辑配置 #

在对应列表页（如分类页、搜索页）的Twig模板中覆写标题渲染逻辑，同时输出必要的全局变量给前端JS调用：

{% block base_head_title %}
    {# 读取原生页面标题 #}
    {% set originalTitle = parent() %}
    {# 获取当前页码，默认值为1 #}
    {% set currentPage = page.header.pagination.page ?? 1 %}

    {# 服务端初始渲染直接处理标题 #}
    {% if currentPage >= 2 %}
        {{ originalTitle ~ ' ' ~ ('component.pagination.pageTitle'|trans({'%page%': currentPage})) }}
    {% else %}
        {{ originalTitle }}
    {% endif %}
{% endblock %}

{% block base_body_script_variables %}
    {{ parent() }}
    {# 输出配置到全局JS变量，供Ajax场景调用 #}
    <script>
        window.pageTitleConfig = {
            originalTitle: "{{ originalTitle|escape('js') }}",
            paginationSnippet: "{{ 'component.pagination.pageTitle'|trans|escape('js') }}",
            defaultPage: 1
        }
    </script>
{% endblock %}

步骤3：Ajax分页动态更新标题 #

监听分页加载完成事件，按照规则动态修改页面标题：

// 若使用Shopware默认Pjax分页，直接监听pjax加载完成事件
document.addEventListener('pjax:success', function () {
    const urlParams = new URLSearchParams(window.location.search);
    const currentPage = parseInt(urlParams.get('p')) || window.pageTitleConfig.defaultPage;

    if (currentPage >= 2) {
        const pageSuffix = window.pageTitleConfig.paginationSnippet.replace('%page%', currentPage);
        document.title = `${window.pageTitleConfig.originalTitle} ${pageSuffix}`;
    } else {
        document.title = window.pageTitleConfig.originalTitle;
    }
});

如果是自定义的Ajax分页逻辑，只需要把上述标题更新代码放到你的Ajax请求成功回调中即可。

注意事项 #

• 所有带分页的页面可复用同一套Snippet，仅需在对应页面的base_head_title块覆写逻辑
• 页码统一做数值类型转换，避免字符串判断错误
• 服务端渲染逻辑和前端Ajax更新逻辑保持一致，避免刷新页面和点击分页展示效果不一致

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