Tabs auf Detailseite als Slider darstellen

Shopware 6 (German)
1

Hallo zusammen,
wir haben unseren Shop von der Version 6.4 auf 6.6 geupdated.
Auf unserer Produkt-Detailseite haben wir im Template einen Slider eingebunden, bei dem jedoch die Navigationspfeile nicht mehr angezeigt werden. Hier wird der Slider eingebunden:
/custom/plugins/TelegymThemeAlt/src/Resources/views/storefront/page/content/product-detail.html.twig
{% block page_product_detail_cross_selling %}
{% if page.crossSellings.elements is defined and page.crossSellings.elements|filter(item => item.total > 0)|length > 0 %}


{% sw_include ‚@Storefront/storefront/page/product-detail/cross-selling/tabs.html.twig‘ with {
crossSellings: page.crossSellings
} %}

{% endif %}
{% endblock %}

…und hier das Template und die Config zum Slider:
/custom/plugins/TelegymThemeAlt/src/Resources/views/storefront/page/product-detail/cross-selling/tabs.html.twig

{% sw_extends ‚@Storefront/storefront/page/product-detail/cross-selling/tabs.html.twig‘ %}

{% block page_product_detail_cross_selling_tabs_inner %}


{% for item in crossSellings|filter(item => item.total > 0 and item.crossSelling.active == true) %}
{% set id = item.crossSelling.id %}

{% set config = {
‚title‘: {
‚value‘: item.crossSelling.name
},
‚border‘: {
‚value‘: false
},
‚rotate‘: {
‚value‘: false
},
‚products‘: {
‚value‘: item.getProducts()
},
‚boxLayout‘: {
‚value‘: ‚minimal‘
},
‚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: item.getProducts()
                        }
                    },
                    type: 'product-slider'
                }
            } %}
        </div>
    {% endfor %}
</div>

{% endblock %}

Hat jemand eine Idee, welche Einstellungen man setzten muss, damit die Pfeile wieder angezeigt werden? Wir haben schon alles mögliche versucht aber kommen zu keinem Ergebnis.

2

Bist Du sicher, dass das Template auch geladen wird? Bei SW 6.6 wird doch auf Produktseiten ein Layout angezeigt und nicht mehr die feste Page.
Also musst Du sicher ein neues Layout anlegen/duplizieren und dort die Navigation im Slider aktivieren.

3

Wie mein vorredner schon sagte wurde die produktdetailseite in 6.6 komplett neu aufgebaut. Die findest nun unter component

4

Durch das Überschreiben der product-detail.html.twig bauen wir das Layout nicht mittels Erlebniswelt, sondern direkt über das Template.
Das ist leider nötig, da die Detailseite sehr stark individualisiert wurde.
Der Slider wird auch angezeigt uns ist interaktiv, jedoch ohne Navigationspfeile.

5

Was steht denn im Frontend in den data-product-slider-options? Und hat der Produktslider die CSS-Klasse has-nav? Und sind genügend Produkte im Slider - also mehr als die sichtbaren?

6

Die product-slider-options sehen so aus:
class=„base-slider product-slider has-nav“
data-product-slider=„true“
data-product-slider-options=„{"productboxMinWidth":"300px","slider":{"controls":false,"nav":false,"mouseDrag":true,"autoplay":false,"autoplayButtonOutput":false,"autoplayTimeout":null,"speed":null,"ariaLive":true,"gutter":30}}“
role=„region“
aria-label=„component.cms.productGallery.ariaLabel“
tabindex=„0“

Seltsamerweise wird „nav“ auf „false“ gesetzt, obwohl wir das in der Config angeben:

            {% set config = {
                'title': {
                    'value': item.crossSelling.name
                },
                'border': {
                    'value': false
                },
                'rotate': {
                    'value': false
                },
                'products': {
                    'value': item.getProducts()
                },
                'boxLayout': {
                    'value': 'minimal'
                },
                'elMinWidth': {
                    'value': '300px'
                },
                'navigation': {
                    'value': true
                },
                'displayMode': {
                    'value': 'minimal'
                },
                'verticalAlign': {
                    'value': 'top'
                }
            } %}
7

Vielen Dank für die Hilfe, ich konnte es nun lösen. Folgendes musste ergänzt werden:

'navigationArrows': {
    'value': 'inside'
},
'speed': {
    'value': 300
}

Danke für den Hinweis mit den data-product-slider-options, so bin ich nun selbst drauf gekommen :blush:

1 „Gefällt mir“