Shopware: Anpassung der Titel Länge in der Produktübbersicht

Shopware Lieferadresse in Rechnung ausweisen
21. Mai 2017
Artikel einfügen
16. Juni 2017

In jeder standardmäßigen Shopware Installation hat der Titel in der Produktübersicht (oder auch Produkt Listing genannt) nur eine Länge von zwei Zeilen. Oftmals haben Produkte jedoch einen längeren Titel und der Platz reicht nicht aus. In diesem Fall wird der Titel abgeschnitten und in der Übersicht endet der Titel mit einem (…). Was nicht besonders toll aussieht, lässt sich durch zwei kleine Anpassungen am Template korrigieren. Damit steht es einem frei, den Titel auf drei oder vier Zeilen zu verlängern oder natürlich auch umgekehrt, auf eine Zeile zu kürzen.

Schritt 1: Anzahl der Zeichen im Produkt Listing erhöhen

Das entsprechende Verzeichnis findet sich über den FTP an folgender Stelle: themes/Frontend/Bare/frontend/listing/product-box. Die gesuchte Datei heißt box-basic.tpl.

Ab ca. Zeile 36 findet sich in der Datei box-basic.tpl  folgender Abschnitt

{* Product name *}
{block name='frontend_listing_box_article_name'}
<a href="{$sArticle.linkDetails}"
class="product--title"
title="{$sArticle.articleName|escapeHtml}">
{$sArticle.articleName|truncate:60|escapeHtml}
</a>
{/block}

Zu verändern ist der Wert für truncate, mit welchem die Anzahl der Zeichen für den Titel definiert wird. Standardmäßig steht der Wert für truncate auf 60 und kann beliebig nach oben oder unten korrigiert werden. Ein Wert zwischen 80 und 100 Zeichen bietet sich für einen dreispaltigen Titel an. Nach der Anpassung wird die Datei wieder über den FTP hochgeladen

Schritt 2: Anzahl der Zeilen im Produkt Listing erhöhen

Nachdem die Anzahl der Zeichen erhöht wurde, muss nun die Anzahl der Zeilen erhöht werden, damit der längere Titel auch angezeigt werden kann. Wiederum über den FTP in dem Verzeichnis themes/Frontend/Responsive/frontend/_public/src/less/_modules findet sich die benötigte Datei product-box.less. 

Ab Zeile 146 in der Datei product-box.less findet sich der Abschnitt

.product--title {
.unitize-height(40);
.unitize-margin(0, 0, 5, 0);
.unitize(font-size, 16);
.unitize(line-height, 20);
display: block;
width: 100%;
color: @text-color-dark;
font-weight: bold;
overflow: hidden;

&:hover {
color: @link-color;
}
}

Über den Wert .unitize-height(…); kann die Anzahl der sichtbaren Zeilen angepasst werden. Standardmäßig steht dieser Wert in Shopware auf 40, was zwei Zeilen für den Titel entspricht. Wird der Wert für .unitize-height(…) auf 60 angepasst, entspricht das drei Zeilen. Nach der Anpassung wird die Datei wieder gespeichert und über den FTP hochgeladen. Nach dem leeren des Shop Cache sollte nun der Titel im Produkt Listing drei Zeilen haben. Dabei jedoch nicht vergessen, dass Template neu zu kompilieren, ansonsten werden die Änderungen nicht angewandt.

Über diese beiden Anpassungen lässt sich somit in Shopware der Titel im Produkt Listing anpassen.

Ähnliche Einträge