Hallo,
ich möchte ev. vorhandene cross-sellings in die additional tabs der Produktdetails verlegen. Prinzipiell funktioniert dass auch:
{% 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:
Wenn ich nun, via Chrome Dev-Tools in die mobile Ansicht wechsle und danach wieder zurück zur Desktop-Ansicht, stimmt es plötzlich:
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
Hallo Frank,
hast du das mit der Anzeige zum Laufen bekommen?
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:
{% 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
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
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:
{% 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:
{% 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:
{% sw_extends '@Storefront/storefront/page/product-detail/index.html.twig' %}
{% block page_product_detail_cross_selling %}
{% endblock %}
Viel Erfolg! Grüße, Frank
1 „Gefällt mir“
Bester Mann Frank_2812
Danke dir Viiiieeeelllmmmaaaalllssss
