Produkttexte auf gekachelten Kategorien

Gambio GX2 bietet von Haus aus zwei verschiedene Arten der Produktdarstellung auf den Kategorieseiten. Die Standardansicht zeigt jeweils ein Produkt in einer Zeile mit einem Kurzbeschreibungs-Text. Diese Ansicht ist gut für SEO, da Google auf den wichtigen Kategorieseiten Texte findet. Aber die Übersicht für den Kunden ist schlecht, er muss viel scrollen.

Die gekachelte Anischt auf Gambio GX2 Kategorieseiten zeigt hingegen mehrere (i.d.R. vier) Produkte in einer Zeile ohne Beschreibungstext. Der Kunde hat zwar eine gute Übersicht, aber Google findet auf den SEO-technisch wichtigen Kategorieseiten keine Produkttexte. Das Kann man doch besser machen, oder?

Ja! Ich zeige Ihnen heute zwei Methoden, wie man Usability und SEO auf den Gambio Kategorieseiten perfekt gestaltet. Die erste Methode zeigt einen Auszug der Produktbeschreibung immer sichtbar innerhalb der Produktbox auf den Kategorieseiten inclusive “Weiterlesen” Link an. Die zweite Methode ist noch etwas feiner: Beim Mouseover auf ein Produkt werden dynamisch mittels JQuery im HTML unsichtbar (aber von Google gewertete!) Auszüge aus den Produktbeschreibungen angezeigt.

Produktbeschreibungen auf Gambio Kategorieseiten – statisch

Bei dieser Methode zum einbauen von Produkttexten auf der gekachelten Ansicht von Gambio GX2 Kategorieseiten müssen sie Anpassungen an nur einer Datei vornehmen, und dann noch etwas CSS ergänzen.

Zu editierende Datei: /templates/IHRTEMPLATE/objects/product_boxes_list.html

Legen Sie als erstes ein Backup der Datei unter /templates/IHRTEMPLATE/objects/product_boxes_list-USERMOD.html an. Die USERMOD Technik führte Gambio mit der Version GX2 ein. Liegt eine Datei mit der Endung -USERMOD vor, so wird diese von Gambio GX2 für’s Template anstatt der regulären Datei verwendet. Vorteil für Sie: nach

Updates am Shopsystem bleiben ihre Änderungen erhalten. Allerdings müssen Sie natürlich den Code ggf. geänderter regulärer Dateien mit Ihrer -USERMOD Datei vergleichen und wenn nötig dort einbauen.

Nehemen Sie nun folgende Änderungen an der neu erstellten Datei vor. Suchen Sie nach

<p class="title"><a href="{$module_data.PRODUCTS_LINK}"{if $module_data.PRODUCTS_META_DESCRIPTION != ''} title="{$module_data.PRODUCTS_META_DESCRIPTION|truncate:80:"..."|replace:'"':'&quot;'}"{/if}>{$module_data.PRODUCTS_NAME|truncate:$content_data.TRUNCATE_PRODUCTS_NAME:"..."}</a></p>

Fügen sie danach folgenden Code ein:

 <p class="short_desc mo_{$module_data.PRODUCTS_ID}">{* mod ff auszug aus products_description als kurzbeschreibung auf kategorien *}
                        {php}
                        $ff= ($this->get_template_vars()); //smarty template variablen an php übergeben
                        $desc=$ff['module_data']['PRODUCTS_DESCRIPTION']; // = produktbeschreibung
                        $desc=str_replace("\n","",$desc); //umbrüche entfernen
                        $desc=strip_tags($desc); //html tags entfernen
                        $tmp=substr($desc,0,300); //auf 300 Zeichen am leerzeichen kürzen
                        echo substr($tmp,0,strrpos($tmp," "))." ";
                        {/php} ... [<a href="{$module_data.PRODUCTS_LINK}">Details</a>]
                    </p>

Als nächste brauchen wir noch etwas Styling für den eben neu auf den Gambio GX2 Kategorieseiten eingefügten Auszug aus der Produktbeschreibung. Auch hierfür eignet sich die USERMOD Technik hervorragend. Erstellen Sie eine neue CSS-Datei unter /templates/IHRTEMPLATE/usermod/css/gekachelt.css.

Fügen Sie in diese Datei folgenden CSS Code ein:

