SVG Studio.
Das Handbuch.

Ein Produkt. Viele Ausführungen.

Vermontas SVG Studio verbindet eine SVG Grafik mit den Auswahlmöglichkeiten eines Magento Produkts. Kunden sehen unmittelbar, wie sich Farben, Teile oder Varianten verändern. Die gewählten Optionen und ihre Aufpreise werden dabei im Kaufprozess berücksichtigt.

Die Grundlage ist ein einfaches Magento Produkt (Simple Product). Farben, Formen und Varianten werden als Konfigurationsoptionen diesem Produkt zugeordnet. Sie müssen nicht für jede Kombination ein separates Magento Produkt anlegen.

Ein Beispiel ist ein Tisch mit den Bereichen Platte, Kante und Gestell. Jeder Bereich besitzt eigene Auswahlwerte. SVG Studio setzt die ausgewählten Werte in einer gemeinsamen Vorschau zusammen.

Was vor der Einrichtung bereitstehen sollte.

• Ein funktionierender Magento 2 Shop mit Administrationszugang und den nötigen Berechtigungen.
• Die zum eingesetzten Magento System passende Version von Vermonta_SvgStudio.
• Mindestens ein einfaches Magento Produkt (Simple Product), das visuell konfiguriert werden soll.
• Eine bereits vorhandene SVG Datei, deren veränderliche Produktbereiche möglichst getrennt und eindeutig erkennbar sind.
• Eine Liste der gewünschten Felder, Werte, Farben und etwaigen Aufpreise.

Vom Admin zur ersten Konfiguration.

SVG Studio setzt eine vorhandene SVG Datei voraus. Beginnen Sie mit einem kleinen Testprodukt, prüfen Sie die vorhandenen SVG Elemente und erweitern Sie die Konfiguration erst nach einer erfolgreichen Vorschau.

Hinweis zur Bedienoberfläche: Die Bezeichnungen entsprechen dem vorgesehenen Aufbau von SVG Studio. Einzelne Felder und Menüpositionen können je nach ausgelieferter Version anders heißen. Dieses Handbuch ist keine pixelgenaue Dokumentation eines bestimmten Release Candidates.

Die vorhandene SVG Datei richtig nutzen.

Die SVG Grafik liegt bereits vor. Für die Konfiguration ist entscheidend, ob ihre Vektorelemente wie <path>, <rect> oder Gruppen <g> gezielt angesprochen werden können. Eindeutige id Attribute helfen dabei, Flächen einzufärben und Varianten anzuzeigen. Sie müssen dafür keine neue SVG Grafik erstellen.

Worauf Sie in der vorhandenen Datei achten

Die IDs in Ihrer vorhandenen SVG Datei sollten kurz, eindeutig und stabil sein. Müssen sie nachträglich angepasst werden, prüfen Sie danach die Produktzuordnungen: Geänderte IDs können bestehende Verknüpfungen ungültig machen.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 400">
  <g id="gestell_kufe">...</g>
  <g id="gestell_vierbein">...</g>
  <g id="platte">...</g>
  <g id="kante">...</g>
</svg>

Das Beispiel hilft beim Verständnis der bereits vorhandenen SVG Struktur. Die Datei muss nicht exakt so aufgebaut sein. Ob Varianten über Gruppen in einer Datei oder separate SVG Bausteine verwaltet werden, richtet sich nach dem gewählten Mapping in Ihrer Modulversion.

Diese Eigenschaften sollten Sie prüfen

• Ein gemeinsames Koordinatensystem: Alle Varianten müssen im selben viewBox oder in konsistenten Abmessungen angelegt sein.
• Passende Anschlussstellen: Wechselbare Bauteile sollten geometrisch zueinander passen. Ein Gestell darf beispielsweise beim Wechsel nicht springen oder neben der Platte erscheinen.
• Klare Ebenenfolge: Nicht sichtbare Bauteile liegen hinter deckenden Flächen. Das verhindert, dass sich Elemente durch die Tischplatte abzeichnen.
• Gezielte Zuordnung: Eine Farbauswahl darf nicht versehentlich feststehende Konturen oder andere Produktbereiche verändern.
• Keine unnötig komplexen SVG Konstruktionen: Externe Referenzen, problematische Masken und unklare Gruppen machen Zuordnungen oft schwerer.

