Eigene Templates in den Shopware 5 Shopseiten verwenden

Wer in Shopware 5 schon mal Shopseiten angelegt hat, dem ist gewiss aufgefallen, das es dort unter Einstellungen die Möglichkeit gibt eigene Templates für die Shopseite anzugeben.

shopware5-shopseite-einstellungen

In diesem Beispiel zeige ich wie man zwischen der Überschrift der Shopseite und Content (Text) der Shopseite ein eigenes Element einfügen kann, das dann auf allen gewünschten Shopseiten als statisches Element angezeigt wird. In diesem Fall ist das z.B. interessant für weiterführende Links mit Bildern. Anwendungsmöglichkeiten gibt es hier natürlich viele.

So soll das ganze dann aussehen (Das statische Element ist Rot umrahmt):

Eigenes Template für Shopware 5 Shopseiten anlegen – So gehts:

              1. Damit man sein eigenes Template hinterlegen kann muss man dieses zunächst anlegen. Über ein FTP Programm navigieren wir zu dem bestehenden Template der Shopseiten um davon eine Kopie zu erstellen. Das Template findet man unter dem folgenden Pfad: „/themes/Frontend/Bare/frontend/custom/index.tpl„.
              2. Diese Datei öffnen wir nun mit einem Programm wie z.B. psPad. Die Kopie speichern wir nun im selben Verzeichnis unseres eigenen Themes unter einem anderem Namen ab. Der Pfad dazu sieht wie folgt aus: „/themes/Frontend/myTheme/frontend/custom/beispiel.tpl„.
                (bitte myTheme gegen euren Theme Namen ersetzen.)Der Code des Templates sollte wie folgt aussehen:
              3. {extends file="frontend/index/index.tpl"}
                
                {* Breadcrumb *}
                {block name="frontend_index_start" append}
                {$sBreadcrumb = []}
                {if $sCustomPage.parent}
                 {$sBreadcrumb[] = [
                 'name' => {$sCustomPage.parent.page_title|default:$sCustomPage.parent.description},
                 'link'=>{url sCustom=$sCustomPage.parent.id}
                 ]}
                {/if}
                {$sBreadcrumb[] = [
                 'name' => {$sCustomPage.page_title|default:$sCustomPage.description},
                 'link'=>{url sCustom=$sCustomPage.id}
                ]}
                {/block}
                
                {block name="frontend_index_header"}
                 {include file="frontend/custom/header.tpl"}
                {/block}
                
                {* Main content *}
                {block name="frontend_index_content"}
                 <div class="custom-page--content content block">
                
                 {* Custom page tab content *}
                 {block name="frontend_custom_article"}
                 <div class="content--custom">
                 {block name="frontend_custom_article_inner"}
                 {* Custom page tab headline *}
                 {block name="frontend_custom_article_headline"}
                 <h1 class="custom-page--tab-headline">{$sCustomPage.description}</h1>
                 {/block}
                
                 {* Custom page tab inner content *}
                 {block name="frontend_custom_article_content"}
                 {$sContent}
                 {/block}
                 {/block}
                 </div>
                 {/block}
                
                 </div>
                {/block}
                
                {* Sidebar left *}
                {block name="frontend_index_content_left"}
                 {include file="frontend/index/sidebar.tpl"}
                {/block}
              4. Nun müssen wir dieses Template bearbeiten und nach unseren Wünschen anpassen. Wir löschen alles bis auf folgenden Code aus dem Template.

                Dieser Codebereich ist für die Anzeige des Shopseiten Inhaltes aus dem Backend verantwortlich:

                 {* Custom page tab inner content *}
                 {block name="frontend_custom_article_content"}
                 {$sContent}
                 {/block}
                 {/block}
                 </div>
                 {/block}
                
                 </div>
                {/block}
                
              5. Nun fügen wir über dem {$sContent} unseren gewünschten html Code ein. Das könnte dann wie folgt aussehen:
              6.  {* Custom page tab inner content *} 
                 {block name="frontend_custom_article_content"}
                 
                 <div class="beispiel">
                 
                 <div class="teaser"> 
                 <a href="#"><img src="http://www.beispiel.de/media/image/beispiel-teaser.jpg" alt="beispiel" title="beispiel" /></a>
                 <a class="block btn is--primary is--icon-right is--center is--large" href="http://www.beispiel.de/Kategorie/">Link 1 <i class="icon--arrow-right"></i></a>
                 </div>
                 
                 <div class="teaser"> 
                 <a href="#"><img src="http://www.beispiel.de/media/image/beispiel-teaser.jpg" alt="beispiel" title="beispiel" /></a>
                 <a class="block btn is--primary is--icon-right is--center is--large" href="http://www.beispiel.de/Kategorie/">Link 2 <i class="icon--arrow-right"></i></a>
                 </div>
                 
                 <div class="teaser"> 
                 <a href="#"><img src="http://www.beispiel.de/media/image/beispiel-teaser.jpg" alt="beispiel" title="beispiel" /></a>
                 <a class="block btn is--primary is--icon-right is--center is--large" href="http://www.beispiel.de/Kategorie/">Link 3 <i class="icon--arrow-right"></i></a>
                 </div>
                
                 <div class="teaser last"> 
                 <a href="#"><img src="http://www.beispiel.de/media/image/beispiel-teaser.jpg" alt="beispiel" title="beispiel" /></a>
                 <a class="block btn is--primary is--icon-right is--center is--large" href="http://www.beispiel.de/Kategorie/">Link 4 <i class="icon--arrow-right"></i></a>
                 </div>
                 
                 <div style="clear:both;"><!-- --></div>
                 </div> 
                 
                 {$sContent}
                 
                 {/block}
              7. Damit das ganze wie am oben dargestellten Beispielbild angezeigt wird müssen wir noch das CSS hinterlegen. Für die korrekte Darstellung in Mobil muss man Gegebenenfalls noch extra CSS Anpassungen machen.
                  .beispiel .teaser {  
                    float:left;
                    width:22%;
                    margin-right:3%;
                  }
                  
                  .beispiel .teaser img {  
                    margin: 0px auto;
                    padding-bottom:0.5rem;
                  }
                  
                  .beispiel .teaserlast {  
                    margin-right:0px !important;
                  }
                
              8. Eigenes Template der Shopseite hinzufügen. Wir fügen nun bei der gewünschten Shopseite in das Feld „Tpl. Variable 1“ und „Tpl. Pfad 1“  folgendes ein:

                Tpl. Variable 1: sContent
                Tpl. Pfad 1: frontend/custom/beispiel.tpl

                shopware5-shopseite-einstellungen-scontent
              9. Die Shopseite muss nun gespeichert werden.
              10. Als letztes müssen wir den Shopware Cache leeren und das Template Kompilieren. Anschließend sind die Anpassungen abgeschlossen.

Die Anwendungsmöglichkeiten der eigenen Shopseiten Templates sind sehr groß. Die Anpassungsmöglichkeiten gehen bis zu einer komplett selbst gestalteten Shopseite, die sich komplett vom restlichen Shopdesign unterscheidet. So ist es z.B. möglich Landingpages zu bauen, wenn einem die Einkaufswelten von Shopware 5 zu umständlich sind.