Shopware 5: Eigenen Tab in der Artikeldetail Ansicht

Shopware 5: Eigenen Tab in der Artikeldetail Ansicht

Die richtige Analyse und Strategie

Artikel-Attribute als Freitextfelder in Shopware hinzufügen

Erstmal müssen wir uns ein oder mehrere entsprechende Freitextfelder in Shopware anlegen. Dazu öffnen wir Einstellungen->Freitextfeld-Verwaltung. Als Tabelle wählen wir Artikel (s_articles_attributes) und klicken dann auf Hinzufügen. Ich habe mir mehrere Attribute vom Spaltentyp HTML Editor erstellt und den Spaltenname mit article_<attribute> benannt. Als Label dann die Bezeichnung, welche im Backend ausgeben werden soll und ein Haken bei Im Backend anzeigen: und einen bei Übersetzbar: gesetzt, da mein Shop in zwei Sprachen zur Verfügung steht. 
 

shopware freitextfeld verwaltung


Nun sollten die Felder, unten in der Übersicht des Artikels, im Backend zur Verfügung stehen. Diese können wir dann zum Testen mit Inhalt füllen und abspeichern.

Bezeichnung des Tabs hinzufügen

In den Textbausteinen können wir uns eine Variable anlegen oder eine bereits vorhandene verwenden. Unter Einstellungen->Textbausteine suchen wir nach dem Feld Newtabsdescription und setzen hier den Titel für unseren Tab. Ich habe dem Baustein den Titel Zusatzinformationen gegeben. Danach den Shopware Cache leeren.

Neuen Tab im Shopware-Template anlegen

Dazu legen wir in unserem Template die Datei tabs.tpl in /frontend/detail an.
 

{extends file="parent:frontend/detail/tabs.tpl"}

{* New tab *}
{block name="frontend_detail_tabs_description" append}
        <a class="tab--link" title="{s namespace="frontend/detail" name='NewTabsDescription'}{/s}" href="#">{s namespace="frontend/detail" name='NewTabsDescription'}{/s}</a>
{/block}

{* New Tab container *}
{block name="frontend_detail_tabs_content_description" append}
        <div class="tab--container">
            <div class="tab--header"><a class="tab--title" title="{s namespace="frontend/detail" name='NewTabsDescription'}{/s}" href="#">{s namespace="frontend/detail" name='NewTabsDescription'}{/s}</a></div>
            <div class="tab--preview">{$sArticle.attr4|strip_tags|truncate:100: '...'}<a href="#" class="tab--link" title="{s name="PreviewTextMore"}{/s}">{s name="PreviewTextMore"}{/s}</a></div>
            <div class="tab--content">{include file="frontend/detail/tabs/custom_tabs.tpl"}</div>
        </div>
{/block}


Mit append fügen wir den Blöcken unseren eigenen Code hinzu. Im Block frontend_detail_tabs_description übergeben wir den Namen NewTabsDescription. Diesen haben wir zuvor im Backend unter den Textbausteinen benannt. Im Block frontend_detail_tabs_content_description wird die custom_tabs.tpl includiert. Dazu mehr im nächsten Abschnitt.

Inhalt des Tabs im Shopware Frontend ausgeben

Dazu legen wir in unserem Template die Datei custom_tabs.tpl in /frontend/detail/tabs an. Ich habe für die Ausgabe eine Tabelle verwendet. Mit einer If-Abfrage überprüfe ich, ob der Wert für das jeweilige Attribute gesetzt ist {if $sArticle.article_<attribute>}{/if}. Mit {$sArticle.article_<attribute>} kann ich dann den Inhalt des Attributes übergeben.


{namespace name="frontend/detail/tabs/custom_tabs"}

<div class="buttons--off-canvas">
    <a class="close--off-canvas" href="#">
        <i class="icon--arrow-left"></i>
        Zurück
    </a>
</div>
<div class="content--description">
    {* Product description *}
    {block name='frontend_detail_description_text'}
        <div class="product--description" itemprop="description">
            <table class="options">
                <tbody>
                {if $sArticle.article_details}
                    <tr class="even">
                        <th class="label">Details</th>
                        <td class="data last">{$sArticle.article_details}</td>
                    </tr>
                {/if}
                {if $sArticle.article_dosierung}
                    <tr class="even">
                        <th class="label">Dosierung</th>
                        <td class="data last">{$sArticle.article_dosierung}</td>
                    </tr>
                {/if}
                {if $sArticle.article_hinweise}
                    <tr class="even">
                        <th class="label">Hinweise</th>
                        <td class="data last">{$sArticle.article_hinweise}</td>
                    </tr>
                {/if}
                {if $sArticle.article_inhaltsstoffe}
                    <tr class="even">
                        <th class="label">Inhaltsstoffe</th>
                        <td class="data last">{$sArticle.article_inhaltsstoffe}</td>
                    </tr>
                {/if}
                {if $sArticle.article_hinweistext}
                    <tr class="last even">
                        <th class="label">Warnhinweistext</th>
                        <td class="data last">{$sArticle.article_hinweistext}</td>
                    </tr>
                {/if}
                </tbody>
            </table>
        </div>
    {/block}
</div>


Das Ganze kann man dann noch in der less-Datei beliebig stylen. Im Frontend sieht das Ganze bei mir dann folgendermaßen aus. Der Tab für die Bewertungen ist bei mir nicht sichtbar, weil ich diesen entfernt habe.
 

shopware freitextfeld verwaltung


Meie custom.less sieht dabei für die Ausgabe der Tabelle im Frontend folgendermaßen aus:

/********************************************************************************
 * ARTICLE DETAIL START
 ********************************************************************************/

table.options {
  .label {
    background: none;
  }

  td, th {
    color: #555555;
  }

  table tr:nth-child(even) {
    background: #f5f5f5 !important;
  }
}

.base-info--entry.entry-attribute,
.content--description {
  img {
    float: left;
  }

  img:nth-of-type(2) {
    margin-right: 1.5rem;
  }

}

.tab--content .product--description h2 {
  margin-top: 0;
}

.configurator--variant .option--input:checked ~ label {
  background: rgba(182, 208, 81, 0.5);
}

li.base-info--entry,
.entry--label,
.entry--content,
.tab--navigation .tab--link
{
  font-family: open sans;
}


/********************************************************************************
 * ARTICLE DETAIL END
 ********************************************************************************/

Magento 2: Entwicklung eines eigenen Themes
Bildausschnitt mit CSS