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:
{% 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!
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>