1.0 Einführung
Als Ladenbesitzer haben Sie immer daran gedacht, Ihre Ladenumsätze zu vervielfachen, aber nicht an das Einkaufserlebnis Ihrer Kunden. Ein glücklicher und zufriedener Kunde ist derjenige, der auf der Suche nach weiteren Artikeln in den Laden zurückkehrt. Wenn Sie wiederkehrende Kunden in Ihrem Geschäft haben möchten, sorgen Sie für ein dauerhaftes Kundenerlebnis, indem Sie das Prestashop Product Designer / Customizer-Addon in Ihrem E-Commerce-Geschäft integrieren. Mit Hilfe des Prestashop Custom Product Design-Moduls können Händler ihren Kunden intuitive und kreative Online-Optionen zur Produktanpassung anbieten, um die Basisversion des Produkts in ein modernes, elegantes und einzigartiges Design zu verwandeln. Mit dem Prestashop-Produktanpassungs-Addon kann der Administrator die Seite des Produktanpassungsfensters anzeigen, wenn der Benutzer auf der Produktseite auf die Schaltfläche Anpassen klickt. Kunden können problemlos farbintensive Texte mit Effekten hinzufügen, ihre Bilder mit Filtern hochladen und einen QR-Code hinzufügen, um ihn an ihre Bedürfnisse anzupassen.
1.1 Markante Funktionen des Prestashop-Produktanpassungs-Addons
Es sind keine Codierungstechniken erforderlich, um die Einstellungen des Prestashop Custom Product Design-Moduls zu konfigurieren oder zu ändern. Mit diesem Modul ist alles ganz einfach. Hier können Sie schnell die verschiedenen Funktionen dieses Prestashop-Addons überprüfen.
- Prestashop Product Designer / Customizer Addon bietet eine breite Palette an anpassbaren Produkten in Ihrem Online-Shop. Mit dem benutzerdefinierten Produktdesigner-Addon von Prestashop können Kunden ganz einfach die erweiterten Online-Produkte kaufen und nutzen, die nach ihren Bedürfnissen personalisiert werden können.
- Online Product Designer fügt eine Designeransicht für Produkte hinzu, sodass potenzielle Käufer die Möglichkeit haben, das Produkt in Echtzeit anzupassen. Mit dem Produktkonfigurationsmodul kann der Prestashop-Administrator verschiedene Anpassungsoptionen für jedes Produkt im Shop hinzufügen.
- Durch die Integration des Prestashop-Produktdesignermoduls können Kunden mit jedem Produkt, das sie kaufen möchten, wie T-Shirts, Tassen, Ringen oder jeder anderen Art von Produkt, das nach ihren Bedürfnissen personalisiert werden kann, auf das Produktanpassungsfenster zugreifen.
- Das Prestashop-Produktanpassungs-Addon zeigt eine Schaltfläche zum Anpassen für jedes anpassbare Produkt im Geschäft. Der Administrator kann Anpassungsoptionen nur für die gewünschten Produkte aktivieren.
- Die gesamte Funktionalität des Prestashop Product Designer / Customizer-Addons kann aktiviert oder deaktiviert werden. Wenn dieses Modul deaktiviert ist, werden die Standardoptionen zur Produktanpassung auf der Produktseite angezeigt.
- Das erweiterte Produktanpassungsmodul zeigt die Preisberechnung für die Anpassung in Echtzeit auf der Produktseite an.
- Mit dem benutzerdefinierten Produktdesigner-Addon von Prestashop kann der Administrator die Produktdesignseiten festlegen, die dem Benutzer zur Verfügung stehen.
- Mit dem Produktkonfigurationsmodul kann der Administrator die Downloadoptionen für PDF-Dateien für die Kunden im Frontend aktivieren oder deaktivieren.
- Das Prestashop Extended Product Customization-Modul bietet die Option, vordefinierte Bilder für ein Produkt hinzuzufügen. Die vordefinierten Bilder werden normalerweise in Gruppen definiert. Kunden können jedes eigene Bild hochladen und einstellen.
- Mit diesem Prestashop-Produktdesignermodul kann der Kunde die gewünschten Schriftarten, Farben und Filter für das Produkt flexibel verwenden.
- Mit diesem erweiterten Produktanpassungsmodul kann der Administrator Preise für verschiedene Anpassungsoptionen definieren.
- Das Produktanpassungsmodul von Prestashop bietet auch die Möglichkeit, das Produkt mithilfe eines QR-Codes zu personalisieren, für den der Administrator einen separaten Preis definieren kann.
- Prestashop Custom Product Designer Addon fügt automatisch einen Complete Design-Festpreis zum endgültigen angepassten Preis für ein Produkt hinzu.
- Das Prestashop Product Designer / Customizer-Addon unterstützt die Kompatibilität mit mehreren Stores und mehreren Sprachen.
- Das Prestashop-Addon für benutzerdefinierte Produktdesigner reagiert auf Mobilgeräte und ist mit verschiedenen Prestashop-Themen kompatibel.
1.2-Technologie für die Entwicklung
- Sprache: PHP
- Rahmenarbeit: Prestashop
2.0-Installationshandbuch für das Advanced Product Customizer-Modul
Der Store-Administrator kann die folgenden einfachen Schritte ausführen, um das Prestashop-Produktanpassungs-Addon in seinem E-Commerce-Store zu installieren: 1. Laden Sie zunächst das Addon-Paket aus dem Knowband-Store herunter. 2. Sie erhalten eine komprimierte Datei mit dem Quellcode und dem Benutzerhandbuch. Entpacken Sie das gesamte Paket im Stammverzeichnis Ihres Prestashop-Speichers über den FTP-Manager (z. B. Filezilla oder WinSCP)
Das Prestashop Custom Product Designer-Addon ist jetzt installiert und einsatzbereit. Jetzt kann der Administrator die verschiedenen Konfigurationseinstellungen entsprechend seiner Prestashop-Site konfigurieren.
3.0-Verwaltungsoberfläche des Prestashop Advanced Product Customizer-Moduls
Direkt nach der erfolgreichen Installation des Prestashop Product Designer / Customizer-Addons auf Ihrer Website können Sie die Einstellungen für das Produktanpassungsfenster nach Ihren Wünschen konfigurieren. Klicken Sie im Admin-Bereich oder Dashboard auf "Module und Dienste" und dann auf die Schaltfläche "Konfigurieren" neben Knowband Product Designer / Customizer.
Hier finden Sie auf der nächsten Oberfläche die vollständigen Einstellungen des Moduls Product Designer / Customizer sowie die unten aufgeführten Unterabschnitte.
Dieses Modul zur Anpassung von Knowband-Produkten besteht aus vier Unterabschnitten, die weiter besprochen wurden. 1.Configuration 2.Fonts 3.Colors 4.Image-Gruppe Im Folgenden werden die einzelnen Registerkarten des Prestashop Extended Product Customization-Moduls erläutert:
3.1-Konfiguration
Unter den Konfigurationseinstellungen des Prestashop-Produktanpassungs-Addons können Sie die grundlegenden Einstellungen für das Anpassungsfenster vornehmen, die den Kunden im Frontend angezeigt werden.
- Aktivieren deaktivieren: Mit dieser Option können Sie die Funktionalität des Prestashop Extended Product Customization-Moduls für Kunden vollständig aktivieren oder deaktivieren.
- Zeigen Sie die Option zum Herunterladen von PDF im Warenkorb an: Sie können diese Option aktivieren oder deaktivieren, um das Designbild als PDF auf der Admin-Bestellseite herunterzuladen.
- Designvorschau in PDF-Rechnung anzeigen: Aktivieren oder deaktivieren Sie diese Option, um die Entwurfsvorschau in der PDF-Rechnung anzuzeigen oder auszublenden.
- Maximale Anzahl von Folien: Mit dieser Option können Sie die maximale Anzahl von Produktseiten festlegen, die über das Frontend angepasst werden dürfen.
3.2-Schriftarten
In diesem Abschnitt des Prestashop-Produktdesignermoduls kann der Geschäftsinhaber mehrere Schriftarten hinzufügen, die der Kunde auswählen kann, um einen gestalteten Text auf dem Produkt zu drucken. Die erste unten gezeigte Oberfläche zeigt Ihnen eine Liste der vorhandenen Schriftarten, die im Frontend verfügbar sind. Es kann eine neue Schriftart hinzugefügt oder die vorhandene Schriftart geändert oder gelöscht werden.
Hier können Sie die beiden anderen Aktionen ausführen als:
1. Hinzufügen einer neuen Schriftart
Führen Sie die folgenden Schritte aus, um einen neuen Schriftstil hinzuzufügen: Klicken Sie auf die Registerkarte Schriftarten und dann im Backend-Bereich auf die Schaltfläche "+" (Schrift hinzufügen). Ihnen wird die folgende Benutzeroberfläche angezeigt.
- Aktiv: Diese Option aktiviert oder deaktiviert die Schriftart.
- Schriftart Titel: Mit dieser Option können Sie den Schriftarttitel wie in Google Font angegeben festlegen.
- @Import-Schriftart einbetten: Um die Google-Schriftart zu verwenden, müssen Sie die importierte Schriftartklasse einbetten. Dafür müssen Sie:
- Klicken Sie unterhalb der Option auf den Link "Google Fonts". Der folgende Bildschirm wird Ihnen angezeigt.
- Wählen Sie eine beliebige Schriftart aus und klicken Sie auf die Schaltfläche "+" für diese Schriftart.
- Wenn Sie eine Schriftart hinzufügen, wird ein Popup-Fenster mit der ausgewählten Schriftfamilie angezeigt. Klicken Sie auf die Registerkarte Einbetten und dann auf die Schaltfläche @Import.
- Kopieren Sie die @ import-URL für diese Schriftart und fügen Sie sie in das Feld "@ import-Schriftart einbetten" ein.
2. Bearbeiten Sie eine vorhandene Schriftart
Wenn Sie die vorhandene Schriftart bearbeiten möchten, klicken Sie einfach auf die Schaltfläche Bearbeiten neben dem Schriftstil. Sie sehen die folgenden Optionen:
- Aktiv: Aktivieren oder deaktivieren Sie den Schriftstil.
- Schriftstil: Bearbeiten Sie den Schriftartentitel mit dieser Option.
- @Import-Schriftart einbetten: Ändern Sie die Import-URL für diese bestimmte Schriftart.
3.3 Farben
In diesem Abschnitt des Moduls Produktkonfigurator können Sie Ihre eigene Farbpalette definieren und Ihren Kunden die Möglichkeit geben, eine beliebige Farbe für das ausgewählte Produkt auszuwählen. Die folgende Oberfläche zeigt Ihnen eine Liste der vorhandenen Farben, die bearbeitet werden können, oder Sie können bei Bedarf eine neue Farbe hinzufügen.
1. Neue Farbe hinzufügen
- Farbcode: Wählen Sie mit dieser Option eine gewünschte Farbe aus, die auf der Produktanpassungsseite angezeigt werden soll.
- Aktiv: Aktiviert oder deaktiviert die Farbe.
2. Bearbeiten Sie eine vorhandene Farbe
- Farbcode: Wählen Sie mit dieser Option eine gewünschte Farbe aus, die auf der Produktanpassungsseite angezeigt werden soll.
- Aktiv: Aktiviert oder deaktiviert die vorhandene Farbe.
3.4-Bildgruppen
Für ein ausgewähltes Produkt kann der Kunde Standardbilder auswählen, die vom Geschäftsinhaber bereitgestellt wurden, oder er kann ein neues benutzerdefiniertes Bild für die Produktanpassung hochladen. Die Standardbilder wurden als Bildgruppen kategorisiert. Diese vorhandenen Bildgruppen können bearbeitet werden oder Sie können sogar eine neue Bildgruppe hinzufügen.
1. Hinzufügen einer neuen Bildgruppe
- Name der Bildgruppe: Sie können einen gewünschten Namen für die Bildgruppe festlegen.
- Bild hochladen: Sie können ein Bild für das Logo einer Bildgruppe hochladen und festlegen.
- Aktiv: Diese Option aktiviert oder deaktiviert die Bildgruppe.
2. Bearbeiten Sie eine vorhandene Bildgruppe
- Name der Bildgruppe: Sie können einen gewünschten Namen für die Bildgruppe festlegen.
- Bild hochladen: Sie können ein Bild für das Logo einer Bildgruppe hochladen und festlegen.
- Aktiv: Diese Option aktiviert oder deaktiviert die Bildgruppe.
Um die Bilder in einer Bildgruppe anzuzeigen, hinzuzufügen oder zu löschen, klicken Sie auf die Option "Bilder anzeigen", die der Bildgruppe entspricht.
Ihnen wird die folgende Oberfläche angezeigt.
Hier können Sie ein neues Bild hinzufügen, vorhandene Bilder innerhalb einer Gruppe löschen oder ändern.
4.0-Anpassungseinstellungen für Site-Produkte
Die Konfigurationseinstellungen für Schriftarten, Farben und Bildgruppen werden in Abschnitt 3.2, 3.3 erläutert. Und 3.4 gilt für alle Site-Produkte. Diese Einstellungen können als globale Einstellungen bezeichnet werden. Davon abgesehen können die Einstellungen auch auf Produktebene vorgenommen werden. Diese Einstellungen beziehen sich speziell auf das Produkt, das der Administrator im Backoffice konfiguriert hat. Im Folgenden werden die Produktanpassungseinstellungen für einzelne Produkte erläutert. Der Site-Administrator kann diese Einstellungen für jedes Produkt im Geschäft unterschiedlich anwenden. Führen Sie die folgenden Schritte aus, um die Produktanpassungseinstellungen für einzelne Produkte zu konfigurieren: 1. Gehen Sie im Admin-Bereich in der linken Menüleiste der Benutzeroberfläche zur Option "Katalog".
2.Klicken Sie unter "Katalog" auf die Option "Produkte".
Sie sehen eine Liste der Geschäftsprodukte sowie eine Option zum Bearbeiten oder Konfigurieren des Produkts. Der Bildschirm für Geschäftsprodukte wurde unten gezeigt:
Wenn Sie für ein Produkt auf die Schaltfläche "Bearbeiten" klicken, werden die folgenden Konfigurationseinstellungen angezeigt. Wählen Sie die Registerkarte Product Designer / Customizer.
Die vollständigen Einstellungen für Produktdesigner / -anpasser sind nun in vier Gruppen unterteilt:
- Konfiguration
- Preise
- Text
- Seiten
4.1-Konfiguration
- Aktivieren deaktivieren: Diese Option aktiviert oder deaktiviert das Produktanpassungsfenster auf der Produktseite im Frontend.
- Erforderlich für die Produktanpassung: Aktivieren Sie diese Option, wenn Sie Produktanpassungen für Kunden vornehmen möchten.
- Bildgröße hochladen: Diese Option legt die maximale Größe für das Hochladen von Bildern fest.
- Bild hochladen Preis: Diese Option legt den Preis für das Hochladen eines Bildes fest.
- Zeigen Sie die Option zum Herunterladen von PNG an: Aktivieren oder deaktivieren Sie die Option zum Herunterladen von PNG-Bildern.
- Bild-Upload zulassen: Aktivieren oder deaktivieren Sie die Option zum Hochladen von Bildern auf der Produktanpassungsseite.
- Ändern Sie die Textgröße: Aktivieren Sie diese Option, um die Größenänderung von Text zuzulassen.
- Rotator zum Text anzeigen: Aktivieren Sie diese Option, um die Textrotation zuzulassen.
- Anzeigeoption für QR-Code: Aktivieren oder deaktivieren Sie diese Option, um dem Produkt einen QR-Code hinzuzufügen.
- Transparenz für Bilder anzeigen: Aktivieren Sie diese Option, um die Transparenzoption für Bilder anzuzeigen.
- Anzeigefilter für Bilder: Mit dieser Option können Sie Bildfilter aktivieren oder deaktivieren.
- Filter für Bilder: Wählen Sie mehrere Filter aus, die im Frontend auf der Produktanpassungsseite angezeigt werden sollen.
4.2 Preise
- Text Festpreis: Mit dieser Option können Sie einen festen Preis für den Text festlegen.
- Kosten pro Charakter aktivieren: Sie können diese Option aktivieren, wenn Sie die Kosten pro Charakter berechnen möchten.
- Komplettes Design Festpreis: Mit dieser Option können Sie einen Festpreis für das gesamte Design festlegen. Dieser Preis wird zu den gesamten Anpassungskosten addiert.
- QR Code Preis: Mit dieser Option können Sie einen Preis für den QR-Code festlegen.
4.3-Text
- Textblock anzeigen: Sie können die Textblockoption auf der Produktanpassungsseite ein- oder ausblenden.
- Maximale Textlänge: Mit dieser Option können Sie eine maximale Länge für den Text festlegen.
- Minimale Textlänge: Mit dieser Option können Sie eine Mindestlänge für den Text festlegen.
- Texttransparenz zulassen: Sie können diese Option für die Texttransparenz aktivieren oder deaktivieren.
- Textkurve zulassen: Sie können diese Option für die Textkurve aktivieren oder deaktivieren.
4.4 Sides
- Aktivieren Sie die Seite: Mit dieser Option können Sie die Seite aktivieren oder deaktivieren.
- Seitenname: Mit dieser Option können Sie den Namen für die Seite festlegen.
- Seitenbild: Mit dieser Option können Sie ein Bild hochladen, das die Produktseite zeigt. Diese Einstellungen gelten für eine Seite eines Produkts. Sie können dieselben Einstellungen auch für andere Seiten eines Produkts vornehmen.
Hinweis: Hier können Sie nur die Einstellungen für die Anzahl der Seiten konfigurieren, die in den "Konfigurationseinstellungen" des Produktanpassungsmoduls angegeben sind. Wenn Sie beispielsweise die maximale Anzahl von Seiten als 2 festgelegt haben, können Sie die Einstellungen nur für Seite 1 und Seite 2 konfigurieren.
Wie konfiguriere ich Schriftarten, Farben und Bildgruppen?
Während Sie die Anpassungseinstellungen für ein Produkt ändern, finden Sie oben rechts auf dem Bildschirm die Optionen zum Auswählen verschiedener Schriftarten, Farben und Bildgruppen. Sie finden drei Möglichkeiten als:
1. Schriften konfigurieren
Alle Schriften, die im Abschnitt 3.2 hinzugefügt wurden, werden hier in dieser Oberfläche aufgelistet. Sie können jede Schriftart direkt aktivieren oder deaktivieren.
2. Farben konfigurieren
Alle Farben, die im Abschnitt 3.3 hinzugefügt wurden, werden hier in dieser Benutzeroberfläche aufgelistet. Sie können jede Farbe direkt aktivieren oder deaktivieren.
3. Bildgruppen konfigurieren
Alle im Bereich 3.4 hinzugefügten Bildgruppen sind hier in dieser Oberfläche aufgelistet. Sie können jede Bildgruppe direkt aktivieren oder deaktivieren. Wenn Sie auf die Schaltfläche "Bilder anzeigen" klicken, wird der folgende Bildschirm angezeigt.
5.0-Frontschnittstelle des Prestashop Custom Product Design Module
Sobald der Online-Produktdesigner für das Geschäft installiert und konfiguriert wurde, wird in den allgemeinen Einstellungen der Geschäftsprodukte die Registerkarte Produktdesigner / Customizer-Einstellungen angezeigt. Wenn Sie die Produktanpassungsseite für ein Produkt aktivieren oder deaktivieren möchten, können Sie die Produkteinstellungen einfach unter "Produktkatalog" im Backoffice konfigurieren. Wenn das Product Designer / Customizer-Modul für ein Produkt aktiviert ist, wird auf der Produktseite eine Schaltfläche "Anpassen" angezeigt, wie unten gezeigt:
Wenn Sie auf die Schaltfläche Anpassen klicken, wird dem Kunden ein Popup-Fenster mit verschiedenen Einstellungen für Produktdesign und -anpassung angezeigt. Kunden können eine beliebige Farbe, einen benutzerdefinierten Text, ein benutzerdefiniertes Bild oder einen QR-Code für ein Produkt gemäß ihren Einkaufsanforderungen hinzufügen.
Ihre Kunden können jede Art von Anpassung vornehmen, z. B .: 1.Color
2.Image Kunden können dem Produkt ein Bild hinzufügen. Sie können ein beliebiges Standardbild aus der Bildgruppe auswählen, ein eigenes Bild hochladen oder dem Produkt einen QR-Code hinzufügen.
2a. Wählen Sie ein Bild
2b. Bild hochladen
Angenommen, der Kunde fügt das hochgeladene Bild auf der Rückseite von Hoodie hinzu. 2c. QR-Code hinzufügen
3.Text
Speichern der Produktanpassung
Ebenso kann der Kunde Anpassungen an anderen Produkten des Geschäfts vornehmen, wie z. B. an Tassen- und Telefonbehältern.
Warenkorb-Übersichtsseite für benutzerdefinierte Produkte Das folgende Frontend-Bild zeigt, wie das benutzerdefinierte Produkt auf der Warenkorbseite mit verschiedenen Optionen für die Kunden angezeigt wird, nachdem Sie auf die Schaltfläche "Anpassung speichern" geklickt haben.
Der Kunde kann die Rechnung für dieses kundenspezifische Produkt wie unten gezeigt anzeigen.
Bestellverlaufsseite mit Rechnung
Wenn der Kunde auf die Schaltfläche Details klickt, wird der folgende Bildschirm angezeigt:
Auftragsansicht über Admin Panel Admin kann die Auftragsrechnung und die gesamte Konfiguration in Bezug auf die Produktanpassung über das Backoffice anzeigen. Die Details einer Bestellung können im Admin-Bereich unter "Bestellungen" eingesehen werden.
Durch Klicken auf die Schaltfläche "Anzeigen", die einem Produkt entspricht, kann der Administrator die vollständigen Bestelldetails des benutzerdefinierten Produkts überprüfen.
Wenn der Administrator auf die Schaltfläche Details anzeigen klickt, werden die vollständigen Details des personalisierten Produkts in Form eines Popup-Bildschirms angezeigt (siehe Abbildung unten).
Der Administrator kann auf die Option "Vorschau" klicken, um das dem Produkt hinzugefügte benutzerdefinierte Bild anzuzeigen, das wie folgt aussieht.
