Ready Dies ist ein speziell für Shopware 6 entwickeltes Plugin
KILB Product Designer - Artikeldesigner für T-Shirts, Tassen, Poster, Karten, Banner ...

KILB Product Designer - Artikeldesigner für T-Shirts, Tassen, Poster, Karten, Banner ...

von: KILB Software Development bisher keine Bewertungen Quelloffen 53 Downloads
Aktuelle Version:

Version:

Support
Dieser Hersteller reagiert schnell auf Supportanfragen
Plugin Details
  • Kilb647502658205
  • KILB Software Development
  • 1.6.4
  • 23.09.2020
  • de_DE en_GB
  • 6.0.0
    6.1.0 – 6.1.6
    6.2.0 – 6.2.3
    6.3.0.0 – 6.3.0.2
    6.3.1.0 – 6.3.1.1
    6.3.2.0
Der KILB Product Designer erlaubt es Kunden, Produkte (T-Shirts, Poster, Banner, Tassen usw.)... mehr

Produktinformationen

Der KILB Product Designer erlaubt es Kunden, Produkte (T-Shirts, Poster, Banner, Tassen usw.) vor dem Kauf mit einem eigenen Design zu versehen.


Bevor das gewünschte Produkt in den Warenkorb gelegt wird, kann der Kunde das Design völlig frei bestimmen. Hierfür hat er die Möglichkeit, eigene Bilder hochzuladen,  Texte in diversen Schriftarten hinzuzufügen, QR-Codes zu generieren oder zwischen beliebig vielen vorausgewählten Motiven auszuwählen.

Das fertige Design wird darauf als Vorschaubild im Warenkorb angezeigt und nach Abschluss der Bestellung im Shopware Backend gespeichert.


Bei der Entwicklung des Plugins wurde viel Wert gelegt auf:


✅ Umfangreiche Konfigurierbarkeit

Nahezu alles (Auflösung, Bildgröße, Druckgröße, Schriftgröße usw. usf.) lässt sich konfigurieren. Es lassen sich beliebig viele Konfigurationen für beliebig viele Artikel festlegen. Sogar ein einzelner Artikel kann mehrere Konfigurationen aufweisen, die sich beliebig unterscheiden können. Der bedruckbare Artikel hat eine Vorder- und Rückseite - die Rückseite hat aber eine kleinere Fläche - kein Problem!


✅ Dynamische Aufpreisberechnung

Legen Sie fest, welchen Aufpreis ein Artikel mit Product Design pro auf dem Design hinterlegtem Element (Grafik, Motiv, Text usw.) haben soll.


✅ Hohe Performance

Der Product Designer basiert auf dem performanten JavaScript-Framework Vue.JS in Verbindung mit dem bewährten Canvas-Framework fabric.JS. Das aufwändige Rendering, das heißt der Umwandlung des vom Kunden festgelegten Designs in eine Bildgrafik, findet auf dem lokalen Gerät des Shopbesitzers statt. Weder das Gerät des Kunden, noch der Shopserver, werden hierfür beansprucht. Hierfür verbindet sich die Client-Software mit Ihrem Shopserver, um die Metadaten der bestellten Designs herunterzuladen. An Hand der Metadaten werden die Designs dann generiert.


✅ Hohe Kompatibilität

Das Plugin integriert sich in Shopware, soweit nötig. Aber nicht mehr, als nötig. Damit werden so gut wie möglich Konflikte mit angepassten Shopware-Shops und anderen Plugins vermieden. 

✅ Responsive Design

Egal, ob der Product Designer über das Smartphone, das Tablet oder den Desktop verwendet wird: Er funktioniert immer auf die gleiche Weise und passt sich der verfügbaren Größe automatisch an.


✅DSGVO-konform

Im Vergleich zu anderen Designern verwendet der KILB Product Designer keine externen Resourcen (Google Fonts o.ä.) bzw. Tracking Scripts, sodass die Privatssphäre Ihrer Shopkunden nicht beeinträchtigt wird.


✅ Grenzenlose Erweiterbarkeit

