Ready Speziell für Shopware 6 entwickelt
KILB Product Designer

KILB Product Designer

Version:

499,00 €  *
Quelloffen
Responsive
Dieser Hersteller reagiert sehr schnell auf Supportanfragen
    Kilb647502658205
  • 1.0.0
  • 05.11.2019
  • de_DE en_GB
  • von KILB Software Development
  • 6.0.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 per E-Mail an eine beliebige E-Mail-Adresse (z.B. die der Druckerei) versendet.


Bei der Entwicklung des Plugins wurde viel Wert gelegt auf:


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 und die einstellbare Schriftgröße des aufzudruckenden Texts darf den Wert 30 nicht überschreiten? Kein Problem!


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.


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. 


Responsiveness: 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.

Beschreibung vergrößern

FAQs

  • 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 PNG gerendert werden. Das JSON- und SVG-Format steht direkt nach Eingang der Bestellung zur Verfügung. Für das PNG Rendering muss eine Rendering Software ausgeführt werden: shopware6.cilb.de/renderer/
  • 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; }
Bewertungen lesen, schreiben und diskutieren... mehr

Kundenbewertungen

Installationsanleitung

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 auf Deinem PC 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 PNG-Grafik zu generieren, benötigst Du die Rendering-Software: http://shopware6.cilb.de/renderer/


Lade die ZIP-Datei für Dein Betriebssystem herunter, entpacke sie und öffne die Datei renderer_mac bzw. renderer_win.exe. Du wirst nun nach der API-URL und dem API-Key gefragt. Beide Informationen erhältst Du im Backend des Product Designers am unteren Ende der Seite.


Nach Eingabe beider Daten wird die Applikation eine Verbindung zu Deinem Server aufnehmen, die Meta-Informationen zu den noch nicht generierten Designs laden und darauf an Hand der Meta-Informationen hochauflösende PNG-Grafiken im gleichen Verzeichnis generieren. Damit Du die generierten Grafiken den Designs zuordnen kannst, enthalten die Dateinamen die im Backend ersichtliche Design-ID.


Solltest Du versehentlich eine generierte PNG-Grafik gelöscht haben, kannst Du im Backend das Rendering erneut anstoßen, indem Du für das jeweilige Design unter PNG das Icon mit dem runden Pfeil klickst.


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.0.0

- Initiale Plugin-Version

Infos zum Hersteller

KILB Software Development KILB Software Development 6 Erweiterungen
1 0 0
5 Ø-Bewertung

Version:

499,00 €  *

Zuletzt angesehen