KILB Product Designer - Artikeldesigner für T-Shirts, Tassen, Poster, Karten, Banner [Cloud Version]

⏯ In unserem Youtube-Tutorial-Video erfährst Du innerhalb von 10 Minuten, wie Du den Product Designer installierst & konfigurierst:

Schritt 1: App installieren

Sobald Du die App über den Shopware Store erworben hast, kannst Du sie im Administrationsbereich unter Erweiterungen >Meine Erweiterungen installieren.  Bitte stelle sicher, dass die App sowohl installiert als auch aktiviert ist.

Schritt 2: Konfiguration zuweisen

Nach Installation und Aktivierung der App findest Du in Deinem Shopware Backend im Menü einen neuen Navigationseintrag "KILB Product Designer" als Unterpunkt unter "Katalog".

Wenn Du darauf klickst, wird der Administrationsbereich des Designers geladen. Da bisher noch keine Bestellung mit einem Product Design durchgeführt wurde, ist die Tabelle leer.

Klicke nun im oberen Menü auf den Tab "Konfigurationen". Um Dir den Einstieg in die App zu erleichtern, legt die Installation des Product Designers automatisch initial eine Beispiel-Konfiguration an. Öffne die Einstellungen dieser Konfiguration, indem Du auf das Icon mit den drei Punkten klickst. 

Wähle nun einen beliebigen Artikel in Deinem Online-Shop, den Du in Zukunft von Deinen Kunden designen lassen möchtest. Kopiere dessen Artikelnummer (nicht die Produkt-ID!) und füge sie der Konfiguration hinzu. Klicke darauf auf "Konfiguration speichern".

Durch die Zuweisung der Konfiguration zu dem Artikel wird auf der Produktdetailseite des Artikels der Button "In den Warenkorb" nun automatisch deaktiviert und ein neuer Button "Design gestalten" erscheint. Der Kunde muss damit zuerst ein Design gestalten, wodurch der Button zum Hinzufügen des Warenkorbs erst aktiviert wird.

Du solltest nun eine erste Test-Bestellung mit diesem Artikel und einem beliebigen Design durchführen. Sobald die Bestellung abgeschlossen ist, kannst Du in den nächsten Schritt übergehen.

Schritt 3: Druckbild generieren

Während des Bestellprozesses werden lediglich Metadaten zum konfigurierten Design gespeichert. Zudem wird ein kleines Vorschaubild für den Warenkob generiert. Das eigentliche, hochauflösende Bild, was Du für den Druck auf den Artikel verwenden kannst, muss allerdings erst noch generiert werden. Da die Generierung der Grafik je nach Auflösung und Größe resourcenaufwändig sein kann, erfolgt weder im Browser des Kunden, noch auf Deinem Server. Stattdessen findet Sie in Deinem Browser statt.

Logge Dich zunächst wieder im Shopware Administrationsbereich auf und öffne die Seite des Product Designers. Du findest Du nun unter "Bestellte Designs" einen ersten Eintrag. Mit Klick auf das Icon mit den drei Punkten erhältst Du weitere Informationen zu dem Design. Du hast zudem die Möglichkeit, direkt ein vektorbasiertes SVG des Designs sowie ein serialisiertes JSON-Objekt herunterzuladen. Um eine hochauflösende WebP-Grafik zu generieren, klicke auf "Generieren". Das Generieren kann einige Sekunden dauern. Du kannst nach Abschluss eine Vorschau des Bildes sehen. Klickst Du auf diese Vorschau, wird das Bild heruntergeladen.

⚠️ Solltest Du  Probleme beim Generieren der Grafik haben, nutze bitte Google Chrome.

Schritt 4: Motive & Hintergrundbilder hinzufügen

Der Kunde hat im Product Designer die Möglichkeit, eigene Bilder hochzuladen. Zusätzlich kannst Du ihm die Option anbieten, aus einem vordefinierten Set zwischen verschiedenen Motivenund Hintergrundbildern zu wählen. 

Logge Dich hierfür in das Shopware Backend ein und klicke im Menü auf Inhalte > Medien.

Der Product Designer hat hier automatisch vier Verzeichnisse angelegt:

- Product Designer - Uploads: Hier landen Grafiken, die Benutzer des Product Designers hochgeladen haben. Die Grafiken werden erneut benötigt, wenn ein Benutzer im Nachhinein sein Design abändern möchte oder du die Rendering Applikation ausführst. Lösche deshalb keine Grafiken von Hand in diesem Verzeichnis.

- Product Designer - Basket Images: Hier werden die Vorschaugrafiken für den Warenkorb gespeichert. Auch hier solltest Du von Hand keine Grafiken entfernen.

- Product Designer - Images: Lade in dieses Verzeichnis die gewünschten Motive, die Du Deinen Kunden anbieten möchtest. Wenn Du mehrere Motive in unterschiedliche Kategorien gruppieren möchtest, kannst Du entsprechende Unterordner anlegen. Du kannst zudem für jedes Motiv einen Titel  festlegen, der im Frontend erscheinen wird.
- Product Designer - Background Images: Lade in dieses Verzeichnis die gewünschten Hintergrundbilder, die Du Deinen Kunden anbieten möchtest. Wenn Du mehrere Hintergrundbilder in unterschiedliche Kategorien gruppieren möchtest, kannst Du entsprechende Unterordner anlegen. Du kannst zudem für jedes Hintergrundbild einen Titel festlegen, der im Frontend erscheinen wird.

Schritt 5: Dokumentation lesen

Nimm Dir ausreichend Zeit, um die einzelnen Konfigurationsoptionen im Designer-Backend durchzugehen. Jedes Eingabefeld besitzt eine ausführliche Beschreibung, die dessen Funktion erklärt.

Für weiterführende Informationen und häufig gestellte Fragen kannst Du einen Blick in unsere Dokumentation werfen: 
http://docs.product-designer.io