Layoutveränderungen grundsätzliche Vorgehensweise

Hallo,

ich arbeite seit 2 Tagen mit Shopware (wurde von der Firma gekauft) und soll die Layout/Design-Umgestaltung der neuen Shopseite der Firma vornehmen.

html/css/php/jquery/javascript-Kenntnisse sind gut vorhanden (mache seit über 15 Jahren Websites, also praktisch im Schlaf).

Ich blicke allerdings im shopware-Layoutdesigndschungel überhaupt nicht durch. Die englische Anleitung für die Umgestaltung im frontend ist für mich nicht verständlich. Mir wäre es daher lieber, ich könnte css und vor allem auch die html-Struktur selbst aufbauen. Ist das irgendwie mit einfachen Mitteln möglich?  Wie kann ich z.B. Änderungen am html-DOM vornehmen? Gibt es eine deutschsprachige Anleitung?

Leider kommt vom Support keine Rückantort diesbezüglich.

Habe eben auch bemerkt, dass shopware alle class-Bezeichnungen für font-awesome umbenannt hat. Ich verstehe da den Sinn nicht. Habe schon mal versucht, eine eigene css über das header.tpl einzupflegen. Hat auch funktioniert, nur eben das font-awesome nicht mehr (nach genauerem hinsehen weis ich ja jetzt warum).

 

Gruß

Guen

 

 

@guen schrieb:

Hallo,

ich arbeite seit 2 Tagen mit Shopware (wurde von der Firma gekauft) und soll die Layout/Design-Umgestaltung der neuen Shopseite der Firma vornehmen.

html/css/php/jquery/javascript-Kenntnisse sind gut vorhanden (mache seit über 15 Jahren Websites, also praktisch im Schlaf).

Ich blicke allerdings im shopware-Layoutdesigndschungel überhaupt nicht durch. Die englische Anleitung für die Umgestaltung im frontend ist für mich nicht verständlich. Mir wäre es daher lieber, ich könnte css und vor allem auch die html-Struktur selbst aufbauen. Ist das irgendwie mit einfachen Mitteln möglich?  Wie kann ich z.B. Änderungen am html-DOM vornehmen? Gibt es eine deutschsprachige Anleitung?

Leider kommt vom Support keine Rückantort diesbezüglich.

Habe eben auch bemerkt, dass shopware alle class-Bezeichnungen für font-awesome umbenannt hat. Ich verstehe da den Sinn nicht. Habe schon mal versucht, eine eigene css über das header.tpl einzupflegen. Hat auch funktioniert, nur eben das font-awesome nicht mehr (nach genauerem hinsehen weis ich ja jetzt warum).

 

Gruß

Guen

 

 

Hallo,

durch das Blocksystem von Shopware kannst du ansich problemlos die HTML-Struktur ändern, erklärt kriegt man das sehr gut in den dazugehörigen Dokus: Getting started with Shopware templating .

CSS kannst du ebenso problemlos über das Erstellen eigener LESS-Dateien im eigenen Theme vornehmen, was hier auch sehr gut erklärt ist: Getting started with Shopware templating .

Wenn du die aufgeführten Anleitungen aber nicht verstehst (die sehr gut strukturiert und vor allem für einen Entwickler leicht verständlich sind), empfehle ich dir eine Shopware - Schulung: https://de.shopware.com/support/academy/ , vor allem die Template Training Schulungen.

Prinzipiell könntest du auch ein eigenes Theme auf Basis des Bare - Themes erstellen, müsstest dann aber alle Gestaltungen selbst vornehmen.

Da Shopware international ist, wird es auch keine offizielle nur deutschsprachige Anleitung geben, die gab es früher für Shopware 4 einmal, unter Shopware 5 ist die Doku-Sprache aber berechtigterweise englisch.

Beste Grüße

Sebastian

2 Likes

Hallo Sebastian,

danke für deine Rückmeldung aus der ich herauslese das man Änderungen nur über die *.tpl und less machen kann. Ich finde die *.tpl aber nirgendwo. Wo sind die tpl Dateien abgespeichert, damit man dort Änderungen vornehmen kann?

Gruß

Guen

PS: gibt es eine Liste mit verfügbaren *.tpl Dateien und für welchen Block genau die Datei ist?

@guen schrieb:

Hallo Sebastian,

danke für deine Rückmeldung aus der ich herauslese das man Änderungen nur über die *.tpl und less machen kann. Ich finde die *.tpl aber nirgendwo. Wo sind die tpl Dateien abgespeichert, damit man dort Änderungen vornehmen kann?

Gruß

Guen

Hallo,

