1.0 Wprowadzenie
Jako właściciel sklepu zawsze myślałeś o pomnożeniu konwersji w sklepie, ale nie o doświadczeniach zakupowych swoich klientów. Szczęśliwy i zadowolony klient to ten, który wraca do sklepu w poszukiwaniu kolejnych przedmiotów. Jeśli więc chcesz zwrócić klientów w swoim sklepie, spraw, aby doświadczenia klientów trwały wiecznie, integrując dodatek Prestashop Product Designer / Customizer w swoim sklepie eCommerce. Dzięki modułowi Prestashop Custom Product Design sprzedawcy sklepów mogą oferować swoim klientom intuicyjne i kreatywne opcje dostosowywania produktów online, dzięki czemu mogą przekształcić podstawową wersję produktu w nowoczesny, elegancki i niepowtarzalny design. Dodatek dostosowywania produktu Prestashop umożliwia administratorowi wyświetlanie strony panelu dostosowywania produktu, gdy użytkownik kliknie przycisk Dostosuj na stronie produktu. Klienci mogą łatwo dodawać bogate kolorowe teksty z efektami, przesyłać swoje zdjęcia z filtrami, dodawać kod QR, aby był odpowiedni dla ich potrzeb.
1.1 Uderzające cechy Prestashop Product Customization Addon
Do skonfigurowania lub zmodyfikowania ustawień modułu Prestashop Custom Product Design nie są wymagane żadne szczegóły dotyczące kodowania. Dzięki temu modułowi wszystko jest łatwe. Pozwala szybko sprawdzić różne funkcje oferowane przez ten dodatek Prestashop.
- Prestashop Product Designer / Customizer addon pomaga zaoferować szeroką gamę dostosowywanych produktów w Twoim sklepie internetowym. Używając niestandardowego dodatku do produktu Prestashop, klienci mogą łatwo kupować i czerpać korzyści z rozszerzonych produktów online, które można spersonalizować zgodnie z ich potrzebami.
- Projektant produktów online dodaje widok projektanta produktów, aby potencjalni nabywcy mieli możliwość dostosowania produktu w czasie rzeczywistym. Moduł konfiguratora produktu pozwala administratorowi Prestashop dodać inny zestaw opcji dostosowywania dla każdego innego produktu w sklepie.
- Dzięki integracji modułu projektanta produktów Prestashop klienci mogą uzyskać dostęp do panelu dostosowywania produktu za pomocą dowolnego produktu, który chcą kupić, takiego jak koszulki, kubek, pierścionki lub inny rodzaj produktu, który można spersonalizować zgodnie z ich potrzebami.
- Dodatek dostosowywania produktu Prestashop pokazuje przycisk Dostosuj dla każdego dostosowywanego produktu w sklepie. Administrator może włączyć opcje dostosowywania tylko dla wybranych produktów.
- Pełna funkcjonalność dodatku Prestashop Product Designer / Customizer może być włączona lub wyłączona. Gdy ten moduł jest wyłączony, standardowe opcje dostosowywania produktu są wyświetlane na stronie produktu.
- Zaawansowany moduł dostosowywania produktu pokazuje kalkulację ceny dostosowywania w czasie rzeczywistym na stronie produktu.
- Dzięki niestandardowemu dodatkowi projektanta produktu Prestashop, administrator może ustawić strony projektu produktu, które są dostępne dla użytkownika.
- Moduł konfiguratora produktu umożliwia administratorowi włączanie lub wyłączanie opcji pobierania plików PDF dla klientów na interfejsie.
- Moduł Prestashop Extended Product Customization daje możliwość dodania predefiniowanych obrazów dla produktu. Wstępnie zdefiniowane obrazy są zwykle definiowane w grupy. Klienci mogą przesyłać i ustawiać dowolne własne zdjęcia.
- Klient może elastycznie używać żądanych czcionek, kolorów i filtrów dla produktu za pomocą tego modułu projektanta produktów Prestashop.
- Ten zaawansowany moduł dostosowywania produktu pozwala administratorowi definiować ceny dla różnych opcji dostosowywania.
- Moduł dostosowywania produktu Prestashop daje również możliwość spersonalizowania produktu za pomocą kodu QR, dla którego administrator może określić oddzielną cenę.
- Dodatek do niestandardowego projektanta produktu Prestashop automatycznie dodaje kompletną cenę stałą do ostatecznej ceny dostosowanej do produktu.
- Prestashop Product Designer / Customizer addon obsługuje kompatybilność z wieloma sklepami i wieloma językami.
- Prestashop niestandardowy dodatek do projektanta produktu jest mobilny reagujący i kompatybilny z różnymi motywami Prestashop.
1.2 Technology for Development
- Język: PHP
- Praca w ramce: prestashop
Podręcznik instalacji 2.0 dla modułu Advanced Product Customizer
Administrator sklepu może wykonać te proste czynności, aby zainstalować dodatek do dostosowywania produktów Prestashop w swoim sklepie eCommerce: 1. Najpierw pobierz pakiet dodatków ze sklepu Knowband. 2. Otrzymasz spakowany plik zawierający kod źródłowy i instrukcję obsługi. Rozpakuj cały pakiet w katalogu głównym sklepu Prestashop za pomocą menedżera FTP (jak Filezilla lub WinSCP
Dodatek niestandardowego projektanta produktu Prestashop jest teraz zainstalowany i gotowy do użycia. Teraz administrator może skonfigurować różne ustawienia konfiguracji zgodnie z ich witryną Prestashop.
3.0 Admin Interface modułu Prestashop Advanced Product Customizer
Zaraz po udanej instalacji dodatku Prestashop Product Designer / Customizer w Twojej witrynie możesz skonfigurować ustawienia panelu dostosowywania produktu do swoich potrzeb. W panelu administracyjnym lub na pulpicie nawigacyjnym kliknij „Moduły i usługi”, a następnie przycisk „Konfiguruj” znajdujący się obok kreatora produktu Knowband / Customizer.
Tutaj, w następnym interfejsie, znajdziesz kompletne ustawienia modułu Product Designer / Customizer wraz z jego podsekcjami, jak podano poniżej.
Ten moduł dostosowywania produktu Knowband składa się z czterech podsekcji, które zostały omówione dalej. 1.Configuration 2.Fonts 3.Colors 4.Image Group Każda zakładka modułu Prestashop Extended Product Customization została omówiona poniżej:
Konfiguracja 3.1
W ustawieniach konfiguracyjnych dodatku do dostosowywania produktu Prestashop można wykonać podstawowe ustawienia panelu dostosowywania pokazane klientom na interfejsie użytkownika.
- Włącz / Wyłącz: Dzięki tej opcji możesz całkowicie włączyć lub wyłączyć funkcję modułu Prestashop Extended Product Customization dla klientów.
- Wyświetl opcję pobrania pliku PDF w koszyku: Możesz włączyć lub wyłączyć tę opcję, aby pobrać obraz projektu w pliku PDF na stronie Zamówienie administratora.
- Pokaż podgląd projektu w PDF faktury: Włącz lub wyłącz tę opcję, aby wyświetlić lub ukryć podgląd projektu w pliku PDF faktury.
- Maksymalna liczba slajdów: Korzystając z tej opcji, można ustawić maksymalną liczbę stron produktu, które można dostosować z interfejsu użytkownika.
Czcionki 3.2
W tej sekcji modułu projektanta produktów Prestashop właściciel sklepu ma możliwość dodania kilku czcionek, które klient może wybrać, aby wydrukować stylizowany tekst na produkcie. Pierwszy interfejs pokazany poniżej pokazuje listę istniejących czcionek dostępnych na nakładce. Można dodać nową czcionkę lub zmodyfikować lub usunąć istniejącą czcionkę.
Tutaj możesz wykonać dwie pozostałe akcje jako:
1. Dodawanie nowej czcionki
Aby dodać nowy styl czcionki, wykonaj następujące czynności: Kliknij kartę Czcionki, a następnie przycisk „+” (Dodaj czcionkę) na panelu zaplecza. Zostanie wyświetlony poniższy interfejs.
- Aktywny: Ta opcja włącza lub wyłącza czcionkę.
- Tytuł czcionki: Używając tej opcji, możesz ustawić tytuł czcionki taki sam, jak wspomniano w Google Font.
- Umieść czcionkę @import: Aby użyć czcionki Google, musisz osadzić importowaną klasę czcionek. W tym celu musisz:
- Kliknij link „Google Fonts” znajdujący się tuż pod opcją. Wyświetlony zostanie poniższy ekran.
- Wybierz dowolną czcionkę i kliknij przycisk Dodaj „+” dla tego stylu czcionki.
- Po dodaniu czcionki pojawi się okienko, które wyświetli listę wybranych czcionek. Kliknij zakładkę Embed, a następnie przycisk @Import.
- Skopiuj adres URL @import tej czcionki i wklej go w polu Osadź @ Czcionka importu.
2. Edytuj istniejącą czcionkę
Jeśli chcesz edytować istniejącą czcionkę, kliknij przycisk Edytuj podany obok stylu czcionki. Zobaczysz następujące opcje:
- Aktywny: Włącz lub wyłącz styl czcionki.
- Styl czcionki: Edytuj tytuł czcionki za pomocą tej opcji.
- Osadź @ Czcionkę importu: Zmodyfikuj importowany adres URL tej konkretnej czcionki.
3.3 Kolory
W tej sekcji modułu Konfigurator produktu można zdefiniować własną paletę kolorów i pozwolić klientom wybrać dowolny kolor dla wybranego produktu. Poniższy interfejs pokazuje listę istniejących kolorów, które można edytować, lub w razie potrzeby można dodać nowy kolor.
1. Dodawanie nowego koloru
- Kod koloru: Za pomocą tej opcji wybierz żądany kolor, który będzie wyświetlany na stronie dostosowywania produktu.
- Aktywny: włącz lub wyłącz kolor.
2. Edytuj istniejący kolor
- Kod koloru: Za pomocą tej opcji wybierz żądany kolor, który będzie wyświetlany na stronie dostosowywania produktu.
- Aktywny: włącz lub wyłącz istniejący kolor.
Grupy obrazów 3.4
W przypadku wybranego produktu klient może wybrać dowolne domyślne obrazy dostarczone przez właściciela sklepu lub przesłać nowy niestandardowy obraz do dostosowania produktu. Domyślne obrazy zostały sklasyfikowane jako grupy obrazów. Te istniejące grupy obrazów można edytować lub można nawet dodać nową grupę obrazów.
1. Dodawanie nowej grupy obrazów
- Nazwa grupy obrazów: Możesz ustawić żądaną nazwę dla grupy obrazów.
- Załaduj obrazek: Możesz przesłać i ustawić obraz logo grupy obrazów.
- Aktywny: Ta opcja włącza lub wyłącza grupę obrazów.
2. Edytuj istniejącą grupę obrazów
- Nazwa grupy obrazów: Możesz ustawić żądaną nazwę dla grupy obrazów.
- Załaduj obrazek: Możesz przesłać i ustawić obraz logo grupy obrazów.
- Aktywny: Ta opcja włącza lub wyłącza grupę obrazów.
Aby wyświetlić, dodać lub usunąć obrazy w dowolnej grupie obrazów, kliknij opcję „Wyświetl obrazy” odpowiadającą grupie obrazów.
Zostanie wyświetlony następujący interfejs.
Tutaj możesz dodać nowy obraz, usunąć lub zmienić istniejące obrazy w grupie.
Ustawienia dostosowywania 4.0 dla produktów serwisu
Ustawienia konfiguracji czcionek, kolorów, grup obrazów omówione w sekcji 3.2, 3.3. A 3.4 ma zastosowanie do wszystkich produktów serwisu. Ustawienia te można nazwać ustawieniami globalnymi. Poza tym ustawienia można również wykonać na poziomie produktu. Ustawienia te są specyficzne dla produktu, który administrator skonfigurował z zaplecza. Poniżej omówiono ustawienia dostosowywania produktu dla poszczególnych produktów. Administrator witryny może zastosować te ustawienia inaczej dla każdego produktu w sklepie. Aby skonfigurować ustawienia dostosowywania produktu dla poszczególnych produktów, wykonaj następujące kroki: 1.W panelu administracyjnym przejdź do opcji „Katalog” w lewym pasku menu interfejsu.
2.Kliknij opcję „Produkty” w obszarze „Katalog”.
Zobaczysz listę produktów sklepu wraz z opcją edycji lub konfiguracji produktu. Ekran produktów sklepu został pokazany poniżej:
Po kliknięciu przycisku „Edycja” produktu można znaleźć następujące ustawienia konfiguracji. Wybierz zakładkę Product Designer / Customizer.
Teraz kompletne ustawienia projektanta produktu / konfiguratora są podzielone na cztery grupy, a mianowicie:
- konfiguracja
- ceny
- tekst
- Strony
Konfiguracja 4.1
- Włącz / Wyłącz: Ta opcja włącza lub wyłącza panel dostosowywania produktu na stronie produktu w interfejsie użytkownika.
- Wymagane do dostosowania produktu: Włącz tę opcję, jeśli chcesz zlecić dostosowanie produktu dla klientów.
- Prześlij rozmiar obrazu: Ta opcja ustawi maksymalny rozmiar przesyłanego obrazu.
- Prześlij cenę obrazu: Ta opcja ustawi cenę za przesłanie obrazu.
- Wyświetl opcję pobierania PNG: Włącz lub wyłącz opcję pobierania obrazu PNG.
- Zezwalaj na przesyłanie obrazów: Włącz lub wyłącz opcję przesyłania obrazów na stronie dostosowywania produktu.
- Zmień rozmiar tekstu: Włącz tę opcję, aby zezwolić na zmianę rozmiaru tekstu.
- Wyświetl Rotator do tekstu: Włącz tę opcję, aby umożliwić obracanie tekstu.
- Opcja wyświetlania kodu QR: Włącz lub wyłącz jego opcję dodawania kodu QR do produktu.
- Przejrzystość wyświetlania dla obrazów: Włącz tę opcję, aby wyświetlić opcję przezroczystości dla obrazów.
- Filtry wyświetlania dla obrazów: Za pomocą tej opcji można włączyć lub wyłączyć filtry obrazu.
- Filtry do zdjęć: Wybierz wiele filtrów, które chcesz pokazać w interfejsie na stronie dostosowywania produktu.
Ceny 4.2
- Stała cena tekstu: Ta opcja pozwala ustawić stałą cenę za tekst.
- Włącz koszt za postać: Możesz włączyć tę opcję, jeśli chcesz pobierać koszt za znak.
- Kompletna cena ustalona: Ta opcja pozwala ustawić stałą cenę za cały projekt. Ta cena jest dodawana do całkowitego kosztu dostosowania.
- Cena kodu QR: Za pomocą tej opcji możesz ustawić cenę kodu QR.
Tekst 4.3
- Wyświetl blok tekstu: Możesz pokazać lub ukryć opcję bloku tekstowego na stronie dostosowywania produktu.
- Maksymalna długość tekstu: Używając tej opcji, możesz ustawić maksymalną długość tekstu.
- Minimalna długość tekstu: Korzystając z tej opcji, możesz ustawić minimalną długość tekstu.
- Zezwalaj na przezroczystość tekstu: Możesz włączyć lub wyłączyć tę opcję dla przejrzystości tekstu.
- Zezwalaj na krzywą tekstową: Możesz włączyć lub wyłączyć tę opcję dla krzywej tekstowej.
Boki 4.4
- Włącz stronę: Dzięki tej opcji możesz włączyć lub wyłączyć stronę.
- Nazwa boczna: Ta opcja pozwala ustawić nazwę strony.
- Obraz boczny: Ta opcja umożliwia przesłanie obrazu przedstawiającego stronę produktu. Te ustawienia dotyczą jednej strony produktu. Możesz wykonać te same ustawienia dla innych stron produktu.
Uwaga: Tutaj możesz skonfigurować tylko ustawienia liczby stron, jak wspomniano w „ustawieniach konfiguracji” modułu dostosowywania produktu. Na przykład, jeśli ustawiłeś „maksymalną liczbę stron” jako 2, możesz skonfigurować tylko ustawienia dla 1 i 2.
Jak skonfigurować czcionki, kolory i grupy obrazów?
Podczas zmiany ustawień dostosowywania produktu dostępne są opcje wyboru różnych czcionek, kolorów i grup obrazów w prawym górnym rogu ekranu. Znajdziesz trzy opcje:
1. Konfiguruj czcionki
Wszystkie czcionki dodane w sekcji 3.2 są wymienione tutaj w tym interfejsie. Możesz bezpośrednio włączyć lub wyłączyć dowolną czcionkę.
2. Konfiguruj kolory
Wszystkie kolory dodane w sekcji 3.3 są wymienione tutaj w tym interfejsie. Możesz bezpośrednio włączyć lub wyłączyć dowolny kolor.
3. Konfiguruj grupy obrazów
Wszystkie grupy obrazów dodane w sekcji 3.4 są wymienione tutaj w tym interfejsie. Możesz bezpośrednio włączyć lub wyłączyć dowolną grupę obrazów. Po kliknięciu przycisku „Wyświetl obrazy” zobaczysz następujący ekran.
5.0 Front Interface modułu Prestashop Custom Design Design
Po zainstalowaniu i skonfigurowaniu Projektanta produktów online dla sklepu, zakładka Ustawienia produktu / Dostosowanie jest wyświetlana w ogólnych ustawieniach produktów sklepu. Jeśli chcesz włączyć lub wyłączyć stronę dostosowywania produktu dla produktu, możesz po prostu skonfigurować ustawienia produktu w „Katalogu produktów” na zapleczu. Gdy moduł Product Designer / Customizer jest włączony dla produktu, na stronie produktu pojawi się przycisk „Dostosuj”, jak pokazano poniżej:
Po kliknięciu przycisku Dostosuj, klientowi zostanie wyświetlony ekran podręczny, który będzie się składał z różnych ustawień produktu i ustawień dostosowywania. Klienci mogą dodać dowolny kolor, niestandardowy tekst, niestandardowy obraz lub kod QR dla produktu zgodnie z potrzebami zakupowymi.
Twoi klienci mogą wykonywać dowolne dostosowania, takie jak: 1.Color
2.Image Klienci mogą dodać obraz do produktu. Mogą wybrać dowolny domyślny obraz z grupy obrazów lub przesłać własny obraz lub dodać kod QR do produktu.
2a. Wybierz obraz
2b. Załaduj obrazek
Załóżmy, że klient dodaje przesłany obraz z tyłu bluzy. 2c. Dodaj kod QR
3.Text
Zapisywanie dostosowywania produktu
Podobnie klient może zastosować dostosowania do innych produktów sklepu, takich jak kubki i etui na telefony.
Strona podsumowania koszyka dla produktu niestandardowego Poniższy obraz interfejsu pokazuje, jak niestandardowy produkt wyświetla się na stronie koszyka z różnymi opcjami dla klientów po kliknięciu przycisku „Zapisz dostosowywanie”.
Klient może wyświetlić fakturę tego dostosowanego produktu, jak pokazano poniżej.
Strona historii zamówień z fakturą
Po kliknięciu przycisku Szczegóły klient zobaczy następujący ekran:
Widok zamówienia z panelu administracyjnego Administrator może wyświetlić fakturę zamówienia i całą konfigurację dotyczącą dostosowania produktu z zaplecza. Szczegóły zamówienia można zobaczyć w sekcji Zamówienia panelu administracyjnego.
Po kliknięciu przycisku Wyświetl odpowiadającego produktowi administrator może sprawdzić pełne szczegóły zamówienia niestandardowego produktu.
Po kliknięciu przycisku Wyświetl szczegóły administrator zobaczy pełne szczegóły spersonalizowanego produktu w formie wyskakującego ekranu, jak pokazano poniżej.
Administrator może kliknąć opcję „Podgląd”, aby zobaczyć niestandardowy obraz dodany do produktu, który wygląda jak poniżej.
