Standardmäßig im Shopware ist der Sprachumschalter (welche die unterschiedliche Shopsprachen verwaltet) als Dropdown dargestellt und befindet sich ganz oben im Header innerhalb ein <div> Elements mit der Klasse "top-bar". Nach unserer Designvorlage aber muss er im Hauptnavigation rein und ungefähr so aussehen EN | DE.
Bei solchen Operationen ist immer gut, eine Lokal-Kopie von dem Shop zu haben. Dadurch können wir sicher sein, dass nichts wird auf der Originalversion zerstört wird, außerdem können wir leichter nach bestimmten Elementen in den Dateien suchen.
Erstens, um den Sprachumschalter auszublenden und den im Hauptmenu zu verschieben, suchen wir nach Elementen, die „top-bar--language“ enthalten.
In \themes\Frontend\Bare\frontend\index\topbar-navigation.tpl blenden wir das Code-Schnipsel {*action module=widgets controller=index action=shopMenu*} aus (auskommentieren)
Unter \themes\Frontend\Bare\widgets\index\shop_menu.tpl ändern wir das „Select Element“ zu „Liste“.
Im \themes\Frontend\Bare\frontend\index\main-navigation.tpl fügen wir {action module=widgets controller=index action=shopMenu} ein.
Das neue Element stylen wir in unserer .less Datei um. Damit das klappt, machen wir das Umstylen nach folgender Anleitung https://jsfiddle.net/vivekkupadhyay/Lrxo62d7/.
Wir selektieren die <input> Elemente nach type (input[type="radio"]):
body nav.navigation-main .top-bar--language li input[type="checkbox"], body nav.navigation-main .top-bar--language li input[type="radio"] {
display: none;
font-size: 2em;
padding: .5rem .875rem .5rem .875rem;
z-index: 9999;
}
Den <label> Elementen in \themes\Frontend\Bare\widgets\index\shop_menu.tpl weisen wir for=““ Eingeschaften (welche den id=““ Eigenschaften den jeweilige <input> Elemente entsprechen) zu , dadurch könnten diese als die schon ausgeblendete Radio-Buttons funktionieren. Dann stylen wir den Label-Elementen um:
body nav.navigation-main .top-bar--language li label {
font-weight: normal;
letter-spacing: 0.08rem;
color: #000;
}
Getestet in Shopware 5.3.4!
