Nicht verändertes TabMenu bei Mobilansicht auf Detailseite

Shopware 5 Programmierung
1

Hallo,

 

ich versuche gerade das Tabmenu in der Mobilansicht genauso wie bei der Desktopansicht anzeigen zu lassen.

Also so:

 

anstatt so:

 

Ich habe bereits eine Javascript Datei in meinem theme mit folgendem Inhalt angelegt:

StateManager
	.removePlugin('.tab-menu--product .tab--container', 'swOffcanvasButton', {
            titleSelector: '.tab--title',
            previewSelector: '.tab--preview',
            contentSelector: '.tab--content'
        }, ['xs'])
	.addPlugin('.tab-menu--product', 'swTabMenu', ['xs'])

Die JS Datei ist auch bereits im Theme.php eingebunden.

 

Leider funktioniert höchstwahrscheinlich mein code nicht richtig. Da ich keine Ahnung von Javascript habe und nur per try and error bis hier hergekommen bin, würde ich mich sehr freuen wenn mir jemand bei meinem Problem helfen könnte.

 

Grüße 

David

2

Problem hat sich gelöst! :slight_smile: habe in meine detail.less noch folgenden quellcode gepackt:

.tab-menu--product .tab--header, .tab-menu--product .tab--preview {
    display: none;
}

.tab-menu--product .tab--navigation {
    display: block;
}

 

3

Top!!! Das hab ich ewig gesucht!!!

4

David vielen Dank für die Hilfe,

das hat grundsätzlich geklappt.

Leider stehe ich nun vor dem Problem, dass der Bewertungstab leer ist.

Hat jemand hierzu eine Idee wie ich dessen Inhalt anzeigen kann?

 

Zum Verständnis. Der Tab ist da und auch die Anzahl der Bewertungen werden angezeigt. Aber wenn ich darauf klicke, hat der Tab keinen Inhalt.

Nur in der Desktop Variante funktioniert der Tab.

 

Vielen Dank für die Hilfe und viele Grüße

5

Konnte es selbst lösen.

Hier die Lösung:

Die js Datei muss wie folgt aussehen, dann funktioniert alles wie auf dem Desktop.

StateManager
	.removePlugin('.tab-menu--product .tab--container', 'swOffcanvasButton', {
            titleSelector: '.tab--title',
            previewSelector: '.tab--preview',
            contentSelector: '.tab--content'
        }, ['xs'])
	.addPlugin('.tab-menu--product', 'swTabMenu', ['xs'])
	
	.removePlugin('a.link--publish-comment', 'swOffcanvasButton', {
           contentSelector: '#tab--product-comment'
        }, ['xs'])
		
		.addPlugin('.product--rating-link, .link--publish-comment', 'swScrollAnimate', {
            scrollTarget: '.tab-menu--product'
        },['xs'])