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