Gravur-Konfigurator auf der Produktseite
- Schaltfläche mit Preis ab: Auf der Produktseite erscheint eine Personalisierungs-Schaltfläche mit dem niedrigsten Preis unter den aktivierten Gravurarten, und wenn sich die Preise unterscheiden, wird der Preis mit dem Wort „ab“ versehen.
- Kostenlose Gravur mit durchgestrichenem Betrag: Wenn irgendeine Gravurart den Preis null hat, wird neben der Schaltfläche ein Hinweis auf die kostenlose Personalisierung angezeigt, und der reguläre Betrag bleibt durchgestrichen sichtbar.
- Konfigurator-Fenster: Die Personalisierung erfolgt in einem modalen Fenster auf derselben Seite, ohne den Kunden zu einem separaten Formular weiterzuleiten und ohne die zuvor gewählte Produktkombination zu verlieren.
- Drei Arten der Personalisierung: horizontale Gravur, vertikale Gravur sowie Symbol oder Icon, jeweils mit eigenem Preis, eigenem Zeichenlimit und eigener im Preset gespeicherter Schriftgröße.
- Zwei Gravurpositionen: Der Kunde wählt die Anordnung „von unten“ oder „mittig“ innerhalb des festgelegten Bereichs, wodurch sich sowohl ein Text unter einem vorhandenen Aufdruck als auch ein zentrierter Text umsetzen lässt.
- Durch die Benutzeroberfläche erzwungene Reihenfolge der Schritte: Textfeld, Schriftauswahl und Bestätigungsschaltfläche werden erst nach Auswahl der Gravurart eingeblendet, und die Bestätigungsschaltfläche bleibt inaktiv, bis die Personalisierung vollständig ist.
- Zeichenzähler: Das Textfeld zeigt laufend die Anzahl der eingegebenen Zeichen im Verhältnis zum für die gewählte Gravurart geltenden Limit an.
Vorschau auf dem Produktbild, im Browser gerendert
- Rendering auf dem Canvas-Element: Die Vorschau wird clientseitig in der Auflösung des als Mockup verwendeten Bildes erzeugt und nach jeder Änderung von Text, Schriftart, Position, Gravurart oder ausgewähltem Icon aktualisiert.
- Text auf die Oberfläche des Gegenstands gelegt: Das Modul berechnet die Anordnung der Buchstaben für jedes Zeichen einzeln unter Berücksichtigung der Oberflächenkrümmung, sodass ein Schriftzug auf einer Tasse, Flasche oder einem anderen gewölbten Gegenstand nicht wie eine flache Auflage wirkt.
- Vorschau identisch mit dem, was in die Bestellung übernommen wird: Derselbe Rendering-Mechanismus erzeugt das bei der Bestellung gespeicherte Bild, sodass Kunde und Werkstatt denselben Effekt sehen.
- Schriftarten bei Bedarf geladen: Die Schriftdateien werden erst beim Öffnen des Konfigurators geladen und nicht bei jedem Aufruf der Produktseite, wodurch das Laden der Seite für Kunden, die keine Personalisierung nutzen, nicht belastet wird.
- Ressourcen bedingt geladen: Das Stylesheet und die Skripte des Moduls werden ausschließlich auf Produktseiten mit aktivierter Gravur eingebunden – auf den übrigen Shopseiten fügt das Modul keine Dateien hinzu.
Presets – Gravurbereich und Erscheinungsbild des Schriftzugs
- Basisbild der Personalisierung: In das Preset wird ein Bild im Format JPG, PNG oder WebP hochgeladen, auf dem der Kunde seine Gravur sieht; dies kann ein Katalogbild des Produkts sein.
- Mit der Maus auf dem Bild markierter Bereich: Das Gravurrechteck wird direkt in der Vorschau gezeichnet – durch Ziehen über den Hintergrund, Greifen in der Mitte zum Verschieben und an der Ecke zum Ändern der Größe.
- Dieselben Werte auch per Tastatur verfügbar: Vier Zahlenfelder ermöglichen die Eingabe von Position und Größe des Bereichs ohne Maus und machen die wichtigste Einstellung des Moduls auch für die Tastaturbedienung zugänglich.
- Bereich prozentual gespeichert: Position und Abmessungen werden als Prozentsatz der Bildbreite und -höhe gespeichert, sodass die Markierung unabhängig von der Auflösung der Vorschau korrekt bleibt.
- Separate Schriftgrößen: Das Preset speichert eine Größe für die horizontale Gravur und eine separate für die vertikale, da derselbe Text in beiden Anordnungen eine andere Skalierung erfordert.
- Farbe des Schriftzugs vom Shop festgelegt: Die Farbe der Gravur wird vom Shopinhaber im Preset definiert, damit sie dem auf dem jeweiligen Material erzielten Effekt entspricht; der Kunde kann sie nicht ändern.
- Reihenfolge der Presets per Drag-and-drop: Die Preset-Liste im Panel unterstützt das manuelle Festlegen der Reihenfolge sowie das Aktivieren und Deaktivieren einzelner Positionen.
Im Panel verwaltete Schriftarten-Galerie
- Eigene Schriftdateien: Das Panel akzeptiert Dateien in den Formaten WOFF2, WOFF, TTF und OTF, sodass der Shop genau die Schriften bereitstellen kann, die in der Werkstatt umgesetzt werden können.
- Zwölf Schriftarten nach der Installation: Das Modul installiert ein fertiges Set aus zwölf Schriftarten, darunter Caveat, Dancing Script, Pacifico, Roboto Slab, Libre Baskerville, Montserrat, Oswald, Courgette, Lobster, Alfa Slab One, Josefin Sans und Comfortaa.
- Vorschau der Schrift auf der Auswahlschaltfläche: Jede Schrift-Schaltfläche im Konfigurator zeigt ihren eigenen Namen genau in dieser Schrift an, sodass der Kunde die Auswahl sieht, bevor er sie bestätigt.
- Aktivieren, Deaktivieren und Reihenfolge: Jede Schriftart kann ausgeblendet werden, ohne die Datei zu löschen, und die Reihenfolge in der Liste wird per Ziehen festgelegt.
- Geschütztes Schriftarten-Verzeichnis: Das Modul legt am Speicherort der Schriftarten Zugriffsregeln an, die die Art des Dateidownloads einschränken.
Icons und Symbole mit Kontrolle der Dateisicherheit
- SVG-Vektorgrafik: Symbole werden als SVG-Dateien hochgeladen und skalieren dadurch ohne Qualitätsverlust unabhängig von der Auflösung der Vorschau.
- Bereinigung der hochgeladenen Datei: Vor dem Speichern im Shop wird die SVG-Datei verarbeitet und von ausführbaren Elementen befreit – Skripten, Ereignisattributen, externen Verweisen, als Entitäten codierten Javascript-Adressen sowie Importen in Styles.
- Kennzeichnung „Neuheit“: Ausgewählte Icons können in der Galerie mit einem Neuheits-Label hervorgehoben werden, wodurch die Aufmerksamkeit des Kunden auf frisch hinzugefügte Motive gelenkt werden kann.
- Vier Symbole nach der Installation: Das Modul installiert ein Startset mit Herz, Stern, Berg und Pfote.
- Automatisches Ausblenden des Schritts: Wenn im Shop keine aktiven Icons vorhanden sind, wird die Personalisierungsart „Symbol“ dem Kunden überhaupt nicht angezeigt.
Gravur-Einstellungen für ein einzelnes Produkt
- Eigener Reiter auf der Produktseite: Die Gravur wird direkt in der Produktbearbeitung im Panel aktiviert, ohne in die Modulkonfiguration wechseln zu müssen.
- Preset aus der Liste gewählt: Das Produkt verweist auf ein Preset, sodass derselbe Bereich und dieselben Schriftgrößen für eine ganze Gruppe ähnlicher Produkte verwendet werden können.
- Sechs Preisfelder: Für jedes Produkt werden der Preis für horizontale Gravur, vertikale Gravur und Symbol sowie die entsprechenden Aktionspreise festgelegt.
- Aktionspreis für den Kunden sichtbar: Wenn ein Aktionspreis gesetzt ist, zeigt der Konfigurator ihn neben dem durchgestrichenen regulären Preis bei der jeweiligen Gravurart an.
- Aktivierung ohne Löschen der Einstellungen: Die Personalisierung des Produkts kann deaktiviert werden, wobei Preset und Preise für später erhalten bleiben.
Varianten – anderes Bild und andere Farbe für die Produktvariante
- Mockup einem Attributwert zugewiesen: Für einzelne Produktvarianten kann ein separates Basisbild hochgeladen werden, damit der Kunde die Gravur auf der von ihm gewählten Variante sieht.
- Kombinationsbild aus dem Katalog: Das Modul kann ein bereits im Shop vorhandenes Kombinationsbild verwenden, sofern es den Bildausschnitt beibehält, auf dessen Grundlage der Gravurbereich festgelegt wurde.
- Farbe des Schriftzugs pro Variante: Neben dem Bild kann die Gravurfarbe überschrieben werden, was dem tatsächlichen Unterschied des Effekts auf verschiedenen Materialien und Farben entspricht.
- Überschreibung auf Ebene des gesamten Produkts: Wenn jede Farbe im Shop ein separates Produkt ist, genügt eine einzige Überschreibung von Bild und Farbe, anstatt ein separates Preset zu erstellen.
Kontrolle der vom Kunden eingegebenen Inhalte
- Liste zulässiger Zeichen: Die Modulkonfiguration enthält eine Menge von im Gravurtext akzeptierten Zeichen, sodass kein Schriftzug mit einem nicht umsetzbaren Zeichen in die Werkstatt gelangt.
- Längenlimits separat für jede Art: Standardmäßig zehn Zeichen für die horizontale Gravur, zwanzig für die vertikale und zehn für das Symbol; die Werte können in den Einstellungen geändert werden.
- Serverseitige Validierung: Zeichenlimit und Liste zulässiger Zeichen werden beim Speichern erneut geprüft und nicht ausschließlich im Browser.
- Durch Token geschütztes Speichern: Das Speichern und Löschen der Personalisierung erfolgt über einen Modul-Endpunkt, der ein korrektes Sitzungs-Token erfordert.
Warenkorb, Bestellung und Kommunikation mit dem Kunden
- Standard-Personalisierung von PrestaShop: Die bestätigte Gravur wird als Produktpersonalisierung gespeichert und durchläuft damit Warenkorb und Bestellprozess über die Mechanismen des Shops selbst.
- Miniatur durch Bild mit Gravur ersetzt: Im Warenkorb, in der Bestellübersicht und auf den Bestellseiten im Panel wird das Produktbild durch die generierte Vorschau der Personalisierung ersetzt.
- Übersichtliche Beschreibung bei der Bestellposition: Der Position wird eine Beschreibung mit Gravurart, Inhalt, Position und Schriftname hinzugefügt, so vorbereitet, dass sie in das Längenlimit des Personalisierungsfelds von PrestaShop passt.
- Details der Gravur in der E-Mail: Das Modul ergänzt die Bestellbestätigungsnachricht um Informationen zur bestellten Personalisierung.
- Hinzurechnung des Personalisierungspreises: Die Kosten der Gravur werden entsprechend der für das jeweilige Produkt festgelegten Preisliste im Wert der Bestellposition berücksichtigt.
Bestellverwaltung im Administrationsbereich
- Gravur-Panel auf der Bestellseite: Eine separate Tabelle stellt Vorschau, Produktname, Gravurart, Inhalt, Schriftart, Position, Icon und Preis zusammen – den vollständigen Datensatz, der zur Ausführung des Auftrags benötigt wird.
- Spalte „Gravur“ in der Bestellliste: Die Bestellliste im Panel erhält eine Spalte zur Kennzeichnung von Bestellungen mit Personalisierung, platziert neben der Zahlungsspalte.
- Vorschau bei der Bestellposition: Bei einer personalisierten Position erscheint ein Link zum Vorschaubild der Gravur.
- Link auf Moduldateien beschränkt: Die Vorschauadresse wird ausschließlich auf Grundlage der von diesem Modul generierten und in der Personalisierungsdatenbank gespeicherten Dateinamen aufgebaut.
Datenpflege und Ordnung im Shop
- Periodisch ausgeführte Bereinigungsaufgabe: Das Modul stellt eine Adresse für den CRON-Zeitplan bereit, die Vorschaubilder aus abgebrochenen Warenkörben sowie verwaiste Personalisierungsdaten entfernt.
- Für den Shop generiertes Token: Der Bereinigungs-Endpunkt erfordert ein bei der Installation festgelegtes und mit einer gegen Timing-Analysen resistenten Methode verglichenes Token, sodass die bloße Kenntnis der Adresse nicht ausreicht, um die Aufgabe auszuführen.
- Konfigurierbares Alter der zu löschenden Daten: Das Mindestalter der zur Löschung vorgesehenen Dateien wird als Aufrufparameter übergeben, wodurch sich die Bereinigung an die typische Länge des Kaufprozesses anpassen lässt.
- Datum der letzten Ausführung: Das Modul speichert den Zeitpunkt der letzten Ausführung der Bereinigungsaufgabe.
- Bereinigung beim Löschen eines Produkts: Das Löschen eines Produkts im Shop entfernt die damit verbundene Gravurkonfiguration und Variantendaten.
- Einschränkungen für Bilder: Das Modul akzeptiert Bilddateien bis zu zwei Megabyte und einer Kantenlänge von bis zu 2400 Pixeln; gespeicherte Vorschauen werden um eine Miniatur mit 600 Pixeln Kantenlänge ergänzt.
Implementierung, Multistore und Updates
- Daten nach Shops getrennt: Presets, Schriftarten, Icons, Produkteinstellungen und Varianten werden mit Shop-Zuordnung gespeichert, was unterschiedliche Personalisierungsangebote in einer Multistore-Umgebung ermöglicht.
- Startset nach der Installation: Die Installation legt die Verzeichnisstruktur für Dateien an, kopiert Schriftarten und Icons und setzt Standardwerte für Limits und die Liste zulässiger Zeichen.
- Eigener Bereich im Panel-Menü: Das Modul fügt einen Bereich mit drei Verwaltungsansichten hinzu – Presets, Schriftarten und Icons.
- Update-Pfad: Das Paket enthält dreizehn Update-Skripte, die die Installation von den ersten Versionen bis zur aktuellen Version führen, ohne manuelle Änderungen an der Datenbank.
- Saubere Deinstallation: Die Deinstallation entfernt die Modultabellen, seine Einstellungen sowie das Verzeichnis mit Schriftarten-, Icon- und Basisbilddateien.
- Keine externen Abhängigkeiten: Das Modul erfordert weder Composer noch externe PHP-Bibliotheken oder Netzwerkdienste – es arbeitet ausschließlich mit dem im Paket gelieferten Code und der PrestaShop-API.
Vorteile für den Onlineshop
- Höherer Warenkorbwert: Die Personalisierung ist ein kostenpflichtiges Produkt-Add-on, dessen Preis der Shop separat für jede Gravurart und jedes Produkt festlegt.
- Weniger Fragen vor dem Kauf: Der Kunde sieht seinen Schriftzug auf dem Produktbild vor dem Hinzufügen zum Warenkorb und fragt daher seltener den Support, wie das Ergebnis aussehen wird.
- Weniger Fehler in der Werkstatt: Die Bestellung gelangt mit Vorschau und vollständiger Beschreibung – Art, Inhalt, Schriftart und Position – ins Panel, statt mit einer Notiz im Bestellkommentar.
- Personalisierung als Marketingargument: Eine kostenlose Gravur kann auf der Produktseite mit einem Label und einem durchgestrichenen regulären Preis hervorgehoben werden.
- Einmal konfigurieren, mehrfach verwenden: Ein Preset bedient eine ganze Gruppe von Produkten mit ähnlicher Form und ähnlichem Bildausschnitt.
- Kontrolle darüber, was umsetzbar ist: Die Liste zulässiger Zeichen und die Längenlimits beschränken Bestellungen auf realisierbare Schriftzüge.
- Kein wachsendes Dateichaos: Die Bereinigungsaufgabe entfernt Vorschauen aus Warenkörben, die nie zu Bestellungen geworden sind.
Kompatibilität
PD Gravur auf Produkten Pro ist für PrestaShop ab Version 1.7.8.2 über 8.x bis 9.x sowie für PHP 7.0–8.5 vorbereitet und speichert die Daten in MySQL 5.6+ oder MariaDB 10.x+. Das Modul erfordert weder Composer noch externe Bibliotheken, und die Gravurvorschau wird im Browser des Kunden ohne Verweise auf externe Dienste erzeugt. Die Benutzeroberfläche für Kunde und Panel ist ins Polnische übersetzt, und das Modul unterstützt eine Multistore-Umgebung, indem es Presets, Schriftarten, Icons und Produkteinstellungen dem jeweiligen Shop zuordnet.
Link zur Modul-Demo:
Demo des Administrationsbereichs:
https://moduly-prestashop.eu/grawer-na-produktach/admin-dev
Demo des Frontends:
https://moduly-prestashop.eu/grawer-na-produktach
Beispielhaftes Demo-Produkt im Frontend:
https://moduly-prestashop.eu/grawer-na-produktach/home-accessories/19-customizable-mug.html