# Cross-selling als "Additional Tabs" in den Artikeldetails

**URL:** <https://forum.shopware.com/t/cross-selling-als-additional-tabs-in-den-artikeldetails/99572>\
**Category:** Shopware 6 (German)\
**Created:** [6. Mai 2023 um 11:15 UTC](https://forum.shopware.com/t/cross-selling-als-additional-tabs-in-den-artikeldetails/99572 "2023-05-06T11:15:53Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Frank\_2812](https://avatars.discourse-cdn.com/v4/letter/f/b19c9b/32.png) [@Frank\_2812](https://forum.shopware.com/u/Frank_2812)\
**Post date:** [6. Mai 2023 um 11:15 UTC](https://forum.shopware.com/t/cross-selling-als-additional-tabs-in-den-artikeldetails/99572/1 "2023-05-06T11:15:53Z")

</div>

Hallo,

ich möchte ev. vorhandene cross-sellings in die additional tabs der Produktdetails verlegen. Prinzipiell funktioniert dass auch:

```auto
{% sw_extends '@Storefront/storefront/utilities/offcanvas.html.twig' %}

{% block utilities_offcanvas_content %}
    {% block page_product_detail_review_container %}
        {% block page_product_detail_cross_selling_tab_pane %}

              {% set config = {
                  'border': {
                      'value': false
                  },
                  'rotate': {
                      'value': false
                  },
                  'products': {
                      'value': crossSellingSection.getProducts()
                  },
                  'boxLayout': {
                      'value': 'standard'
                  },
                  'elMinWidth': {
                      'value': '300px'
                  },
                  'navigation': {
                      'value': true
                  },
                  'displayMode': {
                      'value': 'minimal'
                  },
                  'verticalAlign': {
                      'value': 'top'
                  },
              } %}
    
              {% sw_include "@Storefront/storefront/element/cms-element-product-slider.html.twig" with {
                  sliderConfig: config,
                  element: {
                      'data': {
                          'products': {
                              elements: crossSellingSection.getProducts()
                          }
                      },
                      type: 'product-slider'
                  }
              } %}

        {% endblock %}
    {% endblock %}
{% endblock %}

```

Allerdings bekomme ich nicht hin, dass im Tab für das cross-selling mehrere Produkte nebeneinander dargestellt werden, wenn der Platz dafür vorhanden ist. Es wird immer nur ein Produkt im Slider dargestellt:

 ![Bildschirmfoto vom 2023-05-06 13-10-22](https://europe1.discourse-cdn.com/flex013/uploads/shopware/original/3X/5/7/57d53c1e707e4a533dbdee332ddba86be6821d30.jpeg)

Wenn ich nun, via Chrome Dev-Tools in die mobile Ansicht wechsle und danach wieder zurück zur Desktop-Ansicht, stimmt es plötzlich:

 ![Bildschirmfoto vom 2023-05-06 13-13-07](https://europe1.discourse-cdn.com/flex013/uploads/shopware/original/3X/c/3/c3f3381ebfa7643de6e0240d5874d2344e61c258.jpeg)

Kann mir jemand ein Tipp oder ein Beispiel dafür geben. Vermutlich liegt es an irgendwelchen div’s und CSS. Aber trotz intensiver Suche bin ich nicht dahintergekommen.

Viele Grüße, Frank

---

<div class="post-metadata">

**Author:** ![haustechnik1](https://avatars.discourse-cdn.com/v4/letter/h/a6a055/32.png) [@haustechnik1](https://forum.shopware.com/u/haustechnik1)\
**Post date:** [20. September 2023 um 12:24 UTC](https://forum.shopware.com/t/cross-selling-als-additional-tabs-in-den-artikeldetails/99572/2 "2023-09-20T12:24:00Z")

</div>

Hallo Frank,  
hast du das mit der Anzeige zum Laufen bekommen?

---

<div class="post-metadata">

**Author:** ![Frank\_2812](https://avatars.discourse-cdn.com/v4/letter/f/b19c9b/32.png) [@Frank\_2812](https://forum.shopware.com/u/Frank_2812)\
**Post date:** [20. September 2023 um 13:06 UTC](https://forum.shopware.com/t/cross-selling-als-additional-tabs-in-den-artikeldetails/99572/3 "2023-09-20T13:06:11Z")

</div>

Hallo @haustechnik1 ,

im Nachgang hat sich herausgestellt, dass der Slider an der Stelle unpraktisch war, da relativ viele Artikel im Cross Selling zugeordnet sind.

Ich habe deshalb auf eine Liste mit Produktboxen umgestellt:

```auto
{% sw_extends '@Storefront/storefront/utilities/offcanvas.html.twig' %}

{% block utilities_offcanvas_content %}
    {% block page_product_detail_review_container %}
        {% block page_product_detail_cross_selling_tab_pane %}
            <div class="cms-element-product-listing">
                <div class="row cms-listing-row js-listing-wrapper">
                    {% for product in crossSellingSection.products %}
                        <div class="cms-listing-col col-sm-6 col-lg-4 col-xl-3">
                            {% sw_include '@Storefront/storefront/component/product/card/box.html.twig' with {
                                'product': product
                            } %}
                        </div>
                    {% endfor %}
                </div>
            </div>
        {% endblock %}
    {% endblock %}
{% endblock %}

```

Viele Grüße, Frank

---

<div class="post-metadata">

**Author:** ![appologic](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/appologic/32/23128_2.png) [@appologic](https://forum.shopware.com/u/appologic)\
**Post date:** [18. Dezember 2023 um 23:47 UTC](https://forum.shopware.com/t/cross-selling-als-additional-tabs-in-den-artikeldetails/99572/4 "2023-12-18T23:47:41Z")

</div>

Hi Frank, ich bin auch an der selben Stelle aktuell 🙂 Kannst du mir vielleicht bitte sagen welchen code du wo in welchem Pfad genau hinterlegt hast um die cross selling als tabs anzuzeigen ? Das wäre super 😊 Danke im Voraus

---

<div class="post-metadata">

**Author:** ![Frank\_2812](https://avatars.discourse-cdn.com/v4/letter/f/b19c9b/32.png) [@Frank\_2812](https://forum.shopware.com/u/Frank_2812)\
**Post date:** [19. Dezember 2023 um 08:43 UTC](https://forum.shopware.com/t/cross-selling-als-additional-tabs-in-den-artikeldetails/99572/5 "2023-12-19T08:43:12Z")

</div>

Hallo @appologic,

zuerst brauchst Du ein Plugin, oder eine eigenes Theme, damit Du die entsprechenden Templates anpassen kannst. Direkt im Standard-Theme (Shopware Core) zu ändern ist keine Option. Ich hoffe, das weißt Du?

In Deinem Plugin/Theme musst Du nun die tabs.html.twig entsprechend erweitern:

```auto
{% sw_extends '@Storefront/storefront/page/product-detail/tabs.html.twig' %}

{% block page_product_detail_tabs_inner %}
    <div class="card card-tabs" data-cross-selling="true"> 
        {{ parent() }}
    </div>
{% endblock %}

{% block page_product_detail_tabs_navigation_review %}

    {% if page.crossSellings.elements is defined and page.crossSellings.elements|filter(item => item.total > 0)|length > 0 %}
        {% for item in page.crossSellings|filter(item => item.total > 0 and item.crossSelling.active == true) %}
            {% set id = item.crossSelling.id %}

            <li class="nav-item">
                <a class="nav-link product-detail-tab-navigation-link"
                    id="tcs-{{ id }}-tab"
                    data-bs-toggle="tab"
                    data-offcanvas-tabs="true"
                    href="#tcs-{{ id }}-tab-pane"
                    role="tab"
                    aria-controls="tcs-{{ id }}-tab-pane"
                    aria-selected="true">
                    {{ item.crossSelling.translated.name }}
                    <span class="product-detail-tab-navigation-icon">
                        {% sw_icon 'arrow-medium-right' style {'pack':'solid'} %}
                    </span>
                </a>
            </li>

        {% endfor %}            
    {% endif %}

    {{ parent() }}
{% endblock %}

{% block page_product_detail_tabs_content_review %}

    {% if page.crossSellings.elements is defined and page.crossSellings.elements|filter(item => item.total > 0)|length > 0 %}
        {% for item in page.crossSellings|filter(item => item.total > 0 and item.crossSelling.active == true) %}
            {% set id = item.crossSelling.id %}

            <div class="tab-pane fade show"
                id="tcs-{{ id }}-tab-pane"
                role="tabpanel"
                aria-labelledby="tcs-{{ id }}-tab">

                {% sw_include '@Storefront/storefront/page/product-detail/cross-selling/cross-sellings.html.twig' with {
                    crossSellingSection: item
                } %}
            </div>

        {% endfor %}
    {% endif %}

    {{ parent() }}
{% endblock %}

```

Dann das eigene Template für die Anzeige eines Cross Sellings, welches in tabs.html.twig aufgerufen wird, also /page/product-detail/cross-selling/cross-sellings.html.twig:

```auto
{% sw_extends '@Storefront/storefront/utilities/offcanvas.html.twig' %}

{% block utilities_offcanvas_content %}
    {% block page_product_detail_review_container %}
        {% block page_product_detail_cross_selling_tab_pane %}
            <div class="cms-element-product-listing">
                <div class="row cms-listing-row js-listing-wrapper">
                    {% for product in crossSellingSection.products %}
                        <div class="cms-listing-col col-sm-6 col-lg-4 col-xl-3">
                            {% sw_include '@Storefront/storefront/component/product/card/box.html.twig' with {
                                'product': product
                            } %}
                        </div>
                    {% endfor %}
                </div>
            </div>
        {% endblock %}
    {% endblock %}
{% endblock %}

```

Am Ende musst Du noch das Original Shopware Cross Selling in der index.html.twig ausblenden:

```auto
{% sw_extends '@Storefront/storefront/page/product-detail/index.html.twig' %}

{% block page_product_detail_cross_selling %}
{% endblock %}

```

Viel Erfolg! Grüße, Frank

---

<div class="post-metadata">

**Author:** ![appologic](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/appologic/32/23128_2.png) [@appologic](https://forum.shopware.com/u/appologic)\
**Post date:** [19. Dezember 2023 um 16:06 UTC](https://forum.shopware.com/t/cross-selling-als-additional-tabs-in-den-artikeldetails/99572/6 "2023-12-19T16:06:44Z")

</div>

🙂 Bester Mann Frank\_2812

Danke dir Viiiieeeelllmmmaaaalllssss 🙂