{% block cms_element_cross_selling_tabs_inner %}
{% if not sliderConfig %}
{% set sliderConfig = element.fieldConfig.elements %}
{% endif %}
{% if element.data.crossSellings.elements is defined and element.data.crossSellings.elements|filter(item => item.total > 0)|length > 0 %}
<div class="product-detail-cross-selling">
<div class="card card-tabs" data-cross-selling="true">
{% block cms_element_cross_selling_tabs_navigation %}
<div class="card-header product-detail-tab-navigation product-cross-selling-tab-navigation">
{% block cms_element_cross_selling_tabs_navigation_container %}
<ul class="nav nav-tabs product-detail-tab-navigation-list"
id="product-detail-cross-selling-tabs"
role="tablist">
{% for item in element.data.crossSellings.elements|filter(item => item.total > 0 and item.crossSelling.active == true) %}
{% set crossSelling = item.crossSelling %}
{% set products = item.products %}
{% set id = crossSelling.id %}
<li class="nav-item">
<a class="nav-link product-detail-tab-navigation-link{% if loop.first %} active{% endif %}"
id="cross-selling-tab-{{ id }}"
{{ dataBsToggleAttr }}="tab"
href="#cross-selling-tab-{{ id }}-pane"
role="tab"
aria-controls="cross-selling-tab-{{ id }}-pane"
aria-selected="true">
{{ crossSelling.translated.name }}
<span class="product-detail-tab-navigation-icon">
{% sw_icon 'arrow-medium-right' style {'pack':'solid'} %}
</span>
</a>
</li>
{% endfor %}
</ul>
{% endblock %}
</div>
{% endblock %}
{% block cms_element_cross_selling_tabs_content %}
<div class="product-detail-tabs-content card-body">
{% block cms_element_cross_selling_tabs_content_container %}
<div class="tab-content">
{% for item in element.data.crossSellings.elements|filter(item => item.total > 0 and item.crossSelling.active == true) %}
{% set crossSelling = item.crossSelling %}
{% set products = item.products %}
{% set id = crossSelling.id %}
<div class="tab-pane fade show{% if loop.first %} active{% endif %}"
id="cross-selling-tab-{{ id }}-pane"
role="tabpanel"
aria-labelledby="cross-selling-tab-{{ id }}">
{% set config = {
'title': {
'value': crossSelling.name ?: crossSelling.translated.name
},
'border': {
'value': false
},
'rotate': {
'value': false
},
'products': {
'value': products
},
'boxLayout': {
'value': sliderConfig.boxLayout.value
},
'elMinWidth': {
'value': sliderConfig.elMinWidth.value
},
'navigation': {
'value': true
},
'displayMode': {
'value': sliderConfig.displayMode.value
},
'verticalAlign': {
'value': center
}
} %}
{% block cms_element_cross_selling_tabs_content_container_slider %}
{% sw_include "@Storefront/storefront/element/cms-element-product-slider.html.twig" with {
sliderConfig: config,
element: {
'data': {
'products': products
},
type: 'product-slider'
}
} %}
{% endblock %}
</div>
{% endfor %}
</div>
{% endblock %}
</div>
{% endblock %}
</div>
</div>
{% endif %}
{% endblock %}