.short_desc{font-size:11px !important;height:70px;overflow:hidden;margin-bottom:0;-webkit-hyphens: auto;-moz-hyphens: auto;-ms-hyphens: auto;hyphens: auto;}
.short_desc a{color:#333;text-decoration:none;font-weight:700 !important;-webkit-hyphens: none;-moz-hyphens: none;-ms-hyphens: none;hyphens: none}

Grössen und Abstände können Sie natürlich anpassen. Für meinen Shop funktionierten eben diese Grössen gut. Gehen Sie nun in den Shop-Admin und leeren Sie den Seitencache. Nach dem neu laden des Frontends erscheint auf den Kategorieseiten der gekachelten ansicht nunmehr neu der Auszug aus der Produktbeschreibung. Achten Sie bitte darauf, nicht zuviel Duplicate Content zu generieren. Ein Wiederholen des gesamten Produkttextes auf den Kategorieseiten ist sicher weder gute Usability noch SEO.

Produktbeschreibungen auf Gambio Kategorieseiten – dynamisch

Geht’s denn nicht noch besser? Ja! Wir sparen uns noch mehr Platz auf der gekachelten Kategorieansicht von Gambio GX2, wenn wir den Auszug aus den Produktbeschreibungstexten nur bei Mouseover über das Produkt anzeigen – ähnliches macht Gambio ja schon mit den Vorschaubildern der Produkte. Zusätzlich zu den obigen Änderungen sind hierbei noch ein paar weitere Anpassungen nötig. Zuerst müssen wir jeder einzelnen Produktbox eine einmalige ID zuweisen. Suchen Sie in der Datei /templates/IHRTEMPLATE/objects/product_boxes_list-USERMOD.html nach

<div class="article-list-item">

Ersetzen Sie dieses durch

<div class="article-list-item" id="p_{$module_data.PRODUCTS_ID}">

{$module_data.PRODUCTS_ID} ist ein sogenannter Smarty-Tag. Gambio verwendet Smarty für zahlreiche Template-Variablen, und an dieser Stelle können wir vorzüglich die bereits definierte Variabel {$module_data.PRODUCTS_ID} zum einfügen einer eindeutigen HTML/CSS ID für die übergeordnete Produktbox verwenden.

Da wir nicht jeder einzelnen Produktbox einen Code-aufblasenden “OnMouseOver” und “OnMouseOut” Methode anhängen wollen,verwenden wir ganz frech die bereits in Gambio GX2 integrierte JQuery Bibliothek. JQuery bietet uns die Möglichkeit, einfach bestimmte HTML-Elemente im nachhinein und von einer zentralen Datei aus mit OnMouseOver / OnMouseOut – Funktionen zu versehen.

Auch hierbei hilft uns wieder die Gambio GX2 Usermod Technik. Erstellen Sie die Datei /templates/IHRTEMPLATE/usermod/javascript/cat/mouseover.js . Fügen Sie darin folgenden Code ein:

$( ".cols .article-list-item" ).mouseover(function() {
	$(".cols #"+this.id+" .short_desc").show();
});
$( ".cols .article-list-item" ).mouseout(function() {
	$(".cols #"+this.id+" .short_desc").hide();
});

Zuletzt müssen wir noch das CSS-Styling anpassen. Die neue Box mit dem Auszug aus der Produktbeschreibung soll ja nicht immer angezeigt werden, sondern nur bei MouseOver – und zwar über der Seite schwebend. Löschen Sie zunächst das oben für die statische Variante verwendete CSS. Stattdessen verwenden Sie in der Datei /templates/IHRTEMPLATE/usermod/css/gekachelt.css folgenden Code:

.cols .article-list-item{position:relative;overflow:visible !important}
.cols .article-list-item .title{margin-bottom: 0 !important}
.short_desc{display:none;position:absolute; z-index:2; padding:5px; top:175px; left:-70px;font-size:14px !important;-webkit-hyphens: auto;-moz-hyphens: auto;-ms-hyphens: auto;hyphens: auto;background:#fff !important;box-shadow:-1px 1px 5px 1px #999; border:1px solid #666;border-radius: 5px;width:240px !important}
.short_desc a{color:#333;text-decoration:none;font-weight:700 !important;-webkit-hyphens: none;-moz-hyphens: none;-ms-hyphens: none;hyphens: none}
.short_desc a:hover{color:#000}

Die CSS- und Javascript-Dateien werden automatisch und ohne den Cache zu leeren von Gambio ins System integriert und führen nunmehr dazu, dass bei Mouseover auf den Produkten der Kategorieseiten (gekachelte Ansicht) jeweils eine neue Box schwebend eingeblendet wird – perfekt für Usability UND SEO. Ein Demo der Modifikation finden Sie auf den Kategorieseiten von www.silberundco.de!

Sie haben Probleme beim Einbau oder benötigen weitere Anpassungen? Die ff-webdesigner helfen gerne! Rufen Sie uns am besten gleich an!