Neu <sections> erstellen

[Pumuckel]

Liebe Gemeinde,

ich habe mich als blutiger Anfänger so langsam in ein paar Spielereien eingearbeitet und das meiste funktioniert schon soweit - solange man es in CSS verwurschten kann.

Aber ich scheitere bisher immer noch an einem ganz grundlegenden Thema: Ich kann zwar HTML-Code produzieren, der tut, was er soll, aber ich weiß bis heute nicht, wie ich den irgendwo einfüge, ohne dafür Plugins zu verwenden.

Seit die grundsätzliche Funktionalität meines Shops gewährleistet ist, gehts natürlich jetzt um die Optik. Dafür habe ich angefangen, mir erstmal die HTML-Codes verschiedener Websites anzusehen. Einfaches Beispiel, das wir alle kennen, ist der JTL-Extension Store. Dort enthält <main> eine ganze Liste von <sections> und endet mit einem Standard-<div>, dem content-wrapper. Mit dem On-Page-Composer und den diversen PlugIns kann ich nur weitere <div> erstellen, wie bekomme ich aber zum Beispiel so eine <section> in mein <main>?

Weiterführung: Ich könnte ganz wunderbare <section>s schreiben, aber die helfen mir ja nix, wenn ich sie nirgends einfügen kann - wo und wie geht denn das?

Vielen Dank für Eure Hilfe!

 

[ecki]

Was willst du in einer <section> machen?

Dafür brauchst du ein Child-Theme.
Alles hierfür steht in der Dokumentation:
https://jtl-devguide.readthedocs.io/projects/jtl-shop/de/latest/shop_templates/index.html

 

[Pumuckel]

Hey Ecki,

danke für deine Antwort. Ich arbeite schon mit einem Child-Theme, darin kann ich auch alles mögliche machen - im Header und im Footer zum Beispiel. Aber im body nicht.

Beispiel: Ich kann kein Bild auf der Startseite einbinden. Das geht nur über den OnPage-Composer. Bzw. kann ich das zwar machen, indem ich eine eigene .tpl erstelle und einlesen lasse, aber es erscheint alles UNTER dem vom Shop generierten Inhalten, als UNTER <card>. Ich möchte wissen, wie ich ohne den OnPage-Composer hier gestalterisch tätig werden kann, indem ich einfach HTML-Code einlesen lasse. Ich finde aber den Ort nicht, an dem ich den HTML-Code schreiben muss, damit er in <main> eingelesen wird.

Vielleicht ist es jetzt klarer?

Beste Grüße!

 

[Pumuckel]

Liebe Community,


schade, dass mir keiner helfen konnte, ich habe nach langem Suchen jetzt selbst die Stelle gefunden - aber mir wäre viel erspart geblieben.

im Header.tpl:
{block name='layout-header-main-wrapper-starttag'}
<main id="main-wrapper" class="{if $bExclusive} exclusive{/if}{if $hasLeftPanel} aside-active{/if}">

-> Hier kann nun HTML-Text eingefügt werden, der oberhalb dessen angezeigt wird, was der Composer generiert.

 

[ecki]

Hallo,
Zeit ist leider Mangelware und man lernt recht viel, wenn man sich so durch den Code "pflügt".
Das ist immer Template abhängig. Damit der Rest updatefähig bleibt reicht es dies in dein Child zu schreiben:

{extends file="{$parent_template_path}/layout/header.tpl"}

{block name="layout-header-main-wrapper-starttag" prepend}
Mein Shop!
{/block}

---

Zur Info:

1. „Ersetzen“

{extends file="{$parent_template_path}/layout/header.tpl"}

{block name="head-title"}Mein Shop!{/block}

Hierbei wird der komplette Block ersetzt:

• Ursprüngliche Ausgabe: {$meta_title}
• Neue Ausgabe: Mein Shop!

2. „Text hängen“:

{extends file="{$parent_template_path}/layout/header.tpl"}

{block name="head-title" append} Mein Shop!{/block}

Hier wird der eingegebene Text an den meta-title der Seite angehängt:

• Ursprüngliche Ausgabe: {$meta_title}
• Neue Ausgabe: {$meta_title} Mein Shop!

3. „Text voranstellen“:

{extends file="{$parent_template_path}/layout/header.tpl"}

{block name="head-title" prepend}Mein Shop! {/block}

Hiermit wird der eingegebene Text dem meta-title der Seite vorangestellt:

• Ursprüngliche Ausgabe: {$meta_title}
• Neue Ausgabe: Mein Shop! {$meta_title}

 

[Pumuckel]

Super, vielen Dank! Ja, Zeit ist immer knapp leider.