du findest die tpl - Dateien im Bare - Theme Im Pfad unter „/themes/Frontend/Bare/frontend“ und dann eben in dem Ordner, in dem du Anpassungen vornehmen willst. Im Bare - Theme bzw. dessen Dateien sollte man aber niemals Änderungen vornehmen, da diese beim Update wieder verschwinden (können). Somit sollte man sich immer als ersten Schritt ein eigenes Theme erstellen, das vom Responsiven Theme von Shopware ableitet und dann über Vererbung, wie in den Dokumentationen beschrieben, die entsprechenden Blöcke anpassen (prepend, append oder komplett überschreiben). Die Less-Datei kann man sich ja ebenso problemlos erstellen, die dann auch im eigenen Theme abgelegt wird und dadurch updatesicher ist.

Eine Liste aller tpl - Dateien gibt es logischerweise nicht, da ja durch Updates immer mal wieder welche wegfallen oder dazukommen. Prinzipiell hat man ja aber auch immer alle in den Ordnern, somit sieht man ja, welche es gibt.

Und in einer tpl - Datei können auch unzählig viele Blöcke sein, da würde eine Liste ebenso keinen Sinn machen - vor allem da auch hier immer mal wieder welche dazukommen.

Beste Grüße

Sebastian

1 Like

Thumb-Up

Vielen Dank, habe die templates gefunden und soweit alles verstanden. Das hiflt mir schon mal sehr weiter.

