Shopware 6 Plugin - SEO Friendly Pagination: "Unfortunately, something went wrong" after adding invisible href element

Question

Title: Shopware 6 Plugin - SEO Friendly Pagination: "Unfortunately, something went wrong" after adding invisible href elements

Hello,

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' %}

{% block component_pagination_loop %}
    {% set start = currentPage - 2 %}
    {% if start <= 0 %}
        {% set start = currentPage - 1 %}
        {% if start <= 0 %}
            {% set start = currentPage %}
        {% endif %}
    {% endif %}

    {% set end = start + 4 %}
    {% if end > totalPages %}
        {% set end = totalPages %}
    {% endif %}

    {% for page in start..end %}
        {% set isActive = (currentPage == page) %}

        {# Generate the SEO-friendly URL for the current pagination page #}
        {% set paginationUrlParams = {
            order: app.request.get('order'),
            properties: app.request.get('properties'),
            p: page
        } %}
        {% set seoFriendlyPaginationUrl = path('frontend.listing', paginationUrlParams) %}

        {# Add the invisible href element for the current page #}
        <a href="{{ seoFriendlyPaginationUrl }}" style="display: none;"></a>

        {% block component_pagination_item %}
            <li class="page-item{% if isActive %} active{% endif %}">
                {% block component_pagination_item_input %}
                    <input type="radio"
                           name="p"
                           id="p{{ page }}{{ paginationSuffix }}"
                           value="{{ page }}"
                           class="d-none"
                           title="pagination"
                           {% if isActive %}checked="checked"{% endif %}>
                {% endblock %}

                {% block component_pagination_item_label %}
                    <label class="page-link" for="p{{ page }}{{ paginationSuffix }}">
                        {% block component_pagination_item_link %}
                            {% block component_pagination_item_text %}
                                {{ page }}
                            {% endblock %}
                        {% endblock %}
                    </label>
                {% endblock %}
            </li>
        {% endblock %}
    {% endfor %}
{% endblock %}

However, after adding the invisible href elements and the URL generation logic, I encounter an error on my local Shopware 6 installation, which simply says "Unfortunately, something went wrong."

I suspect that the issue might be related to the modifications I made in the pagination template. I have followed the documentation and examples provided by Shopware, but I'm not sure why this error is occurring.

Could you please help me identify what might be causing this error and how I can fix it? Is there anything I missed in my implementation that could lead to this issue?

Thank you in advance for your assistance!

Best regards, Lodhi

I added these lines of code:

  {# Generate the SEO-friendly URL for the current pagination page #}
        {% set paginationUrlParams = {
            order: app.request.get('order'),
            properties: app.request.get('properties'),
            p: page
        } %}
        {% set seoFriendlyPaginationUrl = path('frontend.listing', paginationUrlParams) %}

        {# Add the invisible href element for the current page #}
        <a href="{{ seoFriendlyPaginationUrl }}" style="display: none;"></a>

I am getting this error

Answer 1

First of all, change APP_ENV to dev in the .env file within the root directory of the installation. Then you'll get a meaningful error in the storefront.

APP_ENV="dev"

Is frontend.listing a route you introduced? There exists no route with this name by default. This is likely where the error stems from. Use the seoUrl twig function with the route frontend.navigation.page to generate a proper SEO url. Add the query params like p additionally. Unless necessary it's best not to override the entire template and use the parent function to append/prepend blocks.

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

{% block component_pagination_item %}
    {% if page.header.navigation.active is defined %}
        {% set currentCategoryId = page.header.navigation.active.id %}
        <a href="{{ seoUrl('frontend.navigation.page', { navigationId: currentCategoryId }) }}?p={{ page }}" 
           style="display: none;"></a>
    {% endif %}
    {{ parent() }}
{% endblock %}