Suche und Service/Hilfe ausblenden, stattdessen Main-Navigation nach oben verschieben

So da jetzt mein Erweitertes Menü endlich funktioniert und ich es auch bereits zentriert habe, kann es mit dem nächsten Schritt weitergehen, wo ich - mal wieder - aufm Schlauch stehe. Ich möchte oben im Shop die Elemente „Suche“ und „Service/Hilfe“ komplett ausblenden (auf dem Bild schwarz umrundet), das Herzchen Icon rausfetzen und Log-In sowie Warenkorb (auf dem Bild rot umrundet) auf die Größe des Herzchens bringen. Wenn ich nur „dislpay: none;“ verwende, bleiben die konturen der Flächen leider vorhanden. Die Main Navigation sollte dann nach oben „rutschen“, wo jetzt die Suche ist… aber da ich da mal wieder nicht weiterkomme: bräuchte ich mal wieder nen Schubbser…

 

ich sag schon mal Danke :slight_smile:

Grüße von der Mopi

 

Ich habe die Lösung für mein Problemchen leider immer noch nicht gefunden. Muss aber auch sagen, dass ich mich mit less noch nicht soooo gut auskenne und nicht so viel traue zu ändern… zumindest nicht so ganz ohne Unterstützung. Ich hoffe, dass jemand so nett ist und sich meiner annimmt. Ich sage auch ganz artig: Danke schön  Blush

Ich rate dir direkt in Blockstruktur der Engine zu gehen. Da die Zeile (Suche + Icons) in einer

stecken, bringt dir der Weg über das reine LESS keine saubere und ordentliche Lösung. Kannst es da höchstens über absolute Positionierung machen - aber ich rate davon ab.

Als Laie würde ich aber auch nicht so in den Blöcken rumspielen…einige Plugins könnten bei falscher Bearbeitung nicht mehr funktionieren, künftige Updates nicht richtig laufen oder Funktionen einschränken.

Hast du bereits Erfahrungen mit der Smarty Engine und dem Block- und Vererbungsaufbau von Shopware?

@Mopi71 schrieb:

Ich habe die Lösung für mein Problemchen leider immer noch nicht gefunden. Muss aber auch sagen, dass ich mich mit less noch nicht soooo gut auskenne und nicht so viel traue zu ändern… zumindest nicht so ganz ohne Unterstützung. Ich hoffe, dass jemand so nett ist und sich meiner annimmt. Ich sage auch ganz artig: Danke schön  Blush

Hallo,

die sauberste Lösung ist immer, die Blöcke dafür zu entfernen, wenn dieser Bereich überhaupt nicht mehr genutzt werden soll (beispielsweise bei langsam ladenden Shops, damit es nicht kurzzeitig doch angezeigt wird).

Dazu musst du ein eigenes Theme erstellen und in der entsprechenden Datei über die Shopware Vererbung den Block überschreiben ( Getting started with Shopware templating ), beispielsweise das Ausblenden des Service/Hilfe - Bereichs über eine Datei topbar-navigation.tpl in Verzeichnis “frontend/index” mit dem Inhalt:

{extends file="parent:frontend/index/topbar-navigation.tpl"}

{block name='frontend_index_checkout_actions_service_menu'}
{/block}

Um den Bereich dann noch zu verkleinern, müsstest du eine eigene LESS-Datei mit folgendem Inhalt erstellen ( Getting started with LESS ):

.header-main > .top-bar {
    display: none;
}

Wenn du das ganze “von den Profis” lernen möchtest, empfehle ich dir die “Template Training” - Shopware - Schulungen: https://de.shopware.com/Academy/list .

Beste Grüße

Sebastian

1 Like

Danke euch beiden

Guten Morgen

@sschreier‍ irgendwie funktioniert das alles nicht… 

