Shopware 6 Plugin - SEO Pagination: Custom Twig Pagination Loop Renders Unclickable Pagination Items and Order Issue

Question

I have created a custom Twig file using the component_pagination_loop block, extending the @Storefront/storefront/component/pagination.html.twig. However, I encountered two issues with this implementation:

• The pagination items have become unclickable.
• When changing the sorting order from ascending to descending, the page does not update with the correct values.

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

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

{% block component_pagination_loop %}   
    
    {% set currentCategoryId = page.header.navigation.active.id %}

{#     app.request.get('order') returns only name-asc#}
    {% set sortingOptions = [
        { label: 'Name A-Z', value: 'name-asc' },
        { label: 'Name Z-A', value: 'name-desc' },
        { label: 'Price Ascending', value: 'price-asc' },
        { label: 'Neuheiten', value: 'neuheiten'},
        { label: 'Price Descending', value: 'price-desc' },
        { label: 'Top Seller', value: 'topseller' }
    ] %}

    {% for sortingOption in sortingOptions %}
        {% set order = sortingOption.value %}
        {% for i in 1..totalPages %}
            {% set seoParams = { navigationId: currentCategoryId, p: i } %}

            {% if order %}
                {% set seoParams = seoParams|merge({ order: order }) %}
            {% endif %}

            {% set properties = app.request.get('properties') %}
            {% if properties %}
                {% set seoParams = seoParams|merge({ properties: properties }) %}
            {% endif %}

            <a href="{{ seoUrl('frontend.navigation.page', seoParams) }}" 
               ></a>
        {% endfor %}
    {% endfor %}
    
    {{ parent() }}
{% endblock %}

I would appreciate any insights or suggestions on how to resolve these issues and make the pagination items clickable again, as well as ensuring that the sorting order updates correctly when clicking on different options.

Thank you in advance for your help!

Answer 1

Probably not a good idea to append/prepend this block as it is likely going to mess with the javascript event listeners of the contained tags. The enclosing ul tag should only contain appropriate list related children. If you can, consider appending/prepending the outer component_pagination block instead.

The other issue I couldn't reproduce. Works as expected.

FYI passing all the parameters as the second arguments of the seoUrl function will result in the function not yielding the proper SEO url. Only the navigationId is a valid route parameter. While it does work, you'll only get the technical url similar to this:

/navigation/01896e384983724fbc3fbcfe03eb1e80?p=3&order=name-asc

To avoid that, as already explained in your earlier question, build the parameter query string manually.

<a href="{{ seoUrl('frontend.navigation.page', { navigationId: currentCategoryId }) }}?p={{ i }}&order={{ order }}"></a>