Was ist ein Pool?

Ein Pool ist eine zentral gepflegte Sammlung von Werten oder Varianten, die Sie bei mehreren Produkten nutzen können. Statt eine häufig verwendete Farbpalette oder eine Auswahl von Gestellen für jedes Produkt erneut anzulegen, pflegen Sie sie als gemeinsame Ressource.

Pool, Feld und Wert sind nicht dasselbe.

So werden Pools sinnvoll eingesetzt

1. Den wiederverwendbaren Wertebestand im Bereich SVG Pools anlegen oder einen bestehenden Pool auswählen.
2. Für das Produkt ein Konfigurationsfeld erstellen, beispielsweise Platte.
3. Die Auswahlwerte beziehungsweise den Pool mit diesem Feld verknüpfen.
4. Die betroffenen SVG Elemente oder Varianten zuordnen, beispielsweise platte.
5. Prüfen, ob die Werte dieses Pools bei diesem konkreten Produkt grafisch und preislich sinnvoll sind.

Wichtig: Ein Pool stellt Werte bereit. Die korrekte visuelle Darstellung entsteht erst durch die Zuordnung zum jeweiligen SVG Produktmodell. Nicht jedes Gestell passt automatisch zu jedem beliebigen SVG Tisch.

Alle vorgesehenen Kombinationen abbilden.

SVG Studio soll die frei kombinierbaren Entscheidungen eines Produkts vollständig darstellen. Dafür werden unabhängige Felder nicht als einzelne fertige Gesamtbilder angelegt, sondern gemeinsam auf dieselbe SVG Vorschau angewendet.

Das spart insbesondere bei umfangreichen Sortimenten Bildproduktion und Pflegeaufwand. Wird eine Farbe oder ein Bauteil geändert, muss nicht jede betroffene Gesamtkombination als neues Bild erstellt werden. Voraussetzung ist, dass die vorhandenen SVG Elemente die Änderungen und Kombinationen geometrisch korrekt abbilden können.

Vier Regeln für eine vollständige Abdeckung

1. Felder unabhängig halten: Platte, Kante und Gestell müssen sich jeweils ändern lassen, ohne den Wert der anderen Felder zu überschreiben.
2. Jeden Wert vollständig zuordnen: Jeder Eintrag muss eine geeignete SVG Änderung oder eine passende Variante auslösen.
3. Bauteile geometrisch kompatibel halten: Gestelle, Konturen, Masken und Ebenen müssen in jeder vorgesehenen Kombination zueinander passen.
4. Alle Wertepaare prüfen: Nicht nur die Standardeinstellung betrachten. Besonders wichtig sind Variantenwechsel nach bereits gesetzten Farben oder Texten.

Praktische Testmatrix

Bei wenigen Kombinationen können Sie das gesamte Raster direkt testen. Bei größeren Sortimenten empfiehlt sich zusätzlich ein systematischer Funktionstest je Feld und Variantenpaar sowie eine stichprobenartige Prüfung der vollständigen Konfigurationen.

Auswahl und Preis gehören zusammen.

Für einzelne Werte können Aufpreise hinterlegt werden. Ändert der Kunde eine Option, aktualisiert SVG Studio die visuelle Vorschau und den angezeigten konfigurierten Preis.

Tragen Sie die gewünschten Aufpreise in den jeweils dafür vorgesehenen Optionswerten ein. Prüfen Sie anschließend nicht nur die Vorschau, sondern auch den tatsächlich übernommenen Warenkorbpreis und die ausgewählten Werte.

Der Konfigurator bleibt Teil des Shops.

Auf der Produktseite führt der Button Konfigurieren zur eigentlichen Konfigurationsfläche. Dort stehen die SVG Vorschau und die Auswahlmöglichkeiten nebeneinander beziehungsweise auf Mobilgeräten untereinander. Der konfigurierte Preis und die Warenkorbfunktion gehören in denselben Arbeitsablauf.

