Dein Warenkorb ist leer

11.06.2018 Dropper Shorts

Bessere Titel für Artikellisten - Dropper Shorts #9

Wenn Artikellisten im JTL-Shop gefiltert werden, kann man das der Seitenüberschrift (H1) oftmals nicht entnehmen. Mit einem Plain Drop können wir dieses Problem jedoch lösen.

Gefilterte Artikellisten können in JTL-Shops mitunter verwirrend sein. Denn egal wie viele Filter man setzt, der Seitentitel bleibt davon unbeeindruckt. Nachfolgend ein Beispiel aus einem Demoshop: gesetzt sind 3 Merkmalfilter auf der Herstellerseite "JTL-Software".

Gefilterte Artikelliste im JTL-Shop - ohne Drop

Für die Orientierung wäre es sicher besser, wenn der Titel der Seite bereits darauf hindeutet, dass wir uns auf einer gefilterten Ansicht befindet.

Gefilterte Artikelliste im JTL-Shop - mit Plain Drop

Smarty im Plain Drop

Auch wenn es kein dediziertes Drop für diese Anforderung gibt, können wir zur Lösung auf unser Plain Drop zurückgreifen. Das versteht nämlich neben HTML auch Smarty!

Die Idee: wir sammeln aus den Smarty-Templatevariablen zunächst die Titel der jeweiligen Einstiegsseite ("JTL Software"), die Namen der aktiven Filter ("Grün", "saftig" und "knackig") und kombinieren diese letztendlich für unseren neuen, verbesserten Titel. Mit dem nachfolgenden Code erzeugen wir so die obige Ausgabe.

{strip}

    {assign var="titleSearch" value=""}
    {assign var="titleVendor" value=""}
    {assign var="titleVendorFilter" value=""}
    {assign var="titleCategory" value=""}
    {assign var="titleCategoryFilter" value=""}
    {assign var="titleFeature" value=""}
    {assign var="titleSpecialFilter" value=""}
    {assign var="titleSpecial" value=""}
    {assign var="titleFeatureFilter" value=""}
    {assign var="titleFallback" value=""}

    {* Search *}
    {if !empty($NaviFilter->Suche->cSuche)}{assign var="titleSearch" value='"'|cat:$NaviFilter->Suche->cSuche|escape:'html'|cat:'"'}{/if}
    {* Vendor *}
    {if !empty($NaviFilter->Hersteller->cName)}{assign var="titleVendor" value=$NaviFilter->Hersteller->cName}{/if}
    {if !empty($NaviFilter->HerstellerFilter->cName)}{assign var="titleVendorFilter" value=$NaviFilter->HerstellerFilter->cName}{/if}
    {* Category *}
    {if !empty($NaviFilter->Kategorie->cName)}{assign var="titleCategory" value=$NaviFilter->Kategorie->cName}{/if}
    {if !empty($NaviFilter->KategorieFilter->cName)}{assign var="titleCategoryFilter" value=$NaviFilter->KategorieFilter->cName}{/if}
    {* Feature(s) *}
    {if !empty($NaviFilter->MerkmalWert->cName)}{assign var="titleFeature" value=$NaviFilter->MerkmalWert->cName}{/if}
    {if !empty($NaviFilter->MerkmalFilter)}
        {foreach from=$NaviFilter->MerkmalFilter name="features" item=feature}{assign var="titleFeatureFilter" value=$titleFeatureFilter|cat:$feature->cWert}{if !$smarty.foreach.features.last}{assign var="titleFeatureFilter" value=$titleFeatureFilter|cat:", "}{/if}{/foreach}
    {/if}
    {* Special Products *}
    {if !empty($NaviFilter->Suchspecial->cName)}{assign var="titleSpecial" value=$NaviFilter->Suchspecial->cName}{/if}
    {if !empty($NaviFilter->SuchspecialFilter->cName)}{assign var="titleSpecialFilter" value=$NaviFilter->SuchspecialFilter->cName}{/if}

    {* Fallback if nothing matched before *}
    {if empty($titleSearch) and empty($titleVendor) and empty($titleCategory) and empty($titleFeature) and empty($titleSpecial)}
        {if !empty($Brotnavi)}
            {math equation="x-1" x=count($Brotnavi) assign="breadcrumbIndex"}
            {assign var="titleFallback" value=$Brotnavi[$breadcrumbIndex]->name}
        {else}
            {assign var="titleFallback" value=$meta_title}
        {/if}
    {/if}

    {* render in the order we want them *}
    {$titleFallback} {$titleSearch} {$titleVendor} {$titleVendorFilter} {$titleCategory} {$titleCategoryFilter} {$titleFeature} {$titleFeatureFilter} {$titleSpecial} {$titleSpecialFilter}

{/strip}

Der Code ist recht umfangreich, da er nahezu alle Fälle für den Einstieg in Artikellisten und deren Filter behandelt und dazu noch einige Fallbacks bietet. Beachtet hierzu die Kommentare.

Die Einfügeposition ist mit unseren Drop-Zones und der Methode Inhalte ersetzen leicht gesetzt, unser Plain Drop überschreibt so den Inhalt des <h1> Tags auf jeder Artikelliste.

Gefilterte Artikelliste im JTL-Shop - mit Plain Drop

Nicht vergessen: die Option Smarty evaluieren? muss im Plain Drop aktiviert sein.

Raum für Anpassungen

Natürlich bietet das Snippet Raum zur Optimierung: ihr könnt es zum Beispiel um zusätzliche Texte ("Produktfilter aktiv: ... ") erweitern, wenn ihr die entsprechenden Zustände vorher abfragt. Aus Gründen der Übersichtlichkeit haben wir aber die Ausgabe hier etwas einfacher gehalten.

Wichtig war uns hier zu zeigen, dass ihr schon mit dem in Dropper Bronze enthaltenen Plain Drop ein mächtiges Werkzeug in die Hand bekommt, mit dem ihr auch bestehende Inhalte eures JTL-Shops ohne Eingriff in das Template optimieren könnt.

Und was ist mit SEO?

Man könnte meinen, dass unser kleines Beispieldrop auch bei der Optimierung der Artikellisten für Suchmaschinen weiterhilft. Leider ist dem nicht so: der JTL-Shop verhindert standardmäßig die Indizierung von gefilterten Artikellisten. Unsere Erweiterung des Seitentitels verbessert also zunächst nur die Usability. Wer mehr will, muss noch den ein oder anderen zusätzlichen Schritt gehen. Aber das ist vielleicht eher ein Thema für einen anderen Beitrag.

Live in der Dropper Zone

Das hier vorgestellte Plain Drop findet ihr übrigens auch in der Dropper Zone, wo ihr alle Einstellungen und Ergebnisse noch ein wenig besser nachvollziehen und testen könnt. Für weitere interessante Beispiele schaut gern einmal in unsere Dropper Zone Sammlung im Wiki.