vendor/shopware/storefront/Resources/views/storefront/page/product-detail/cross-selling/tabs.html.twig line 1

Open in your IDE?
  1. {% block page_product_detail_cross_selling_tabs_inner %}
  2.     <div class="card card-tabs" data-cross-selling="true">
  3.         {% block page_product_detail_cross_selling_tabs_navigation %}
  4.             <div class="card-header product-detail-tab-navigation product-cross-selling-tab-navigation">
  5.                 {% block page_product_detail_cross_selling_tabs_navigation_container %}
  6.                     <ul class="nav nav-tabs product-detail-tab-navigation-list"
  7.                         id="product-detail-cross-selling-tabs"
  8.                         role="tablist">
  9.                         {% for item in crossSellings|filter(item => item.total > 0 and item.crossSelling.active == true)  %}
  10.                             {% set id = item.crossSelling.id %}
  11.                             <li class="nav-item">
  12.                                 <a class="nav-link product-detail-tab-navigation-link{% if loop.first %} active{% endif %}"
  13.                                    id="cs-{{ id }}-tab"
  14.                                    {{ dataBsToggleAttr }}="tab"
  15.                                    href="#cs-{{ id }}-tab-pane"
  16.                                    role="tab"
  17.                                    aria-controls="cs-{{ id }}-tab-pane"
  18.                                    aria-selected="true">
  19.                                     {{ item.crossSelling.translated.name }}
  20.                                     <span class="product-detail-tab-navigation-icon">
  21.                                         {% sw_icon 'arrow-medium-right' style {'pack':'solid'} %}
  22.                                     </span>
  23.                                 </a>
  24.                             </li>
  25.                         {% endfor %}
  26.                     </ul>
  27.                 {% endblock %}
  28.             </div>
  29.         {% endblock %}
  31.         {% block page_product_detail_cross_selling_tabs_content %}
  32.             <div class="product-detail-tabs-content card-body">
  33.                 {% block page_product_detail_cross_selling_tabs_content_container %}
  34.                     <div class="tab-content">
  35.                         {% for item in crossSellings|filter(item => item.total > 0 and item.crossSelling.active == true) %}
  36.                             {% set id = item.crossSelling.id %}
  37.                             <div class="tab-pane fade show{% if loop.first %} active{% endif %}"
  38.                                  id="cs-{{ id }}-tab-pane"
  39.                                  role="tabpanel"
  40.                                  aria-labelledby="cs-{{ id }}-tab">
  41.                                 {% set config = {
  42.                                     'title': {
  43.                                         'value': item.crossSelling.name ?: item.crossSelling.translated.name
  44.                                     },
  45.                                     'border': {
  46.                                         'value': false
  47.                                     },
  48.                                     'rotate': {
  49.                                         'value': false
  50.                                     },
  51.                                     'products': {
  52.                                         'value': item.getProducts()
  53.                                     },
  54.                                     'boxLayout': {
  55.                                         'value': 'standard'
  56.                                     },
  57.                                     'elMinWidth': {
  58.                                         'value': '300px'
  59.                                     },
  60.                                     'navigation': {
  61.                                         'value': true
  62.                                     },
  63.                                     'displayMode': {
  64.                                         'value': 'minimal'
  65.                                     },
  66.                                     'verticalAlign': {
  67.                                         'value': 'top'
  68.                                     },
  69.                                 } %}
  71.                                 {% sw_include "@Storefront/storefront/element/cms-element-product-slider.html.twig" with {
  72.                                     sliderConfig: config,
  73.                                     element: {
  74.                                         'data': {
  75.                                             'products': {
  76.                                                 elements: item.getProducts()
  77.                                             }
  78.                                         },
  79.                                         type: 'product-slider'
  80.                                     }
  81.                                 } %}
  82.                             </div>
  83.                         {% endfor %}
  84.                     </div>
  85.                 {% endblock %}
  86.             </div>
  87.         {% endblock %}
  88.     </div>
  89. {% endblock %}