Button / Grafik in Header einfügen

Ich möchte gerne einen Button in meinem Header einfügen (z.B. für „kostenlose Lieferung“) Wie stelle ich das an? Mein Ansatz wäre ihn in die index.tpl einzubinden, aber an welche stelle? Ich zerschieße mir dabei immer nur die Struktur vom Shop und alles sieht etwas komisch aus… Hier ein Beispiel wie es später aussehen SOLL: Wär cool wenn mir jemand helfen könnte!

Ja mit Shopware5 wird alles ein wenig komplizierter mit dem eigenen Style. Jetzt muss man genau schauen in welchen Block man was anhängt und sie es sich min der Mobilen Ansicht auswirkt, oder gegebenenfalls dar nicht zu sehen sein soll. Das steht mir auch noch bevor, denn ich hatte im Header immer noch bei Bild zu den Versandkosten eingebunden. Für mich wäre es einfacher ein normales und ein mobiles Template zu haben statt das Responsive, aber da muß man jetzt durch und es ist auch nicht das letzte mal, das man sich mit was Neues beschäftigen muss.

[quote=„useg“]Für mich wäre es einfacher ein normales und ein mobiles Template zu haben statt das Responsive, aber da muß man jetzt durch und es ist auch nicht das letzte mal, das man sich mit was Neues beschäftigen muss.[/quote] Das ist doch möglich :slight_smile: Und zwar durch ein Plugin (welches ich gerade nicht im Store finde). Allerdings fraglich, ob es für die 5er weiterentwickelt wird. Ansonsten kannst du das über JavaScript o. ä. machen. Hier gibts Beispiele um Mobile Devices zu erkennen: http://detectmobilebrowsers.com/ Mit dem Script einfach die Template-Variable an die URL hängen. (Ungetestet in Shopware 5) Am besten ist es aber das über den Server zu machen, da es ja doch viele gibt, die JavaScript blocken. Viele Grüße.

[quote=„jonas3301“]Ich möchte gerne einen Button in meinem Header einfügen (z.B. für „kostenlose Lieferung“) Wie stelle ich das an? Mein Ansatz wäre ihn in die index.tpl einzubinden, aber an welche stelle? Ich zerschieße mir dabei immer nur die Struktur vom Shop und alles sieht etwas komisch aus… [/quote] Binde es doch so ein, wie das Logo eingebunden wird: [code]

Testshop - zur Startseite wechseln [/code] Ich würde lediglich das Bild/Icon bei der Mobilen Ansicht ausblenden, da der Header eh soviel Platz frisst. Also bsp: [code][/code] Du musst halt nur bei deiner Positionierung aufpassen, da diese nicht mehr statisch sind sonder "fluid". Grüße.
1 Like

Das war schonmal ein guter Ansatz, aber ein wenig häng ich noch in der Luft… In welcher Datei hättest Du es denn eingefügt, damit es rechts neben dem Shoplogo angezeigt wird?

Ich würde es in den logo-container packen: /themes/Frontend/deintemplate/frontend/index/logo-container.tpl

Wahrscheinlich stell ich mich nur dumm an… bin noch nicht so affin mit der responsive Geschichte wie gesagt :smiley: An welcher Stelle soll ich es da einfügen? Bzw. wie positioniere ich das? Bei mir landet es immer unter dem Logo…

Hallo, Ich habs mal so gemacht: [code] {* Main shop logo *} {block name=‘frontend_index_logo’}

[


                <img srcset="{link file=$theme.mobileLogo}" alt="{" name='shopName}"|escape}' namespace="frontend/index/index">
            </source></source></source></picture>]({url controller='index'} "{")

{/block}[/code] Das ganze schiebt sich allerdings dann unter die Suchleiste. Hierfür musst du dann eine eigene .css im Template anhängen oder ggf. die .LESS-Datei bearbeiten. Im .CSS müsstest du diese Klasse .header-main .logo-main{ width: 30% } abändern. Wäre eine Verkleinerung/Vergrößerung vom Logo. Dann folgende .header-main .logo-main .logo--shop{ width: 82% } hier auch wieder verkleinern/vergrößern. Und dann ist dein Icon eingebunden. Und wie gesagt, wenn Mobile detectet würde ichs ausblenden, sonst hast du ich vermute mal 2 Bilder (je nachdem wie breit diese sind) untereinander (Logo und Shipping-Icon). Hoffe dir damit geholfen zu haben.

