{% sw_extends '@Storefront/storefront/component/product/listing.html.twig' %}
{% block element_product_listing_pagination_nav_top %}
{% endblock %}
{% block element_product_listing_row %}
{% if boxLayout == 'nr-slider' %}
{% set manufacturers = [] %}
{% for product in searchResult %}
{% if { name: product.manufacturer.name, lastName: product.manufacturer.customFields.nrbn_lvg_artist_lastname, media: product.manufacturer.media } not in manufacturers %}
{% set manufacturers = manufacturers|merge([{ name: product.manufacturer.name, lastName: product.manufacturer.customFields.nrbn_lvg_artist_lastname, media: product.manufacturer.media }]) %}
{% endif %}
{% endfor %}
{% for manufacturer in manufacturers %}
<div class="nr-listing-section">
<div class="nr-listing-header">
<div class="row align-items-center">
<div class="col">
<div class="nr-listing-manufacturer">
{% if manufacturer.media %}
{% sw_thumbnails 'manufacturer-image-thumbnails' with {
media: manufacturer.media,
attributes: {
'class': 'nr-manufacturer-image',
'alt': manufacturer.name,
},
sizes: {
'default': '80px'
}
} %}
{% endif %}
<h2 class="nr-manufacturer-title">{{ manufacturer.name }}</h2>
</div>
</div>
<div class="col-auto">
<button class="nr-listing-subscribe" type="button">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" width="24" height="24">
<path stroke-linecap="round" stroke-linejoin="round" d="M19 7.5v3m0 0v3m0-3h3m-3 0h-3m-2.25-4.125a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zM4 19.235v-.11a6.375 6.375 0 0112.75 0v.109A12.318 12.318 0 0110.374 21c-2.331 0-4.512-.645-6.374-1.766z" />
</svg>
<span>Folgen</span>
</button>
</div>
</div>
</div>
<div class="nr-listing-slider">
{% set nrbnProductSliderOptions = {
slider: {
items: 1,
autoWidth: true,
gutter: 24,
mouseDrag: true,
swipeAngle: false,
nav: false,
loop: false,
preventScrollOnTouch: 'auto',
}
} %}
<div
class="nrbn-slider"
data-nrbn-slider="true"
data-nrbn-slider-options="{{ nrbnProductSliderOptions|json_encode }}">
<div class="nrbn-slider-container">
{% for product in searchResult %}
{% if product.manufacturer.name == manufacturer.name %}
<div class="nrbn-slider-item">
{% sw_include '@Storefront/storefront/component/product/card/box.html.twig' with {
'layout': boxLayout,
'displayMode': displayMode
} %}
</div>
{% endif %}
{% endfor %}
</div>
<div class="nrbn-slider-controls">
<button class="nrbn-slider-controls-prev">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"></polyline></svg>
</button>
<button class="nrbn-slider-controls-next">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"></polyline></svg>
</button>
</div>
</div>
</div>
</div>
{% endfor %}
{% elseif boxLayout == 'nr-manufacturer' %}
{% set manufacturers = [] %}
{% for product in searchResult %}
{% if { name: product.manufacturer.name, lastName: product.manufacturer.customFields.nrbn_lvg_artist_lastname, media: product.manufacturer.media } not in manufacturers %}
{% set manufacturers = manufacturers|merge([{ name: product.manufacturer.name, lastName: product.manufacturer.customFields.nrbn_lvg_artist_lastname, media: product.manufacturer.media }]) %}
{% endif %}
{% endfor %}
{% for letter in range('A', 'Z') %}
<div class="nr-manufacturer-listing-section">
<div class="h2" id="nrManufacturerListingLetter{{ letter }}">{{ letter }}</div>
<div class="row">
{% for manufacturer in manufacturers|sort((a, b) => a.lastName <=> b.lastName) %}
{% if manufacturer.lastName|first|upper == letter %}
<div class="col-12 col-sm-6 col-md-4 col-lg-3">
<a class="nr-manufacturer-box" href="{{ seoUrl('frontend.nrbnlvg.manufacturer.detail', { manufacturer: manufacturer.name }) }}">
{% if manufacturer.media %}
{% sw_thumbnails 'manufacturer-box-image-thumbnails' with {
media: manufacturer.media,
attributes: {
'class': 'nr-manufacturer-box-image img-fluid',
'alt': manufacturer.name,
},
sizes: {
'default': '800px'
}
} %}
{% endif %}
<div class="nr-manufacturer-box-overlay d-flex flex-column justify-content-end">
<h3 class="nr-manufacturer-box-title">{{ manufacturer.name }}</h3>
</div>
</a>
</div>
{% endif %}
{% endfor %}
</div>
</div>
{% endfor %}
{% else %}
{{ parent() }}
{% endif %}
{% endblock %}