{% if taxons|length > 0 %} <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3"> {% for taxon in taxons %} <div class="col mb-4 position-relative"> {% if taxon.imagesByType('homepage') is not empty %} <a class="image-link d-block bg-gray mb-2" href="{{ path('sylius_shop_product_index', {'slug': taxon.redirect ?: taxon.slug, '_locale': taxon.translation.locale}) }}"> <img class="lazy img bg-gray img-fluid rounded ratio ratio-320x246" width="320" height="246" src="{{ taxon.imagesByType('homepage').first.path|imagine_filter('app_shop_home_catalog_small') }}" data-src="{{ taxon.imagesByType('homepage').first.path|imagine_filter('app_shop_home_catalog') }}" alt="{{ taxon.name }}"> </a> {% endif %}{# <h5 class="title fw-light">#}{# <a class="link link-heading d-inline-flex align-items-center" href="{{ path('sylius_shop_product_index', {'slug': taxon.slug, '_locale': taxon.translation.locale}) }}">#}{# {{ taxon.name }}<svg class="icon bi-arrow-right-short ms-2" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" focusable="false" aria-hidden="true"><path fill-rule="evenodd" d="M4 8a.5.5 0 0 1 .5-.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5A.5.5 0 0 1 4 8z"/></svg>#}{# </a>#}{# </h5>#}{# <img class="lazy img img-fluid w-100 rounded mb-2" src="{{ taxon.imagesByType('homepage').first.path|imagine_filter('app_shop_home_catalog_small') }}" data-src="{{ taxon.imagesByType('homepage').first.path|imagine_filter('app_shop_home_catalog') }}" alt="{{ taxon.name }}">#} <h3 class="taxon-item-title" onclick="window.location.href='{{ path('sylius_shop_product_index', {'slug': taxon.redirect ?: taxon.slug, '_locale': taxon.translation.locale}) }}'"> <a href="{{ path('sylius_shop_product_index', {'slug': taxon.redirect ?: taxon.slug, '_locale': taxon.translation.locale}) }}" class="link">{{ taxon.name }}</a> </h3> </div> {% endfor %} </div>{% endif %}