Neu Artikelbeschreibung - Tab-Control durch Collapse ersetzen

[Groundhog]

Hallo mal wieder,

Wir benutzen im Grund im Shop nur 2 Tabs. Zum einen die Beschreibung und dann die Bewertung. Da wir teilweise recht umfassende Beschreibungen haben und das am Handy einfach überladen wirkt überlegen wir das Tab Control umzubauen und ein Bootstrap Collapse zu realisieren. Das auf dem Mobiltelefon etwas angenehmer im Handling wie ich finde.

Nun zur Frage: Ist das ohne große Probleme umsetzbar und woran muss ich denken? Gibt es Stolperfallen oder sollte dies eigentlich problemlos möglich sein.

Sollte das Collapse doch zu nervenraubend sein, wäre mir schon geholfen, wenn sich in der -xs Darstellung die Tab Reiter nicht verstecken würden. Es sollten als Beschreibung und Bewertungen nebeneinander stehen bleiben. Derzeit wird am Handy ja kaskadiert. Ist dies über eine JS Funktion gesteuert oder übers Bootstrap Grid per CSS?

 

[razzio]

Uiiii, so viiiele Fragen auf ein Mal! Hallo Groundhog, ich empfehle zunächst am Desktopf die "Reiterei" beizubehalten und am Smartphone auf das Akkordeon zu wechseln wie Du es beschreibst.

Ich setze das so morgen bei uns hier um und könnte Dir dann mehr sagen. Es geht jedenfalls und Probleme sollte es auch nicht geben. Heute mache ich aber erstmal Feierabend.

 

[Groundhog]

Joar...wenn dann gleich richtig @razzio

Ja, wäre echt geil wenn du mir da aushelfen könntest.

 

[Groundhog]

Na @razzio ...gibts News??

 

[razzio]

Hallo Groundhog, ja, die gibt es. Es ist nicht so trivial wie ich zunächst dachte (...also wie immer ).
Ich setze mal voraus dass Du Dich mit Templating und JavaScript auskennst.
Also einfach gesagt: Man muss "nur" die im Evo an dieser Stelle eingesetzte bootstrap-tabdrop.js gegen die Bootstrap-Erweiterung bootstrap-tabcollapse.js austauschen. Dann funktioniert es.

Das Ergebnis ist am Desktop die übliche Tab-Navi, im Mobile-Modus wird diese zu einem Akkordion (Bootstrap-Deutsch: "Collapse").

Die Sources dazu findest Du hier: https://github.com/flatlogic/bootstrap-tabcollapse

Wie man die ganze Sache dann auch noch updatesicher macht, muss ich auch an anderer Stelle noch erfragen denn man muss ein wenig in den Evo-Core-Dateien herumfummeln was ich überhaupt nicht mag.

EDIT: Akkordions machen bei viel Inhalt der Karte am Handy auch keinen Spaß. Dafür kann man alternativ die Pills nutzen. Einfach mal in der ul die Klasse "nav-tabs" gegen "nav-pills" austauschen und schauen ob sich das evtl. besser anfühlt. Die Pills sehen aus wie "Tags" und brechen einfach um. Die dazugehörige Karte wird wie bei den Tabs drunter geladen und man muss sich nicht totscrollen. Einfach mal probieren.

Um eine ausführliche Anleitung hier bereitzustellen, fehlt mir im Moment leider die Zeit aber wenn Fragen aufkommen, helfe ich gerne weiter.