Um den Bereich dann noch zu verkleinern, müsstest du eine eigene LESS-Datei mit folgendem Inhalt erstellen ( https://developers.shopware.com/designers-guide/less/#using-less-in-your-theme ):

.header-main > .top-bar {
display: none;
}

 

 

ist damit die all.less gemeint, oder muss ich eine andere *.less Datei erstellen? Es ist mal wieder typisch Montag… wahrscheinlich steh ich voll aufm Schlauch :-/

 

Danke schon mal

Viele Grüße von der Mopi 

In der all.less importierst du nur weitere less-Files.
Alles was du in der all.less brauchst ist z.B. folgender Inhalt:

@import „header“;

Zusätzlich erstellst du dann in diesem Verzeichniss eine Datei namens „header.less“ und einen Ordner namens „_header“.

In der header.less importierst du wiederrum alle less-Files, welche sich im Ordner _header befinden, z.B. so:

@import „_header/navigation“;

Die LESS Anpassungen für die Navigation kannst du dann z.B. in die navigation.less im Ordner „_header“ einbauen.

Mann kann natürlich alle Änderungen direkt in die all.less einbauen, aber um eine saubere Struktur zu haben, wird es eher so empfohlen wie oben beschrieben.

1 Like

@iLuHa schrieb:

In der all.less importierst du nur weitere less-Files.
Alles was du in der all.less brauchst ist z.B. folgender Inhalt:

@import “header”;

Zusätzlich erstellst du dann in diesem Verzeichniss einen Ordner namens “_header” und eine Datei namens “header.less”.

In der header.less importierst du wiederrum alle less-Files, welche sich im Ordner _header befinden, z.B. so:

@import “_header/navigation”;

Die LESS Anpassungen für die Navigation kannst du dann z.B. in die navigation.less im Ordner “_header” einbauen.

 

OK dann hab ich das zumindest schon mal richtig verstanden. Ich habe jetzt alles so gemacht, wie Sebastian das schrieb. Ich habe im frontend/index eine Datei  topbar-navigation.tpl erstellt mit folgendem Inhalt:

{extends file=“parent:frontend/index/topbar-navigation.tpl”} {block name=‘frontend_index_checkout_actions_service_menu’} {/block}

 

 ich habe bereits eine Datei namens header.less unter _modules erstellt (um das Logo anzupassen). Müsste ich also in diese Datei folgenden Inhalt einfügen?

.header-main > .top-bar {

display: none;

}

 

Wenn ja: muss dabei noch etwas stehen oder einfach diese Zeilen am Ende der Datei (oder am Anfang? ) einfügen? Wenn nicht: wie gehe ich da am besten vor?

 

Sorry, wenn euch meine Fragen bisschen komisch (oder gar dumm) vorkommen. Wie an anderer Stelle bereits erwähnt, mache ich jetzt ein Praktikum und leider bin ich in meinen Aufgaben ziemlich auf mich allein gestellt :frowning: Da muss ich jetzt aber durch und hoffe auf euer verständnisvolle Hilfe :slight_smile:

Lieben Dank schon mal für Eure Mühe

Grüße von der Mopi

Das spielt eigentlich keine Rolle ob am Anfang oder am Ende, empfehlen würde ich es am Ende einzufügen, falls in der gleichen Datei die gleiche Stelle bereits vorkommen sollte, werden deine Änderungen dann nicht überschrieben.

Es reicht wenn du den Code so wie genannt dort einfügst.

Du musst nur sicher gehen, dass du auf der gleichen Ebene wie die all.less eine modules.less hast, in der modules.less die „_modules/header“ importierst und in der all.less die „modules“ importierst.

Damit die Änderungen wirksam werden, muss das Template über das Backend neu kompoliert werden.

@iLuHa schrieb:

 

Du musst nur sicher gehen, dass du auf der gleichen Ebene wie die all.less eine modules.less hast , in der modules.less die „_modules/header“ importierst und in der all.less die „modules“ importierst.

 

 

Ah okay ich versuchs mal… eine modules.less hab ich noch nicht… ich melde mich dann gleich wieder

:slight_smile:

 

 

@iLuHa schrieb:

In der all.less importierst du nur weitere less-Files.
Alles was du in der all.less brauchst ist z.B. folgender Inhalt:

@import “header”;

Zusätzlich erstellst du dann in diesem Verzeichniss eine Datei namens “header.less” und einen Ordner namens “_header”.

In der header.less importierst du wiederrum alle less-Files, welche sich im Ordner _header befinden, z.B. so:

@import “_header/navigation”;

Die LESS Anpassungen für die Navigation kannst du dann z.B. in die navigation.less im Ordner “_header” einbauen.

Mann kann natürlich alle Änderungen direkt in die all.less einbauen, aber um eine saubere Struktur zu haben, wird es eher so empfohlen wie oben beschrieben.

Hallo,

sooooo kompliziert musst du es aber auch gar nicht machen. Die Ordner und Dateien hat Shopware nur so angelegt, um eine gewisse Übersicht zu schaffen, auch für sich selbst. Dies ist aber auch kein muss, dies so fortzusetzen.

Es würde auch vollkommen ausreichen, eine all.less zu erstellen und diese mit dem Inhalt:

@import "style";

zu füllen und im selben Verzeichnis eine style.less zu erstellen, die dann deinen CSS-Code enthält, beispielsweise:

.header-main > .top-bar {
    display: none;
}

Es geht aber natürlich auch über das Ordner- und Dateigeflecht.

Nur bei den Template-Dateien und Shopware Blöcken muss man sich “an die Regeln halten”, damit alles klappt.

Beste Grüße

Sebastian

War auch nur eine Empfehlung für eine bessere Struktur :slight_smile:
Habe ja auch dazu erwähnt, dass man im Prinzip auch alles direkt in der all.less machen könnte.

hm… 

modules.less erstellt, alle Dateien aus dem _modules Verzeichnis in die modules.less importiert, diese dann in die all.less. Wenn ich mein Theme komplieren will, kommt ne Fehlermeldung. Ich habe die Struktur mit dem von der original responsive Theme verglichen, kann nix entdecken, was die Fehlermeldung auslösen könnte… 

hier meine Dateien:

 

 

Jetzt bekomme ich ständig diese Fehlermeldung beim Kompilieren… selbst, wenn ich alles wieder auf die alte Struktur bringe. Ich könnt schon wieder **** *harharhar*

 

@Mopi71 schrieb:

hm… 

modules.less erstellt, alle Dateien aus dem _modules Verzeichnis in die modules.less importiert, diese dann in die all.less. Wenn ich mein Theme komplieren will, kommt ne Fehlermeldung. Ich habe die Struktur mit dem von der original responsive Theme verglichen, kann nix entdecken, was die Fehlermeldung auslösen könnte… 

hier meine Dateien:

image

image

 

 

Hallo,

du sollst ja auch auf keinen Fall irgendwelche Dateien aus dem Responsiven Theme kopieren. Der Sinn der Vererbung von Shopware ist ja, das durch die Vererbung diese Daten (CSS, Blöcke) etc. so und so zur Verfügung stehen und nicht noch einmal in das eigene Theme übernommen werden müssen.

Wie erwähnt: nimm meine Lösung mit der all.less und style.less, die ist für dich vielleicht etwas verständlicher.

Beste Grüße

Sebastian

Kopiert hab ich ja nicht. Nur die Struktur übernommen. alle less dateien wo ich was ändere werden selber erstellt und ggf. erweitert. 

@Mopi71 schrieb:

Kopiert hab ich ja nicht. Nur die Struktur übernommen. alle less dateien wo ich was ändere werden selber erstellt und ggf. erweitert. 

Hallo,

siehe oben.

Der Fehler wird sicher auch kommen, da du:

@import "modules"

mit in die all.less reingeschrieben hast. Es gibt aber bei dir wahrscheinlich gar keine modules.less - Datei in deinem eigenen Theme, sondern nur das Verzeichnis, das mit _ anfängt (_modules). Und ein Verzeichnis kannst du nicht importieren, sondern nur LESS-Dateien. Wie gesagt, nimm meine Variante, die ist für dich vielleicht eher nachvollziehbarer.

Warum der Fehler aber bei dir kommt, wird eher an dem fehlenden Semikolon hinter @import „modules“ kommen.

Beste Grüße

Sebastian

das habe ich schon rausgelöscht. Habe ich zunächst erstellt, nachdem iLuHa das schrieb. Danach trat die Fehlermeldung zum ersten Mal auf. Habe dann, nachdem ich gelesen habe, was du geschrieben hast, von wegen nicht so kompliziert machen etc. 

Aber die Fehlermeldung bleibt… 

so sieht meine all.less jetzt aus:

@Mopi71 schrieb:

das habe ich schon rausgelöscht. Habe ich zunächst erstellt, nachdem iLuHa das schrieb. Danach trat die Fehlermeldung zum ersten Mal auf. Habe dann, nachdem ich gelesen habe, was du geschrieben hast, von wegen nicht so kompliziert machen etc. 

Aber die Fehlermeldung bleibt… 

so sieht meine all.less jetzt aus:

image

Hallo,

wie gesagt: SEMIKOLON fehlt , hier in dem Fall hinter @import “style”. Der Fehler ist also nachvollziehbar. Man sollte einfach auch aufpassen, was und wie man es kopiert. Ebenso ist die Frage offen, ob du überhaupt eine header.less im _modules - Verzeichnis drin hast…

Beste Grüße

Sebastian

 

Warum der Fehler aber bei dir kommt, wird eher an dem fehlenden Semikolon hinter @import „modules“ kommen.

Beste Grüße

Sebastian

 

 

haha… genau… und ich starre auf den Code und seh den Wald vor all den Bäumen nicht^^ OK Fehlermeldung weg, Seite sieht aus, wie vorher *lach* ich krieg bald nen Krampf ^^