Nur eine Frage hätte ich noch (ich hoffe ich überstrapaziere nicht deine Geduld Wink.

prepend append fügt vermutlich am Anfang oder Ende an, überschreiben würde ich vermutlich auch schaffen. Aber wie kann ich einen Block komplett woanders hinsetzen? Z. B. die Hauptnavigation nav in den header rein? Muss ich dazu den nav-block löschen und im header einen neuen Block einfügen? Geht das?

Gruß

Guen

@guen schrieb:

Thumb-Up

Vielen Dank, habe die templates gefunden und soweit alles verstanden. Das hiflt mir schon mal sehr weiter.

Nur eine Frage hätte ich noch (ich hoffe ich überstrapaziere nicht deine Geduld Wink.

prepend append fügt vermutlich am Anfang oder Ende an, überschreiben würde ich vermutlich auch schaffen. Aber wie kann ich einen Block komplett woanders hinsetzen? Z. B. die Hauptnavigation nav in den header rein? Muss ich dazu den nav-block löschen und im header einen neuen Block einfügen? Geht das?

Gruß

Guen

Hallo,

einen Block komplett verschieben kannst du in dem Sinne nicht - du müsstest dazu den bestehenden überschreiben (sozusagen ohne Inhalt auflisten) und dir eben an der anderen Stelle einen eigenen Block erstellen, indem du dann das implementierst, was der anderen Block implementiert hatte. Dazu müsstest du natürlich vorher prüfen, ob die Funktion dort überhaupt noch verfügbar ist.

Beste Grüße

Sebastian

1 Like

OK, das probiere ich einfach mal.

Ich hoffe, dass bei einem Update dann auch alles noch funktioniert und genauso bleibt.

Nochmals ganz vielen, lieben Dank für deine Hilfe.

Gruß

Guen

 

PS: die deutschsprachige Anleitung vermisse ich trotzdem Wink

Zum komplett verschieben könnte man auch die darüberliegende Ebene bearbeiten.

Wenn du den Block frontend_index_navigation in index/index.tpl überschreibst kannst du die darin liegenden Blöcke auch verschieben. Das kann durchaus sinnvoll sein, wenn man Plugins hat die diesen Block später erweitern, weil die Erweiterung dann mit dem ursprünglichen Element zusammen bleibt und nicht plötzlich irgendwo alleine steht, nämlich dort wo du den original-Block geleert hast.

1 Like

Die index.tpl sieht echt interessant aus. Ich glaube das ist genau das was ich suchte

Thumb-Up

@guen schrieb:

Die index.tpl sieht echt interessant aus. Ich glaube das ist genau das was ich suchte

Thumb-Up

Mit den templates bzw. tpl Dateien komme ich mittlerweile gut zurecht.

Habe aber noch große Schwierigkeiten mit der CSS/LESS Bearbeitung.  Crying

Grundsätzlich vorab: Soll man jetzt die vorhandenen less Dateien aus dem Responsive-Layout ändern? Soll man dort CSS oder Less schreiben? Oder soll man eine neue CSS/LESS Datei machen und dann mit der all.less darauf verweisen? Warum ist das alles so kompliziert gemacht worden? Warum hat man nicht einfach css-Layouts die man ändern kann wie man will, das wäre imho vieel einfacher. Es ist erstmal eine riesen Fuselei, überhaupt herauszufinden, welche .class man bearbeiten muss.

Was bedeutet eigentlich Compiler Caching Deaktivieren? Änderungen an den Less-Dateien bekomme ich nur zu sehen, wenn dort der Harken drin ist. Dann dauert aber das Laden so lange. Dann lade ich die Datei hoch und dann geht gar nichts mehr, heißt ich sehe die Seite komplett ohne css.

Die Anleitungen less finden mit Source map etc. habe ich alle schon gelesen, komme damit aber überhaupt nicht zurecht.

Ich hoffe jemand kann mir hier irgendwie einen Tipp geben, wie ich da eine Struktur reinbekomme.

Vielen Dank im Voraus.

Guen

 

 

PS:

Eventuell schreibe ich mal ein Beispiel was ich machen wollte.

Der border-bottom im header wird - so vermutete ich - in der _components/header.less festgelegt:

border-bottom: 1px solid @brand-primary;

Ich wollte nun im header einfach mal Änderungen probieren, z.B. den border-bottom ändern usw., nichts Großes.

Dazu habe ich folgenden Code in die header.less geschrieben und in meinem neuen Theme in das Verzeichnis _components kopiert:

// Basic header
.header-main {
    .unitize(padding-bottom, 0);
    background: #fff;
    border-bottom: 1px solid #ccc;

    // Hide the currency and language switcher
    .top-bar { display: none }

	// Logo
	.logo-main {
		.unitize-padding(0, 0);

		.logo--link {
			.unitize-height(35, 16);
			display: inline-block;
            max-width: 100%;
		}

		// Smaller logo for mobile viewports
		.logo--shop {
			.unitize-height(35, 16);
			width: 50%;
		}

		.logo--supportinfo { display: none; }
	}

    .header--navigation { position: relative; }
}

Die Datei in der all.less referenziert mit  @import „_components/header.less“. Weil keine Änderung angezeigt wurde den Harken bei Compiler Caching Deaktivieren reingemacht. Nun wird mir die Seite ohne jegliches Layout angezeigt.

 

@sschreier schrieb:
Hallo,

einen Block komplett verschieben kannst du in dem Sinne nicht - du müsstest dazu den bestehenden überschreiben (sozusagen ohne Inhalt auflisten) und dir eben an der anderen Stelle einen eigenen Block erstellen, indem du dann das implementierst, was der anderen Block implementiert hatte. Dazu müsstest du natürlich vorher prüfen, ob die Funktion dort überhaupt noch verfügbar ist.

Beste Grüße

Sebastian

Hi Sebastian und vllt auch andere, die sich damit auskennen ;),

ich habe mir das auch in etwa so gedacht, wie du das geschrieben hast. Nur klappt das bei mir nicht wie gewünscht.
Die „index.tpl“ habe ich wie gewöhnlich in mein eigenes Template kopiert und nur die gewünschten Blöcke integriert, bzw. erweitert. Jetzt würde ich gerne die Breadcrumb nicht direkt im Bereich " {block name=‚frontend_index_content_main‘}…{/block}" haben, sondern etwas weiter innen verschachtelt nämlich an folgender Stelle " {block name=‚frontend_index_content_wrapper‘}…{/block}". Das Problem ist nun, wenn ich den Block für die Breadcrum leere, sprich den Block für die Breadcrumb ohne Inhalt einfüge und den Originalblock dann an meine gewünscht Stelle setzen möchte, dann wird die Breadcrumb gar nicht mehr angezeigt.

{block name='frontend_index_breadcrumb'}
    //kein Inhalt
{/block}


{block name='frontend_index_content_wrapper' prepend}
    {block name='frontend_index_breadcrumb'}
  
            
                {block name='frontend_index_breadcrumb_inner'}
                    {include file='frontend/index/breadcrumb.tpl'}
                {/block}
            
  
    {/block}
{/block}

Wenn ich aber ein Prepend bei dem normalen Teil einfüge, so wird die Navigation natürlich zwei mal angezeigt. Was mache ich falsch?

{block name='frontend_index_breadcrumb' prepend}
      // kein Inhalt. Jedoch hat der Block hier ein "prepend erhalten"
{/block}


{block name='frontend_index_content_wrapper' prepend}
    {block name='frontend_index_breadcrumb'}
  
            
                {block name='frontend_index_breadcrumb_inner'}
                    {include file='frontend/index/breadcrumb.tpl'}
                {/block}
            
  
    {/block}
{/block}

VG Janine