Hat mir aufjedenfall schonmal geholfen! :thumbup: Ich habe jetzt den entsprechenden Block um folgendes ergänzt [code]


[/code] Die Grafik wird jetzt auch angezeigt allerdings hier… …und nicht da wo sie sein soll (wo der Rote Kasten ist). Auch experimentieren mit “width” in der entsprechenden less Datei macht halt nur das Logo kleiner bzw. größer, aber ändert nicht die Position der Grafik. Die Suchleiste hab ich aktuell raus genommen. Wenn ich mit dem Firebug allerdings die Maus über die “freie” Fläche halte sieht das so aus: kann da das Problem liegen vlt? Bin ein klein wenig ratlos grade :confused:

Schick mir mal per PN oder hier den Link zu deinem Shop. Dann kann ich das debuggen.

Hallo Leute, wäre euch sehr dankbar, wenn ihr das Thema nochmal ganz kurz erklären könntet. Ich würde auch sehr gerne, zwei weitere Icons/Bilder im Header einfügen und zwar unter den Button “Herz - Mein Konto - Warenkorb”. Wäre eine nette Sache wenn ihr mir hier aushelfen könntet. - In welche Datei gehört das geschrieben? - Könnte mir jemande bezüglich des Codes helfen? - Falls es möglich wäre für Desktop, Mobile und Ipad Ich sage jetzt schon mal DANKE :wink: Liebe Grüße, Michael Fuchs http://www.holzkult.at

Ist die Lösung nun sauber umgesetzt? Ist sicher für andere ebenfalls interessant. Gruß

Wenn Ihr mal ganz genau sagt, was Ihr alle haben wollt kann ich morgen ein Plugin schreiben.

Hallo Kayyy, vielen Dank für dein Engagement. Super :thumbup: Hier mal mein “Wunsch” Es geht im Prinzip um die Texte in dem roten Rahmen. Da gab es auch mal eine Anleitung für den 4er. Danach habe ich es mir dann erstellt. (Anlegen von Teasertexten) Ich hätte gerne quasi den Header im 5er Responsive wie der oben gezeigte aus meinem noch nicht produktiven 4er. Eine Anleitung würde mir schon reichen. (eigentlich wäre es toll, wenn der 5er so aussehen könnte wie oben mein 4er…) Nochmals danke für deine Hilfe. Grüße Michael

Okay - Ja eine Anleitung wäre in dem Falle besser als ein Plugin, da das ganze ja recht individuell ist. Außerdem würde es sich so auch in die Quere kommen mit dem Logo Plugin von uns. Ich schreibe im laufe des Tages einmal einen Beitrag, wie man das ganze so umsetzen kann wie das Tutorial von SW4. :thumbup:

Und schon ist dein Blog in meiner Favoriten Leisten :wink:

Hallo Kayyy, super danke. Wenn du (will nicht unverschämt sein) gleich auch noch, wie in der verlinkten Anleitung, erklären könntest wie man das Suchfeld, Merkzettel, Mein Konto und den Warenkorb hoch, neben das Feld Service/Hilfe verschieben kann. Oder, noch besser, dass Feld Service/Hilfe zwischen das Suchfeld und Merkzettel-Button und das alles (inkl. Mein Konto und den Warenkorb) oben am Rand. Wäre mehr als perfekt. Nur wenn der Aufwand dafür nicht zu groß ist. Danke :thumbup: :slight_smile: Grüße Michael PS: Im 4er, mit der “einfachen” CSS war das alles, auch ohne viel Ahnung, noch wirklich einfach im Gegensatz zu dem 5er Responsive… :oops:

Ich habe zwei Fragen zu dem Thema! Wie kann ich am besten eine Grafik neben meinem Logo einfügen? Habe die Suchleiste und alle anderen Buttons schon entfernt. Ich möchte jetzt quasi, dass der header aus Logo und einer Grafik besteht. Könnte mir das vielleicht einer erklären? Wäre echt super, wenn mir hier einer helfen könnte.

Hallo Liebe Leute, also ich hätte wie auf dem Bild gekennzeichnet gerne zwei Grafiken eingefügt. Über eine Erklärung bzw Anleitung wie das funktioniert, würde ich mich sehr freuen, irgendwie packe ich es alleine nicht. Dankeschön! Liebe Grüße, Michael