Wie kann man in Shopware 5 ein eigenes Vorlagenlayout für Kategorieseiten erstellen?

Template Layout For Category Page
Shopware, Shopware 5

Bitte klicken Sie auf den unten stehenden Link, um das Thema zu erstellen.

Different ways of creating shopware 5 theme ?

So erstellen Sie Ihr eigenes Template-Layout auf der Shopware 5 Kategorieseite. Bitte folgen Sie den unten stehenden Schritten:

Der Standardeintrag sieht in der Regel wie folgt aus:

Schritt 1: Gehen Sie in das Shopware-Themenverzeichnis Ihrer Website.

Schritt 2: Erstellen Sie eine neue Datei im Themenverzeichnis mit dem Namen „article_listing_custom.tpl“.

Dateistruktur:-

themes>Frontend>Custom>frontend>listing>article_listing_custom.tpl.

Hinweis: Das benutzerdefinierte Verzeichnis ist das Thema, das ich bereits erstellt habe.

Schritt 3: In die Datei „article_listing_custom.tpl“ schreiben Sie diesen Code.

{extends file='parent:frontend/listing/index.tpl'}

{* Wrap the content into a new element *}
{block name='frontend_index_content'}
  <div class="custom-listing">
      {$smarty.block.parent}
  </div>
{/block}

{* Make the listing changes *}
{block name='frontend_listing_list_inline'}
  <div class="custom-listing--listing">
     {foreach $sArticles as $sArticle}
        {include file="frontend/listing/product-box/box-custom-basic.tpl" productBoxLayout="custom_basic"}
	 {/foreach}

  </div>
{/block}

Hinweis:-

  • In Zeile 1 erweitern wir die ursprünglichen „index.tpl“-Datei-Auflistungen.
  • Zeile 6: Wir umhüllen den Inhalt mit unserer eigenen Klasse, damit wir ihn später mit CSS ändern können.
  • Zeile 14: Unser Produktbox-Layout wird in unsere eigene Produktbox-Datei mit dem Inhalt „custom_basic“ übertragen.

Schritt 4: Erstellen Sie eine neue Datei namens „box-custom-basic.tpl“ im Verzeichnis „product-box“.

Schritt 5: Schreiben Sie diesen Code in die Datei „box-custom-basic.tpl“.

{extends file="parent:frontend/listing/product-box/box-basic.tpl"}

{* Product description *}
{block name='frontend_listing_box_article_description'}
    <div class="product--description">
        {$sArticle.description_long|strip_tags|truncate:200}
    </div>
{/block}

Schritt 6: Erstellen Sie eine neue Datei namens „custom-listing.less“ im Verzeichnis _modules.

Dateistruktur:

themes>Frontend>Custom>frontend>_public>src>less>_modules>custom_listing.less.

Schritt 7: Schreiben Sie diesen Code in die Datei „custom_listing.less“.

.custom-listing .box--custom_basic{
	width: calc(100% / 3);
}

Schritt 8: Erstellen Sie eine weitere Datei im less-Verzeichnis mit dem Namen „all.less“.

Schritt 9: Schreiben Sie diesen Code in die Datei all.less.

@import "_modules/custom_listing";

Schritt 10: Loggen Sie sich nun in das Admin-Panel ein und gehen Sie zu Konfiguration > Customer Streams.

Schritt 10: Klicken Sie auf das Frontend und gehen Sie zu den Kategorien/Listen.

Schritt 11: In Kategorien / Listen. Schreiben Sie „article_listing_custom.tpl: custom_listing; „ in Available listing layouts. Und klicken Sie auf die Schaltfläche „Speichern“.

Schritt 12: Gehen Sie nun auf den Punkt>Kategorien.

Schritt 13: Wählen Sie die Kategorien aus, die Sie anpassen möchten, und wählen Sie unter Individuelles Layout die Kategorie custom_listing.

Löschen Sie nun den Cache und prüfen Sie im Frontend die Kategorien, für die wir das individuelle Layout ausgewählt haben.

Ergebnisse: Wir haben eine 3-Spalten-Ansicht erstellt, die in etwa so aussehen wird:

Bitte kontaktieren Sie uns unter manish@bay20.com oder rufen Sie uns unter +91-8800519180 an, wenn Sie Unterstützung für Shopware 5 benötigen. Sie können auch die Shopware 5 Entwicklungsseite besuchen, um die von uns angebotenen Dienstleistungen zu überprüfen.