Sie sind fit in JavaScript und CSS? Der Product Designer kann programmatisch erweitert werden. Alles, was Sie dafür benötigen sind CSS-Kenntnisse und die Dokumentation des populären JavaScript-Frameworks fabric.JS (http://fabricjs.com/)


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

https://www.youtube.com/watch?v=tCOVbdzzxcI

Häufig gestellte Fragen

  • Welche Export-Formate werden unterstützt? Die von Kunden erstellten Designs können - in einem JSON-Format exportiert werden (für Entwickler und Eigenentwicklungen relevant) - als SVG gedownloadet werden - als WebP gerendert werden. (Weitere Formate folgen in Kürze)
  • Welche Upload-Formate werden unterstützt? Kunden können folgende Dateiformate hochladen und in ihrem Design platzieren: - PNG - JPG - GIF (wird in ein statisches Bild umgewandelt) - SVG
  • Wie kann ich den Button zum Hochladen von eigenen Bildgrafiken entfernen? Wenn Du vermeiden möchtest, dass Kunden ihre eigenen Bilder hochladen können, hinterlege eine eigene CSS-Datei in der jeweiligen Product Designer Konfiguration mit folgendem Inhalt: .open-modal-image-upload { display: none !important; }
  • Kann ich eigene Schriftarten festlegen, zwischen denen ein Kunde für Textelemente entscheiden kann? Ja, das ist möglich. Wechsel hierfür in das public-Verzeichnis Deiner Shopware-Installation und lege hier einen neuen Order mit folgendem Namen an: product-designer-fonts Lege hier Deine eigenen Schriftarten im TTF-Format ab. Wenn Du noch besondere Schriftarten sucht, empfehlen wir Dir das Angebot von https://fonts.google.com - Dort kannst Du eine Vielzahl von Schriftarten herunterladen und im Product Designer verwenden.
  • Kann ich den Product Designer mit eigenen Programmiert-Kenntnissen erweitern? Ja, das ist in großem Umfang möglich. Backend-seitig kannst Du dank der u.A. auf Symfony basierenden Shopware-Architektur einzelne Code-Klassen austauschen oder erweitern. Im Frontend kannst Du für jede Konfiguration eine JavaScript-URL eintragen, die zusätzlich im Frontend ausgespielt wird. Mit folgenden Zeilen in der JavaScript-Datei kannst Du das Verhalten des Product Designers verändern: window.productDesigner.onCanvasInitialized = function (configuration, canvas) { ... } Die Konfiguration configuration ist hierbei ein Objekt, welches die im Shopware-Backend festgelegten Konfigurationdaten zurückgibt. Die canvas-Variable ist ein Objekt vom Type fabricjs.Canvas - siehe http://fabricjs.com/docs/fabric.Canvas.html Bitte beachte, dass wir keinen Support für Eigenanpassungen vornehmen können. Wenn Du von uns eine Anpassung programmiert haben möchtest, kontaktiere uns gerne für ein Angebot.
  • Wie kann das Hinzufügen von QR-Codes verhindern? Wenn Du vermeiden möchtest, dass Kundeneinen QR-Code platzieren können, hinterlege eine eigene CSS-Datei in der jeweiligen Product Designer Konfiguration mit folgendem Inhalt: .open-modal-qr-code { display: none !important; }
  • Mit welchem Programm lassen Sich die generierten SVG-Dateien ansehen? Am besten benutzt Du für die Anzeige der SVG-Dateien einen Browser wie zum Beispiel Google Chrome. Über die Darstellung im Browser stellst Du auch sicher, dass die hochgeladenen Bilder richtig angezeigt werden.
  • Alle Fragen und Antworten anzeigen Weniger Fragen und Antworten anzeigen

Videos

Bewertungen lesen, schreiben und diskutieren... mehr

Kundenbewertungen

Installationsanleitung

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

https://www.youtube.com/watch?v=tCOVbdzzxcI


Schritt 1: Plugin installieren & API-Key auslesen


Sobald Du das Plugin über den Shopware Store erworben hast, kannst Du es im Administrationsbereich unter Einstellungen > System > Plugins installieren.  Bitte stelle sicher, dass das Plugin sowohl installiert als auch aktiviert ist. Sobald das Plugin aktiviert wurde, klicke auf das Icon mit den drei Punkten. Dort findest Du einen Link "Konfiguration". Hinter diesem Link findest Du den API Key, den Du für die nachfolgenden Schritte benötigst. 


Schritt 2: Konfiguration zuweisen


Nach Installation und Aktivierung des Plugins findest Du in Deinem Shopware Backend im Menü einen neuen Navigationseintrag "Product Designer".

Beim erstmaligen Aufruf des Product Designer Backends wird der API Key verlangt. Trage diesen Key ein, um Dich einzuloggen. Nach erfolgreichem Login landest Du in dem Bereich "Bestellte Designs". Da bisher noch keine Bestellung mit einem Product Design durchgeführt wurde, ist diese Tabelle leer.


 Klicke im oberen Menü auf den Tab "Konfigurationen". Um Dir den Einstieg in das Plugin 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 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 Motiven 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 drei 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 - Clip Arts: 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.


Änderungen

Version 1.6.4

- Performance-Verbesserungen beim Wechseln zwischen Konfigurationen im Frontend

- Verbesserung der Darstellung bei außerhalb des Zeichenbereichs platzierten Elementen

- Bugfix: Beim Wechseln von Konfigurationen im Frontend wird der Zeichenbereich jetzt wieder korrekt berechnet

Version 1.6.2

Die Backend im Icons werden jetzt wieder angezeigt.

Version 1.6.1

- Beim Klicken in einen leeren Bereich wird der Fokus vom aktuell fokussiertem Feld entfernt

- Zusätzliche Preisberechnung funktioniert nun auch für gebogenen Text

Version 1.6.0

- Breaking Change: Platzierte Elemente können jetzt auch außerhalb des Zeichenbereichs gesehen, verschoben und manipuliert werden, um die User Experience bei kleinen Zeichenbereichen zu verbessern.

- Breaking Change: Schriftarten, die keinen Stil für fette oder kursive Schrift mitbringen, lassen sich im Designer jetzt auch nicht mehr fett oder kursiv setzen. Grund hierfür ist, dass bei fehlendem Stil der Browser des Kunden selbst einen Stil erzeugt. Da sich das von Browser zu Browser unterscheidet, wäre sonst nicht gewährleistet, dass das Design im Backend 1:1 - d.h. pixelgenau - gerendert wird.

- Neue Schriftarten wurden hinzugefügt.

- Bugfix: Die Platzierung initial angelegter Elemente war bei mehr als einer Konfiguration pro Artikel unter Umständen fehlerhaft.


Version 1.5.1

Unser bisher größtes Update!


- Optimierung der ausgelieferten JavaScript-Datei für eine kleinere Dateigröße

- Performance-Optimierung auf Produktlistings bei einer hohen Anzahl an Product-Designer-Konfigurationen und Produkten

- Verbesserung der Bedienbarkeit auf mobilen Geräten

- Der Abstand der Buchstaben der auf dem Design platzierten Text-Elemente kann jetzt variabel festgelegt werden.

- Auf dem Design platzierte Text-Elemente können jetzt gebogen werden

- Bugfix: Drag & Drop im Bilder-Upload-Layer funktioniert jetzt wieder

Version 1.4.10

- Bugfix: Wird eine Bestellung mit Design im Backend gelöscht, konnten die Product Designs nicht mehr geladen werden. Das wurde behoben.

Version 1.4.9

- Kritischer Bugfix: Produkte im Backend wurden nicht geladen. Dieser Fehler wurde behoben.

Version 1.4.8

- In einigen Produktkacheln (z.B. in den Einkaufswelten) wurde der Button "In den Warenkorb" noch nicht mit "Jetzt Design gestalten" ersetzt. Das wurde jetzt nachgeholt.

- Es ist nun möglich, das Element zur Farbauswahl zu ändern. Es kann dabei zwischen verschiedenen vorgefertigten Layouts gewählt werden.

- Es ist nun möglich, die zur Auswahl stehende Textfarbe in der Product Designer Konfiguration einzugrenzen.

Version 1.4.5

- Layout-Überarbeitung des Layers zum Hinzufügen von Motiven

- Design-Überarbeitung der Größen- und Rotationselemente der auf dem Zeichenbereich platzierten Design-Elemente

Version 1.4.4

- Bugfix: PNG-Dateien können jetzt wieder auf dem Design platziert werden.

Version 1.4.3

- Exif-Metadaten hochgeladener Bilder werden jetzt ausgewertet, um Rotationen und Spiegeln zu unterstützen 

- Es können nun eigene Schriftarten verwendet werden. Dazu muss im Shopware-Public-Verzeichnis ein Verzeichnis "product-designer-fonts" angelegt werden. Hier können die TTF-Schriftarten platziert werden.

Version 1.3.8

- Bei der Preisangabe für zusätzliche Preiserhöhung für ein Design wird jetzt ein Sternchen angezeigt, um auf die enthaltenen Mehrwertsteuer hinzuweisen.

- Bugfix: Im Backend wurde ein Problem behoben, bei dem unter Umständigen sehr große Grafiken nicht vollständig gerendert wurden.

Version 1.3.7

- Im Plugin Manager wird jetzt ein Logo des Plugins angezeigt

- Benutzerdefinierte JS- & CSS-Dateien werden nun nicht mehr gecacht

- Bugfix: Bei nicht gesetzter Hintergrundbild-URL konnte eine Konfiguration unter Umständen im Backend nicht mehr geöffnet werden.

Version 1.3.6

- Bugfix: Das Grid wurde beim erneuten Öffnen des Design-Layers über den platzierten Elementen angezeigt. Dieser Fehler wurde behoben.

- Bugfix: Das Verwenden des Kategorie-Dropdowns im Motiv-Layer zoomte die Seite auf iOS. Dieser Fehler wurde behoben.

Version 1.3.5

- In der Product Designer Konfiguration kann nun ein Gitter konfiguriert werden, welches dem Kunden beim Positionieren seiner Designelemente hilft.

- Hochgeladene Grafiken und hinzugefügt Motive werden nun initial so dimensioniert, dass die in der Breite vollständig sichtbar sind.

Version 1.3.2

- Dynamische Preisberechnung: Es kann nun innerhalb einer Produkt Designer Konfiguration festgelegt werden, welchen Aufpreis ein auf dem Design platziertes Motiv, Bild oder Textelement hat.


Hinweis: Ggf. ist es notwendig, nach Installation des Updates das Plugin zu deaktivieren und erneut zu aktivieren. Es gehen damit keine Daten verloren!

Version 1.2.7

- Der CSS-Style für das Design für Buttons steht nun mittels ".btn" für Eigenanpassungen zur Verfügung.

Version 1.2.6

- In den Product Designer Konfigurationen kann jetzt nach einzelnen Motivkategorien gefiltert werden.

- Die Modals für Motive, QR-Code usw. wurden im Design leicht überarbeitet.

- Bugfix: Frontend- und Backend-HTML-Seite des Product Designers wird nun nicht mehr im Browser-Cache zwischengespeichert.


Version 1.2.2

- Bugfix: Bestellte Produktdesigns werden nun auch angezeigt, wenn eines der zugehörigen Produkte gelöscht wurde.

- Bugfix: In Unterordnern platzierte Motive werden nun in Kategorien gebündelt.

- Feature: In die Designer-Konfigurationen kann nun eine eigene JavaScript-Datei eingebunden werden, um das Verhalten des Product Designers zu manipulieren und somit Eigenanpassungen zu realisieren. 

Version 1.1.10

- Fehler beim Speichern einer benutzerdefinierten CSS-URL wurde behoben

Version 1.1.9

- Bugfix: Das Product Designer Backend funktioniert nun auch, wenn sich der Shop im Wartungsmodus befindet.

Version 1.1.8

- Darstellungsfehler im Dropdown der Schriftarten bei besonders langen Namen behoben.

- Beim Generieren eines Designs im WebP-Format im Backend wird die Installation der im Design verwendeten Schriftarten auf der lokalen Maschine nun nicht mehr vorausgesetzt.

- Bei Verwendung mehrerer Konfigurationen für unterschiedliche Artikel gab es unter Umständen das Problem, dass der Designer nicht mehr laden konnte. Dieses Problem wurde behoben.  

- Zwei weitere Schriftarten hinzugefügt.


Version 1.1.7

- Einrasten bei Rotation wird jetzt unterstützt und kann im Backend konfiguriert werden

Version 1.1.6

- Es kann nun konfiguriert werden, ob der Button zum Hinzufügen in den Warenkorb vor der Auswahl eines Designs deaktiviert wird.

- Es kann nun konfiguriert werden, ob auf dem Canvas platzierter Text in seinem Größenverhältnis verändert werden darf.

- Es kann nun konfiguriert werden, ob auf dem Canvas platzierte Motive in ihrem Größenverhältnis verändert werden dürfen.

Version 1.1.3

- Weitere Schriftarten hinzugefügt

- Schriftarten werden jetzt als Vorschau angezeigt

Version 1.1.2

- Das Rendering kann nun direkt im Browser angestoßen werden, eine Renderingsoftware ist nicht nötig

- Das Rendering-Ausgabeformat wurde auf WebP geändert, um eine deutlich geringere Dateigröße zu erreichen.

Version 1.1.1

Beim Speichern einer Konfiguration wird nun eine eingetragene Artikelnummer automatisch der Liste hinzugefügt.

Version 1.1.0

Anpassung für den Support von Shopware 6.1

Version 1.0.0

- Initiale Plugin-Version

Infos zum Hersteller

KILB Software Development KILB Software Development 8 Erweiterungen 5 Ø-Bewertung
Aktuelle Version:

Version:

Zuletzt angesehen