Mehrfaches Einbinden von Inhalt-Bausteinen

Mehrfaches Einbinden von Inhalt-Bausteinen

Die Templates sind so gestaltet, dass jeder Baustein bei Bedarf nicht nur mehrfach genutzt werden kann, sondern auch einen eigenen relativ einfach erstellt werden kann. Wie das geht, kläre ich in diesem Artikel.

Bestehenden Baustein mehrfach einbinden

Nehmen wir an, du möchtest den USP-Bereich auch im Footer angezeigt haben.


Der USP-Bereich wird standardmäßig nur auf der Startseite angezeigt. Dafür ist die Vorlage „ /page/index.tpl“ verantwortlich. Diese schauen wir uns etwas genauer an:
  1. {get_navigation_full linkgroupIdentifier='templateUSP' assign='Actioncontainer'}
  2. {if isset($Actioncontainer)}
  3. <section class="panel panel-default actions wow bounceInDown animated">
  4.     <div class="row">
  5.     {foreach name=tplAction from=$Actioncontainer->Links item=Link}
  6.         <div class="col-xs-12 col-sm-6 col-md-3">
  7.             <div class="wrap">
  8.                 {get_cms_content kLink=$Link->kLink}
  9.             </div>
  10.         </div>
  11.     {/foreach}
  12.     </div>    

  13. </section>
  14. {/if}

Was ist zu tun?

Als Erstes, da wir diesen Baustein mehrfach verwenden möchten, empfielt es sich ihn in eine Extra-Datei auszulagern.

  1. Erstelle im Child-Template unter /snippets/ eine neue Datei namens „usp.tpl„. Fall es den Ordner „snippets“ noch nicht gibt, erstelle einen.
  2. Packe den Inhalt, welcher weiter oben aufgeführt ist, in die Datei und speichere sie ab.
Jetzt haben wir den USP-Bereich in eine Datei ausgelagert, die sich relativ einfach über include einbinden lässt. Nachfolgend ein Beispiel anhand des Footers: 

Ich füge den USP-Bereich direkt nach der Newsletter-Leiste, so, dass dieser zwischen dem Newsletter und „Über uns“-Zeile zu sehen ist.

  1. Öffne die Vorlage „/layout/footer.tpl“ in deinem Child-Template.
  2. Füge nach der Zeile mit {extends …} diese Zeile ein:
  1. {block name="footer-teaser"}
  2.     {include file='snippets/usp.tpl'}
  3.     {$smarty.block.parent}
  4. {/block}
Da den USP-Bereich direkt nach „ .row“ eingefügt ist, muss unsere Anweisung um eine Spalte (Grid-System) erweitert werden. Ich ergänze unser Code weiter oben, wie folgt:
  1. {block name="footer-teaser"}
  2.     <div class="col-xs-12">
  3.         {include file='snippets/usp.tpl'}
  4.     </div>
  5.     {$smarty.block.parent}
  6. {/block}

Das Ergebnis sieht jetzt, wie folgt aus:

An weiteren Stellen einbinden

Du kannst den USP-Bereich per include-Befehl überall einbinden, wo du ihn hinhaben möchtest. Achte allerdings darauf, dass alle Anpassungen nur im Child-Ordner zu machen sind.
  1. {include file='snippets/usp.tpl'}

Wie kann ich einen weiteren Bereich einrichten?

  1. Erstelle im Shopbackend unter <Inhalte <Eigene Seiten> eine neue Linkgruppe z.B. „Produktdetails„.
  2. Erstelle in der Gruppe eine neue Seite z.B. „Vorteile„.

Der Templatename ist der Name welcher im Template später zur Identifikation benötigt wird. Bitte hier keine Leerzeichen oder Sonderzeichen verwenden.

Wir gehen wieder wie oben vor und erstellen eine neue Dateivorlage „ cms_inhalt.tpl". Die Vorlage legen wir im Child-Template, im Verzeichnis /snippets ab.

Der Inhalt der Vorlage sieht wie folgt aus:

  1. {if isset($Identifier)}
  2.     {get_navigation_full linkgroupIdentifier=$Identifier assign='Actioncontainer'}
  3.     {if isset($Actioncontainer)}
  4.         {foreach name=tplAction from=$Actioncontainer->Links item=Link}
  5.             {get_cms_content kLink=$Link->kLink}
  6.         {/foreach}
  7.     {/if}
  8. {/if}
Jetzt können wir unsere Vorlage im Template einbinden und den Namen der Linkgruppe an die Datei  übergeben:
  1. {include file='snippets/cms_inhalt.tpl' Identifier='Produktdetails'}
Ausgegeben werden uns die Inhalte der Linkgruppe „ Produktdetails".


    • Related Articles

    • Eigenen Javascript Code im Template einbinden

      In diesem Beispiel zeigen wir, wie du im Template im Footer einen eigenen Javascript Code einbinden kannst.  Eine neue Footer-Vorlage anlegen Falls du in deinem Child-Template noch keine Footer-Vorlage hast, ist es jetzt an der Zeit eine zu ...

    • Eigene Icons einbinden

      In diesem Beispiel zeigen wir wie du ein Warenkorb-Icon im Template durch ein anderes austauschen kannst. Passendes Icon aussuchen Im Template sind Fontawesome-Icons der Free Version 5.1 verbaut. Wir überschreiben das vorhandene Icon mit unserem ...

    • Inhalt der Template-Zip-Datei

       Die heruntergeladene Template ZIP-Datei enthält folgende Ordnerstruktur: /Installation /Blueprints/ /Plugins/ /Sprache/ /Templates TemplateName.zip MyTemplateName.zip /Sprache eng_xxx.slf ger_xxx.slf Ordner: Installation Dieser Ordner beinhaltet ...

    • Hinweis in der Topbar einfügen oder bearbeiten

      In der Topbar ist es möglich zwischen dem Google Translator und den Links einen individuellen Hinweis anzuzeigen. Hinweis einfügen / bearbeiten Der Hinweis im JTL-Shop 5 ist standardmäßig nicht belegt und kann über die Sprachverwaltung eingefügt ...

    • Weitere Flaggen im Template definieren

      Alle Templates beinhalten standardmäßig nur zwei Flaggen für deutsch und englisch. Möchte man seinen Shop um weitere Sprachen erweitern, so kommt man um eine Anpassung des CSS-Codes nicht herum. Etwas Hintergrundwissen… Beim Einbinden einer weiteren ...