So klappst du lange Produktbeschreibungen elegant ein - mit weichem Fade, frei wählbarer Höhe und barrierefreiem Button.
Shopware 6.7, mit 6.6 funktioniert es ebenfalls. Vorausgesetzt wird ein Storefront-Theme, das den Twig-Block component_product_description_content_text aus @Storefront/storefront/component/product/description.html.twig erbt - das trifft auf das Shopware-Standardtheme und die üblichen Ableitungen zu.
Das JavaScript kommt als vorgebautes Bundle mit, ein eigener Storefront-Build ist nicht nötig. Die Stile werden beim theme:compile ins Theme gemergt.
Im Admin unter Erweiterungen, Meine Erweiterungen, StawReadMoreDirect, Konfiguration.
Zwei Werte greifen ineinander. Die maximale Höhe bestimmt, wie viel Text sichtbar bleibt. Die minimale Überschreitung verhindert, dass der Button schon bei geringfügig längeren Texten erscheint.
Der Verlauf am unteren Rand signalisiert, dass der Text weitergeht. Wichtig ist die Fade-Farbe: Sie muss der Hintergrundfarbe an dieser Stelle entsprechen, sonst entsteht eine sichtbare Kante. Auf einem farbigen oder dunklen Theme also entsprechend anpassen.
Mit dieser Option greift das Einklappen erst unter 768 Pixeln Breite. Am Desktop bleibt die Beschreibung vollständig sichtbar. Sinnvoll, wenn der Platzmangel vor allem auf dem Telefon besteht.
Optional wird im sessionStorage vermerkt, ob der Kunde aufgeklappt hatte. Beim nächsten Produkt in derselben Sitzung bleibt der Text dann offen. Nach dem Schließen des Browsers ist der Zustand wieder zurückgesetzt.
Der Text wird nicht aus dem Dokument entfernt, sondern per CSS über max-height verborgen. Suchmaschinen sehen also die vollständige Produktbeschreibung.
Der Umschalter meldet seinen Zustand über aria-expanded, ist per Tastatur bedienbar und hat einen sichtbaren Fokusrahmen. Damit ist die Beschreibung auch ohne Maus und mit Screenreader zugänglich.
Für Feinanpassungen im Theme stehen vier Variablen bereit:
Das Plugin überschreibt den Twig-Block component_product_description_content_text. Ein PHP-Subscriber hängt sich an das ProductPageLoadedEvent und reicht die Konfiguration als Seiten-Erweiterung stawReadMore durch. Im Storefront registriert sich ein vorgebautes JavaScript-Bundle über den Shopware-PluginManager auf Elementen mit data-staw-read-more="true".
Die Höhe wird nach dem Laden von Bildern neu gemessen, damit sie nicht zu klein ausfällt. Ein ResizeObserver deckt den Fall ab, dass die Beschreibung anfangs in einem geschlossenen Tab oder Akkordeon liegt und daher keine messbare Höhe hat.
description.html.twig. Die unter page/product-detail/ ist seit 6.6.1.0 veraltet und wird in 6.7 nicht mehr gerendert. Aktiv ist die unter component/product/, erkennbar an den Blocknamen mit component_.Prüfe, ob der Text die maximale Höhe überhaupt plus Schwellwert überschreitet. Bei 320 plus 80 Pixeln passiert unterhalb von 400 Pixeln Texthöhe bewusst nichts.
Die Fade-Farbe stimmt nicht mit dem Seitenhintergrund überein. Auf farbigen oder dunklen Themes muss sie angepasst werden.
In der Regel fehlt theme:compile oder das Leeren des Caches. Prüfe außerdem, ob das eingesetzte Theme den genannten Twig-Block erbt.
Das Plugin misst nach dem Laden der Bilder neu. Bleibt es falsch, liegt die Beschreibung meist in einem Bereich, der beim Laden verborgen ist - dafür greift der ResizeObserver, sobald er sichtbar wird.
Fragen zur Einrichtung oder zur Anpassung an ein eigenes Theme beantworten wir gern. Schreib uns über die Kontaktseite oder an info@stoneandwater.online.
Jede Einstellung des Plugins mit Standardwert und Erklärung, in derselben Reihenfolge wie im Administrationsbereich. Die Texte stammen direkt aus dem Plugin (Version 1.0.17).
Schaltet das Einklappen langer Produktbeschreibungen im Shop ein oder aus.
Höhe in Pixeln, auf die eine lange Beschreibung eingeklappt wird. Darunter erscheint der Button zum Aufklappen.
Um wie viele Pixel der Text die maximale Höhe mindestens überschreiten muss, damit eingeklappt wird. Bei 320 und 80 wird erst ab 400 Pixeln eingeklappt; so bleibt kein kleiner Rest hinter einem Button versteckt.
Lässt den eingeklappten Text nach unten weich ausblenden, statt hart abzuschneiden.
Höhe des Verlaufs am unteren Rand des eingeklappten Texts in Pixeln.
Farbe, in die der Verlauf übergeht. Sollte zum Hintergrund der Beschreibung passen.
Farbe des Buttons zum Auf- und Zuklappen.
Aussehen des Buttons: als Textlink, mit Umriss oder gefüllt.
Ausrichtung des Buttons: links, mittig oder rechts.
Klappt auch die Eigenschaften-Tabelle unter der Beschreibung mit ein.
Weitere Bereiche der Produktseite, die mit eingeklappt werden sollen, als CSS-Selektoren mit Komma getrennt.
Einklappen auf Smartphones mit weniger als 768 Pixeln Breite.
Einklappen auf Tablets zwischen 768 und 991 Pixeln Breite.
Einklappen auf grossen Bildschirmen ab 992 Pixeln Breite.
Merkt sich, ob ein Kunde die Beschreibung aufgeklappt hat, für die Dauer der Browsersitzung.
Zwei Wege, derselbe Funktionsumfang - such dir aus, was besser zu deinem Setup passt.
dauerhaft, ohne laufende Kosten
Lade die kostenlose Plugin Suite herunter und spiele sie im Admin ein, ganz ohne SSH. Darüber installierst und aktualisierst du das Plugin mit einem Klick. Die Lizenz kaufst du direkt bei uns, mit Rechnung von uns und Support direkt vom Entwickler.
Das Plugin wird im offiziellen Shopware Community Store gelistet. Installation und automatische Updates laufen dann über den Plugin Manager im Backend, die Abrechnung über deinen Shopware-Account. Sobald verfügbar, verlinken wir es hier.
Alle Optionen findest du auf der Produktseite. Bei Einrichtung und Styling helfen wir gern.