Lookbook Zakupowy: Shop the Look
Instalacja i obsługa lookbooka zakupowego: tworzenie looka, umieszczanie hotspotów, wybór wariantów, karuzela lub widok rozwinięty i zakup looka jednym kliknięciem.
Moduł Lookbook Zakupowy — Shop the Look zamienia Twoje zdjęcia aranżacyjne w interaktywne witryny: umieszczasz klikalne punkty (hotspoty) na produktach widocznych na zdjęciu, a odwiedzający mogą poznać każdy artykuł i dodać cały look do koszyka jednym kliknięciem. Ta dokumentacja obejmuje instalację, tworzenie looka, wybór wariantów, tryby wyświetlania i zachowanie po stronie sklepu.
Zgodność
- PrestaShop 8.0 do 8.2
- PrestaShop 9.0
- Pojedynczy sklep i wielosklepowość
- Interfejs przetłumaczony na 8 języków (EN, FR, DE, ES, IT, PL, PT, NL)
- Motywy oparte na Classic
Instalacja
- Przejdź do Moduły > Menedżer modułów w panelu administracyjnym.
- Kliknij Wgraj moduł i wybierz plik
dfshopthelook.zip. - Po instalacji w menu Katalog pojawia się nowa zakładka Shop The Look.
Podczas instalacji moduł automatycznie rejestruje swoje hooki wyświetlania (strona główna i strona produktu) oraz tworzy tabele potrzebne do przechowywania looków i ich hotspotów.
Tworzenie pierwszego looka
Otwórz Katalog > Shop The Look, a następnie kliknij Dodaj nowy look.
1. Podaj tytuł i zdjęcie
Wpisz tytuł (tłumaczalny w każdym języku) oraz opcjonalnie krótki opis. Następnie wgraj zdjęcie looka: JPG, PNG, GIF lub WEBP, maksymalnie 8 MB, najlepiej o szerokości co najmniej 1200 px. Zaraz po wybraniu pliku w edytorze pojawia się podgląd, jeszcze przed zapisaniem.
2. Umieść hotspoty
Kliknij bezpośrednio na zdjęciu w miejscu, gdzie znajduje się produkt: otworzy się okno wyszukiwania. Wpisz nazwę lub numer referencyjny produktu i wybierz go z listy (miniatury ułatwiają identyfikację).
Punkt możesz w każdej chwili przesunąć, przeciągając go myszką. Współrzędne zapisywane są procentowo, co gwarantuje wierne rozmieszczenie niezależnie od rozmiaru wyświetlanego zdjęcia w sklepie.
3. Wybierz wariant widoczny na zdjęciu
Jeśli wybrany produkt ma warianty, pojawia się drugi krok: „Który wariant jest widoczny na zdjęciu?”. Wybierz dokładnie tę kombinację, którą widać na obrazie (na przykład „Kolor: Ecru, Rozmiar: M”), albo pozostaw Wariant domyślny, jeśli zdjęcie nie pokazuje konkretnej wersji.
Ten wariant pozostaje zmienialny w dowolnym momencie: każdy punkt na liście pod zdjęciem ma własną listę rozwijaną. Możesz więc poprawić kolor lub rozmiar w looku zapisanym dawno temu, bez usuwania i ponownego umieszczania hotspotu.
Jeśli przypisany wariant zostanie później usunięty z katalogu, lista automatycznie wraca do pozycji „Wariant domyślny”.
4. Zarządzaj listą punktów
Pod zdjęciem każdy hotspot pojawia się ze swoim numerem, powiązanym produktem, wariantem i współrzędnymi. Użyj ikony kosza, aby usunąć punkt. Możesz umieścić dowolną liczbę hotspotów, a nawet powiązać kilka punktów z tym samym produktem.
5. Wyróżnienie i zapis
Włącz Wyróżniony na stronie głównej, jeśli ten look ma zasilać karuzelę na stronie głównej. Ustaw pozycję (kolejność wyświetlania) oraz stan Włączony, a następnie kliknij Zapisz.
Na liście looków kolumna Wyróżniony pozwala przełączyć ten stan jednym kliknięciem, bez otwierania formularza.
Konfiguracja wyświetlania
Na stronie konfiguracji modułu (Menedżer modułów > Konfiguruj) niezależnie sterujesz stroną główną i stroną produktu.
Dwa tryby do wyboru
- Karuzela: kilka looków prezentowanych obok siebie jako karty. Kliknięcie otwiera pełne okno.
- Pojedynczy rozwinięty look: jeden look osadzony bezpośrednio na stronie, zdjęcie po lewej i lista produktów po prawej, bez żadnego okna popup.
Oba miejsca konfiguruje się osobno: możesz na przykład pokazać duży rozwinięty look na stronie głównej i karuzelę na stronie produktu.
Strona główna
W trybie karuzeli wyświetlane są wyłącznie looki wyróżnione, do ustalonego przez Ciebie limitu. W trybie pojedynczego looka wybierz żądany look z listy Look wyświetlany na stronie głównej albo pozostaw „Pierwszy wyróżniony look”.
Jeśli wybrany look zostanie później usunięty lub wyłączony, moduł automatycznie przechodzi na pierwszy wyróżniony look, aby uniknąć pustego bloku na stronie głównej.
Strona produktu
W trybie karuzeli wyświetlane są looki zawierające oglądany artykuł, do ustalonego limitu. W trybie pojedynczego looka rozwinięty zostaje najlepiej pasujący look zawierający ten artykuł. Nie trzeba niczego wybierać ręcznie.
Wybór wariantu przez klienta
Opcja Pozwól klientom zmieniać wariant wyświetla listę wyboru przy każdym produkcie po stronie sklepu. Po wyłączeniu obowiązują warianty wybrane w panelu administracyjnym. Włącz ją w modzie (klient wybiera rozmiar), wyłącz w wystroju wnętrz, jeśli look ma pozostać niezmienny.
Po stronie sklepu
Karuzela
Pozioma karuzela prezentuje Twoje looki w formie kart. Każda karta pokazuje zdjęcie, plakietkę z liczbą produktów oraz dwa przyciski po najechaniu kursorem: Zobacz look i Kup look.
Okno „Zobacz look”
Kliknięcie Zobacz look (lub karty) otwiera pełne okno: powiększone zdjęcie z pulsującymi punktami po jednej stronie, lista produktów po drugiej. Najechanie na wiersz produktu podświetla odpowiadający mu punkt na zdjęciu i odwrotnie.
Widok rozwinięty
W trybie pojedynczego looka ta sama zawartość jest osadzona bezpośrednio na stronie, bez popupu. Kliknięcie punktu podświetla odpowiedni wiersz produktu. Na urządzeniach mobilnych obie kolumny układają się jedna pod drugą.
Cena i dostępność dla wariantu
Każdy produkt pokazuje cenę i zdjęcie swojego wariantu, sformatowane zgodnie z aktywną walutą i językiem. Jeśli lista wyboru jest włączona, zmiana wariantu aktualizuje cenę i stan magazynowy na żywo. Artykuły niedostępne są oznaczone.
„Kup look” jednym kliknięciem
Przycisk Kup look dodaje do koszyka, w jednym działaniu, wszystkie produkty powiązane ze zdjęciem. Moduł:
- dodaje wariant wybrany przez klienta, w przeciwnym razie ten przypisany w panelu administracyjnym, a w ostateczności wariant domyślny;
- respektuje ilość minimalną ustawioną na produkcie;
- automatycznie pomija artykuły niedostępne bez zgody na zamówienie oczekujące;
- deduplikuje produkty umieszczone w kilku punktach.
Koszyk PrestaShop jest następnie odświeżany natywnie, a powiadomienie potwierdza dodanie. Jeśli niektórych produktów nie udało się dodać, komunikat o tym informuje.
Wielojęzyczność
Interfejs modułu jest przetłumaczony na osiem języków (EN, FR, DE, ES, IT, PL, PT, NL) i podąża za aktywnym językiem sklepu. Tytuł i opis każdego looka tłumaczy się natomiast język po języku bezpośrednio w formularzu looka.
Aktualizacja z wcześniejszej wersji
Aktualizacje przebiegają automatycznie: wgraj nową wersję z menedżera modułów, a PrestaShop uruchomi skrypty migracji. Twoje looki, hotspoty i zdjęcia zostają zachowane.
Po aktualizacji do 1.2.0 wszystkie istniejące looki są oznaczone jako wyróżnione, a oba miejsca pozostają w trybie karuzeli: sklep zachowuje się dokładnie tak jak wcześniej, a nowości włączasz wtedy, kiedy chcesz.
Rozwiązywanie problemów
Karuzela nie pojawia się na stronie głównej. Sprawdź, czy co najmniej jeden look jest włączony i wyróżniony: od wersji 1.2.0 karuzela na stronie głównej pokazuje wyłącznie looki wyróżnione. W konfiguracji pojawia się zresztą ostrzeżenie, gdy nie ma żadnego.
Blok nie pojawia się na stronie produktu. Blok wyświetla się tylko wtedy, gdy co najmniej jeden aktywny look zawiera oglądany produkt i odpowiednia opcja jest włączona.
Nie pojawia się lista wyboru wariantu. Jest wyświetlana tylko wtedy, gdy opcja „Pozwól klientom zmieniać wariant” jest włączona, a produkt ma co najmniej dwa warianty.
Produkt nie zostaje dodany przez „Kup look”. To zachowanie oczekiwane, gdy produkt jest niedostępny bez zgody na zamówienie oczekujące, wyłączony, niedostępny do sprzedaży lub nieprzypisany do bieżącego sklepu.
Wgranie zdjęcia kończy się niepowodzeniem. Folder modules/dfshopthelook/views/img/looks/ musi mieć uprawnienia do zapisu. W przeciwnym razie w konfiguracji modułu pojawia się ostrzeżenie.
Odinstalowanie
Odinstalowanie z menedżera modułów usuwa tabele modułu, looki, ich hotspoty oraz wgrane zdjęcia looków. Pamiętaj, aby wcześniej zapisać kopię swoich materiałów, jeśli chcesz je zachować.