Header-Design: Element über Top-Bar einfügen

Shopware 5 Themes & Design
1

Guten Abend, versuche mich gerade in SW5 einzuarbeiten, was eigentlich gut funktioniert. An einer Stelle will es aber partout nicht klappen. Ich würde gerne ganz oben über der Klasse „top-bar“ noch ein zusätzliches Div-Element (Farbbalken) einfügen. Ich nehme an, dass muss in die topbar-navigation.tpl, nur wird die Änderung beim kompilieren bisher nicht übernommen. Irgendjemand einen Tipp für mich? Vielen Dank im Voraus!

2

Hallo, wie sieht deine topbar-navigation.tpl aus? Schick die mal komplett. Danke

3

Ich würde es so versuchen: eine eigene farbbalken.tpl erstellen mit dem html-code und dann in der index.tpl einen neuen block anlegen und mit include file reinladen lassen. Ob das bei shopware5 noch so geht…? Bei der sw4 hatte ich es so gemacht.

1 „Gefällt mir“
4

Hallo, vielen Dank für die ersten Antworten. Ich hatte zuerst versucht, ganz oben einen neuen Div-Container drüber zu setzen, so dass die topbar-navigation.tpl (die bg-band Klasse ist von mir). Da ist aber leider gar kein Effekt zu sehen gewesen.

{* Top bar navigation *} {block name=“frontend_index_top_bar_nav”}

Ich werde es jetzt nochmal versuchen, wie von Markus vorgeschlagen. Bin gespannt und melde mich zurück :wink:

Danke!

5

Lege dir in frontend/index eine neue .tpl an. Nennen wir Sie ultimate-topbar.tpl Darein schreibst du deinen Code. Dann legst du noch eine index.tpl an in /frontend/index mit dem Inhalt {extends file="parent:frontend/index/index.tpl"} {block name='frontend\_index\_top\_bar\_container' prepend} {include file='frontend/index/ultimate-topbar.tpl'} {/block} fertig ist die Laube :wink: Somit wird deine eigene .tpl Datei vor der topbar.tpl Datei geladen mit deinem eigenen HTML Code. Alles natürlich in deinem eigenen Theme und nicht im Core Theme.

2 „Gefällt mir“
6

Vielen Dank, erst jetzt gesehen. Das ist natürlich noch eleganter, als meine Version :wink:

7

Hallo @Shopwareianer‍,

vielen Dank für den Beitrag. Er ist zwar schon älter, aber Hilfreich.
Ich habe aber nun folgendes Problem und hoffe die kannst mir dabei ebenfalls Helfen.

Ich möchte in die Blöcke die Daten aus einem Freitextfeld einfügen, also so das ich nicht ständig in den Code was ändern muss.
Leider finde ich dazu nichts, nur Freitextfelder, aber keine Textbausteine.
Ich habe das genau so umgesetzt wie Du es dort oben beschrieben hast und aus dem Netzt bin ich auf Folgenden Code gestoßen.
Es Zeigt auch alles schön an, nur wie kann ich das mit den Textbausteinen Implementieren?

 

	Responsive Test
	
	html {
		box-sizing: border-box;
	}
	*, *:before, *:after {
		box-sizing: inherit;
	}
	* {
		margin: 0;
		padding: 0;
	}
	body {
		font: 100%/1.5 sans-serif;
	}
	.wrapper {
		margin: 0 auto;
	}
	.box {
		width: 100%;
		border: 0px solid transparent;
		padding: 1em;
		float: left;
	}
	.cf:after {
		content: " ";
		display: table;
		clear: both;
	}
	@media only screen and (min-width: 700px) {
		.box {
			width: 50%;
		}
		.wrapper div:nth-child(3) {
			margin: 0 auto;
			float: none;
			clear: left;
		}
	}
	@media only screen and (min-width: 900px) {
		.box {
			width: 33.3333%;
		}
		.wrapper {
			max-width: 1000px;
		}
		.wrapper div:nth-child(3) {
			float: left;
			clear: none;
		}
	}



	
		Box 1
		Box 2
		Box 3

 

8

Nachtrag: die Textbausteine habe ich angelegt und folglich Benannt:

  • TOPBarBlockI
  • ​TOPBarBlockII
  • ​TOPBarBlockIII
9

ELEDIGT!
Hab es geschaft mit:

{s name='TOPBarBlockI' namespace="frontend/index/fultimate-topbar.tpl"}Textbaustein ABC{/s}

Für alle die was Ähnliches Suchen, hier der Code:
 

	Responsive Test
	
	html {
		box-sizing: border-box;
	}
	*, *:before, *:after {
		box-sizing: inherit;
	}
	* {
		margin: 0;
		padding: 0;
	}
	body {
		font: 100%/20px sans-serif;
	}
	.wrapper {
		margin: 0 auto;
	}
	.box {
		width: 100%;
		border: 0px solid transparent;
		padding: 1em;
		float: left;
	}
	.cf:after {
		content: " ";
		display: table;
		clear: both;
	}
	@media only screen and (min-width: 700px) {
		.box {
			width: 50%;
		}
		.wrapper div:nth-child(3) {
			margin: 0 auto;
			float: none;
			clear: left;
		}
	}
	@media only screen and (min-width: 900px) {
		.box {
			width: 33.3333%;
		}
		.wrapper {
			max-width: 1000px;
		}
		.wrapper div:nth-child(3) {
			float: left;
			clear: none;
		}
	}



	
		 {s name='TOPBarBlockI' namespace="frontend/index/fultimate-topbar.tpl"}Textbaustein ABC{/s} 
		 {s name='TOPBarBlockII' namespace="frontend/index/fultimate-topbar.tpl"}Textbaustein ABC{/s} 
		 {s name='TOPBarBlockIII' namespace="frontend/index/fultimate-topbar.tpl"}Textbaustein ABC{/s}

 

1 „Gefällt mir“