• Kontrollieren Sie die Darstellung bei breiten und schmalen Browserfenstern.
• Prüfen Sie die erkannten Shopfarben und den Konfigurieren Button im aktiven Theme.
• Ändern Sie mehrere Optionen nacheinander und überprüfen Sie die Live Vorschau.
• Fügen Sie das Produkt mit der gewählten Konfiguration in den Warenkorb.
• Prüfen Sie, ob die reguläre Magento Bestandsprüfung und Bestandsreduzierung für das einfache Produkt greifen.
• Prüfen Sie Preis, Konfiguration und Weitergabe der Optionswerte im anschließenden Magento Ablauf.

Lagerbestand und Magento Produktlogik

SVG Studio verwaltet keine eigenen Lagerbestände pro Konfigurationsoption. Das zugrunde liegende einfache Magento Produkt bleibt für die Bestandsführung maßgeblich. Die vorhandene Magento Lagerverwaltung prüft die Verfügbarkeit und reduziert den Bestand des Produkts im normalen Bestellablauf. Farben, Gestelle und andere Auswahlwerte erhalten durch SVG Studio keinen eigenen Bestand.

Prüfen Sie insbesondere bei ausverkauften Produkten, ob Magento den Kauf gemäß Ihren Bestandseinstellungen verhindert oder zulässt. Wenn einzelne Varianten eigene Lagerbestände benötigen, ist dies nicht Teil der vorgesehenen SVG Studio Lagerlogik.

Für Hyvä ist die passende Frontend Implementierung erforderlich. Der Backendbereich mit der SVG Bibliothek, den Pools und den Produktfeldern wird dadurch grundsätzlich nicht ersetzt.

Auch der Deployment Schritt gehört dazu.

Nach dem Einspielen oder Aktualisieren der Erweiterung müssen die üblichen Magento Schritte ausgeführt werden. Die Befehle werden im Magento Stammverzeichnis mit dem Dateisystembenutzer des Shops ausgeführt.

Erstinstallation

Kopieren Sie die ausgelieferte Erweiterung an ihren vorgesehenen Installationsort, beispielsweise app/code/Vermonta/SvgStudio, sofern die Installation nicht per Composer erfolgt. Aktivieren Sie das Modul anschließend einmalig.

php bin/magento maintenance:enable
php bin/magento module:enable Vermonta_SvgStudio
php bin/magento setup:upgrade
php bin/magento setup:di:compile
php bin/magento setup:static-content:deploy -f de_DE en_US
php bin/magento cache:flush
php bin/magento maintenance:disable

Beim Static Content Deployment müssen die tatsächlich verwendeten Locales berücksichtigt werden. Das Beispiel verwendet Deutsch und Englisch. Falls der Shop weitere Sprachen nutzt, ergänzen Sie diese, etwa de_CH, fr_FR oder it_IT.

Update einer bereits aktivierten Version

Bei Updates entfällt module:enable normalerweise. Nachdem die Moduldateien aktualisiert wurden, führen Sie die nachstehenden Schritte im passenden Wartungsfenster aus.

php bin/magento maintenance:enable
php bin/magento setup:upgrade
php bin/magento setup:di:compile
php bin/magento setup:static-content:deploy -f de_DE en_US
php bin/magento cache:flush
php bin/magento maintenance:disable

Bei bereits vorbereiteten Build Artefakten oder speziellen Produktionsabläufen kann das Deployment anders erfolgen. Die Codekompilierung und die Bereitstellung statischer Inhalte sollten dann in den vorhandenen Prozess integriert werden.

Nach dem Deployment prüfen

• Ist Vermonta_SvgStudio aktiviert? Prüfen Sie bei Bedarf mit php bin/magento module:status Vermonta_SvgStudio.
• Laden die Bibliothek und der SVG Editor im Magento Admin ohne JavaScript Fehler?
• Wird die SVG Vorschau im Produkt geladen?
• Werden Optionen, Preise und Konfiguration im Warenkorb übernommen?
• Sind Frontend und Admin bei den tatsächlich installierten Sprachen korrekt dargestellt?

Grundlage für die CLI Abfolge ist die offizielle Adobe Commerce Dokumentation zur Bereitstellung auf einer einzelnen Instanz. Die Beispiele ersetzen keine auf Ihre Serverumgebung abgestimmte Deployment Anleitung.

Vor dem Livegang vollständig testen.

Gut zu wissen.