Ab sofort möglich
Kostenlos
dauerhaft, ohne laufende Kosten
Du kaufst die Lizenz direkt bei uns und bekommst eine Rechnung von uns. Installation per Upload im Admin ohne SSH, Updates über unsere Lizenzplattform, Support direkt vom Entwickler.
Read More Handbuch.
So klappst du lange Produktbeschreibungen elegant ein - mit weichem Fade, frei wählbarer Höhe und barrierefreiem Button.
Systemvoraussetzungen
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.
Installation
bin/console plugin:refresh
bin/console plugin:install --activate StawReadMoreDirect
bin/console cache:clear
bin/console assets:install
bin/console theme:compile
Das JavaScript kommt als vorgebautes Bundle mit, ein eigener Storefront-Build ist nicht nötig. Die Stile werden beim theme:compile ins Theme gemergt.
Konfiguration öffnen
Im Admin unter Erweiterungen, Meine Erweiterungen, StawReadMoreDirect, Konfiguration.
Alle Optionen im Überblick
Plugin aktiv Standard: an
Hauptschalter für das gesamte Plugin.
Max. Höhe Standard: 320 px
Sichtbare Höhe der Beschreibung im eingeklappten Zustand.
Min. Überschreitung Standard: 80 px
Erst wenn der Text die maximale Höhe um diesen Wert überschreitet, erscheint der Button.
Fade-Out aktiv Standard: an
Weicher Verlauf am unteren Rand des eingeklappten Bereichs.
Fade-Höhe Standard: 80 px
Höhe des Verlaufs.
Fade-Farbe Standard: #ffffff
Endfarbe des Verlaufs, sollte der Hintergrundfarbe der Seite entsprechen.
Button-Farbe Standard: #4f46e5
Akzentfarbe für den Umschalt-Button.
Button-Stil Standard: link
Textlink, Umriss oder gefüllt.
Nur Mobile Standard: aus
Einklappen nur unterhalb von 768 Pixeln Breite.
Status merken Standard: aus
Merkt sich pro Sitzung, ob aufgeklappt war.
Höhe und Auslöseschwelle
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.
Beispiel: Bei 320 Pixeln Höhe und 80 Pixeln Schwelle wird erst ab einer Texthöhe von 400 Pixeln eingeklappt. Ein Text von 350 Pixeln bleibt vollständig stehen, statt für 30 Pixel einen Button einzublenden.
Fade-Out
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.
Button-Stile
link
Reiner Textlink in der Akzentfarbe, am unauffälligsten.
outline
Umrandeter Button in der Akzentfarbe.
solid
Gefüllter Button in der Akzentfarbe.
Nur auf Mobilgeräten
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.
Status merken
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.
Warum das SEO-sicher ist
Der Text wird nicht aus dem Dokument entfernt, sondern per CSS über max-height verborgen. Suchmaschinen sehen also die vollständige Produktbeschreibung.
Der Unterschied zählt: Lösungen, die Text per JavaScript nachladen oder aus dem DOM entfernen, verlieren genau diesen Inhalt für die Indexierung. Hier bleibt er erhalten.
Barrierefreiheit
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.
Theming über CSS-Variablen
Für Feinanpassungen im Theme stehen vier Variablen bereit:
--staw-rm-max-height
--staw-rm-fade-height
--staw-rm-fade-color
--staw-rm-button-color
Technischer Aufbau
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.
Zur richtigen Twig-Datei: In Shopware existieren zwei Dateien mit dem Namen
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_.Problemlösung
Es wird nie eingeklappt
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.
Der Verlauf hat eine sichtbare Kante
Die Fade-Farbe stimmt nicht mit dem Seitenhintergrund überein. Auf farbigen oder dunklen Themes muss sie angepasst werden.
Nichts ändert sich nach der Installation
In der Regel fehlt theme:compile oder das Leeren des Caches. Prüfe außerdem, ob das eingesetzte Theme den genannten Twig-Block erbt.
Die Höhe stimmt nicht bei Produkten mit vielen Bildern
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.
Support
Fragen zur Einrichtung oder zur Anpassung an ein eigenes Theme beantworten wir gern. Schreib uns über die Kontaktseite oder an info@stoneandwater.online.
Über den Store oder direkt bei uns.
Zwei Wege, derselbe Funktionsumfang - such dir aus, was besser zu deinem Setup passt.
In Vorbereitung
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.
Bessere Produktdetailseiten?
Zurück zu Read More.
Alle Optionen findest du auf der Produktseite. Bei Einrichtung und Styling helfen wir gern.