{% block cms_element_cross_selling_tabs_inner %} {% if not sliderConfig %} {% set sliderConfig = element.fieldConfig.elements %} {% endif %} <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"> {% if element.data.crossSellings.elements is defined %} {% 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 %} {% endif %} </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"> {% if element.data.crossSellings.elements is defined %} {% 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 %} {% endif %} </div> {% endblock %} </div> {% endblock %} </div> </div>{% endblock %}