Question 220727 in SEO Question posted in
Some basic information to get you started with this can be found here.

Shopware 6 Plugin – SEO Pagination: Parameter "navigationId" for route "frontend.navigation.page" must match "[^/] after adding invisible href element

I’m currently developing a Shopware 6 plugin called "SEO Friendly Pagination" that aims to make paginated URLs in product categories accessible to search engine crawlers. To achieve this, I have extended the pagination template to include invisible href elements for each page in the pagination. These href elements are generated with SEO-friendly URLs that reflect the current context of the page, including sorting order and filters.

The pagination template in my custom plugin pagination.html.twig looks like this:

{% sw_extends '@Storefront/storefront/component/pagination.html.twig' %}

{% set configService = sw.service('TanmarSeoPagination.config_service') %}

    {% block component_pagination_item %}
{#        {% if configService.isPluginEnabled() %}#}
           {% if page.header.navigation.active is defined %}
                {% set currentCategoryId = page.header.navigation.active.id %}
                {# Debug output to check the currentCategoryId variable #}
                 {% dump(currentCategoryId + "here") %}
                 
                {% set totalPages = page.totalPages %}
                {% for i in 1..totalPages %}
                    <a href="{{ seoUrl('frontend.navigation.page', { navigationId: currentCategoryId }) }}?p={{ i }}" 
                      style="display: none;
                    ">
                    </a>
                {% endfor %}
            {% endif %}
{#        {% endif %}#}
         {{ parent() }}
    {% endblock %}

However, after adding the invisible href elements and the URL generation logic, I do not see any desired results. So, I found out the if condition of line " {% if page.header.navigation.active is defined %}" is return false so thats why I removed this line and I encounter an error "Parameter "navigationId" for route "frontend.navigation.page" must match "[^/]++" ("" given) to generate a corresponding URL".

page.header.navigation.active is not defined and navigationId parameter is not being set correctly in the seoUrl() function call. I also added dump command for currentCategoryId. But I could not see any dumped values on my localhost. How can I obtain the correct value for the navigationId parameter?

Thank you in advance for your assistance!

Best regards, Lodhi

Tags:

2

Answers


  1. 0

    Use searchResult.currentFilters.navigationId as an alternative.

    {% if searchResult.currentFilters.navigationId is defined %}
    {% set currentNavigationId = searchResult.currentFilters.navigationId %}
{% endif %}
{% if page.header.navigation.active.id is defined %}
    {% set currentNavigationId = page.header.navigation.active.id %}
{% endif %}
{% if currentNavigationId is defined %}
    <a href="{{ seoUrl('frontend.navigation.page', { navigationId: currentNavigationId }) }}" 
       style="display: none;"></a>
{% endif %}
    Login or Signup to reply.
  2. 0

    This is probably best created as part of your child theme as it may be theme-specific, but a plugin would also work. Don’t create invisible elements though – do it right.

    You need to re-implement pagination properly, using a elements instead of the broken button based navigation. I also recommend not using canonical on subpages, unlike what you might see some do, because the pages indeed have different content. The actual results can be said to make up the content.

    In our case I simply carefully created my own blocks for the following:

    • component_pagination_prev
    • component_pagination_item
    • component_pagination_next
    • component_pagination_last

    1. You need to be aware that the components may be used both for search results and for pagination, and you may need to account for that in your twig – I already did in the following code.

    2. You should also account for use of filters. Filters are used for sorting, and will be included in the URL as parameters, so you need to re-build the query string. I also did that already in the following example.

    This file simply extends Shopware’s own pagination.html.twig:

    {% sw_extends '@Storefront/storefront/component/pagination.html.twig' %}


{% block component_pagination_first %}
  {% if app.request.query.get('p') %}
    {% set currentPage = app.request.query.get('p') %}
  {% endif %}
  {% if currentPage > 1 %}
    <li class="page-item page-first">
     <a href="?{% for key, value in app.request.query %}{% if key != 'p' and key != 'slots' and key != 'no-aggregations' %}{{ key }}={{ value }}&{% endif %}{% endfor %}p=1">{% sw_icon 'arrow-medium-double-left' style { 'size': 'fluid', 'pack': 'solid'} %}</a>
    </li>
  {% endif %}
{% endblock %}

{% block component_pagination_prev %}
  {% if app.request.query.get('p') %}
    {% set currentPage = app.request.query.get('p') %}
  {% endif %}
  {% if currentPage > 1 %}
    <li class="page-item page-prev">
      <a href="?{% for key, value in app.request.query %}{% if key != 'p' and key != 'slots' and key != 'no-aggregations' %}{{ key }}={{ value }}&{% endif %}{% endfor %}p={{ currentPage - 1 }}" rel="prev">{% sw_icon 'arrow-medium-left' style {'size': 'fluid', 'pack': 'solid'} %}</a>
    </li>
  {% endif %}
{% endblock %}

{% block component_pagination_item %}
  {% if isActive %}
    <li class="page-item">
     {{ page }}
    </li>
  {% else %}
    <li class="page-item">
     <a href="?{% for key, value in app.request.query %}{% if key != 'p' and key != 'slots' and key != 'no-aggregations' %}{{ key }}={{ value }}&{% endif %}{% endfor %}p={{ page }}">{{ page }}</a>
    </li>
  {% endif %}
{% endblock %}

{% block component_pagination_next %}
  {% if app.request.query.get('p') %}
    {% set currentPage = app.request.query.get('p') %}
  {% endif %}
  {% if currentPage < totalPages %}
  <li class="page-item page-next">
    <a href="?{% for key, value in app.request.query %}{% if key != 'p' and key != 'slots' and key != 'no-aggregations' %}{{ key }}={{ value }}&{% endif %}{% endfor %}p={{ currentPage + 1 }}" rel="next">{% sw_icon 'arrow-medium-right' style { 'size': 'fluid', 'pack': 'solid'} %}</a>
  </li>
  {% endif %}
{% endblock %}

{% block component_pagination_last %}
  {% if app.request.query.get('p') %}
    {% set currentPage = app.request.query.get('p') %}
  {% endif %}
  {% if currentPage < totalPages %}
    <li class="page-item page-last">
      <a href="?{% for key, value in app.request.query %}{% if key != 'p' and key != 'slots' and key != 'no-aggregations' %}{{ key }}={{ value }}&{% endif %}{% endfor %}p={{ totalPages }}">{% sw_icon 'arrow-medium-double-right' style {'size': 'fluid', 'pack': 'solid'} %}</a>
    </li>
  {% endif %}
  {% if app.request.query.get('search') == '' %}
    <li class="page-item page-last">
      <a href="?{% for key, value in app.request.query %}{% if key != 'p' and key != 'slots' and key != 'no-aggregations' %}{{ key }}={{ value }}&{% endif %}{% endfor %}limit=0">Show All</a>
    </li>
  {% endif %}
{% endblock %}

    It should probably be located in:

    /var/www/shopware/custom/plugins/MyNameSpaceMyExamplePlugin/src/Resources/views/storefront/component/pagination.html.twig

    Remember to translate relevant parts in your snippets. E.g. the "Show all" text.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search