Mi
11:37
Tag
2483
3539 views

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!



Bewerte diesen Beitrag auf blog.ff-webdesigner.de!

Produkttexte auf gekachelten Kategorien: 1 Stern2 Sterne3 Sterne4 Sterne5 Sterne 5,00 von 5 Punkten, basieren auf 2 abgegebenen Stimmen.
Loading...

6 Kommentare zu “ Produkttexte auf gekachelten Kategorien ”

Hallo,
kleiner Tip:
wenn du die mouseover.js zusätzlich noch in den Ordner /templates/IHRTEMPLATE/usermod/javascript/index/ ablegst, wird der effekt auch in den angezeigten Empfehlungen und Angeboten übernommen.

noch was:
statt $desc=str_replace(„\n“,““,$desc); müsste eigentlich
$desc=str_replace(„\n“,“ „,$desc); hin (leerzeichen zwischen den “ „) – dann klappts….

aber sonst eine super Arbeit, danke….

Kommentar von Christian am 5.9.2015

Hallo!

Ich habe leider ein Problem. Beim aufrufen kommt diese Fehlermeldung:
FATAL ERROR(1): „Using $this when not in object context“Information:


Zortrax Inventure 3D Drucker - VORBESTELLUNG

Fatal error: Using $this when not in object context in C:\xampp\htdocs\vor\includes\classes\Smarty\SmartyBC.class.php(468) : eval()'d code on line 2

Wisst ihr voran das liegen könnte?

Danke!

Kommentar von Jasna am 8.2.2016

Ich befürchte sie haben Version > 2.4? In dieser Version hat Gambio leider sehr viele früher über $this erreichbare template-variablen gelöscht. Es bleibt nur Umweg über die deutlich aufwändigere Class Overloading Technik. Wir helfen dabei gerne.

Kommentar von ff-webdesigner am 8.2.2016

Hallo!

Wir haben die Version 2.6 aber es funktioniert leider trotzdem nicht. Macht es Sinn es mit der Class Overloading Technik zu probieren?

Kommentar von Jasna am 8.2.2016

Wie ich vermutete, > 2.4. Class overloading ist das einzige, mit dem man sowas jetzt noch machen kann. Leider leicht vier mal so aufwändig wie vorher, und einen neuen Prototypen haben auch wir noch nicht entwickelt unter 2.6.

Kommentar von ff-webdesigner am 8.2.2016

Danke schon mal für die schnelle Antwort. Ich versuche es Mal mit dem Class Overloading. Mal sehen wie weit ich komme…

Kommentar von Jasna am 8.2.2016

Du hast was zu sagen? Dann schreib!

*

01
02