Spis sekcji w tej bazie wiedzy:
Czym jest Hot Basket i jak ją zainstalować?
Jak skonfigurować moduł Integracyjny
Konfiguracja produktów HotBasket
Kiedy pokazywać produkt HotBasket? Warunki widoczności
Konfiguracja Hot Basket na szablonie RWD
| HotBasket to aplikacja dla sklepów Shoper, która umożliwia wyświetlanie dodatkowych produktów (cross-sell/upsell) bezpośrednio w koszyku zakupowym. Klient może jednym kliknięciem dodać lub usunąć te produkty - bez przeładowania strony. |
1. Czym jest dodatek Hot Basket?
Hot Basket to aplikacja dla platform Shoper, która umożliwia wyświetlenie dodatków do koszyka w formie prostych pól typu checkbox. W ten sposób możesz w prosty i atrakcyjny sposób sprzedać klientowi dodatkowe produkty o które warto uzupełnić koszyk.
Typowe zastosowania:
- pakowanie na prezent jako płatna opcja
- akcesoria do produktu w koszyku
- produkty obowiązkowe (np. montaż, ubezpieczenie)
- produkty cross-sell (np. pasujące etui do telefonu)
Jak zainstalować aplikację?
1. Zaloguj się do panelu administracyjnego Shoper.
2. Przejdź do: Dodatki i integracje → Aplikacje
3. Kliknij Wybierz filtry i wyszukaj Hot Basket
4. Kliknij Zainstaluj aplikację i zaakceptuj zgody.
5. Aplikacja pojawi się w zakładce Aplikacje → Moje aplikacje
2. Warianty modułu
HotBasket występuje w 2 wersjach modułu, różnią się one sposobem osadzenia w sklepie. Moduł dostępny w SVE można umieścić w dowolnym miejscu w sklepie. Moduł Integracyjny działa tylko w koszyku. Licencje Shoper Standard nie umożliwiają edycji koszyka, dlatego modułu SVE nie umieścisz w koszyku. Zrobisz to wykorzystując moduł Integracyjny
Osobnym wariantem jest moduł dla szablonów RWD, tam konfiguracja odbywa się w innym miejscu. Szczegóły opisane są w punkcie 6.
| 💡 Wskazówka: Jeśli masz plan Standard i chcesz umieścić moduł w koszyku, użyj wariantu Integracja. Jeśli chcesz umieścić moduł np. na stronie głównej lub masz plan Premium, użyj wariantu SVE. |
3. Wariant SVE - konfiguracja
Jak dodać moduł SVE
- Otwórz edytor stron Shoper (SVE).
- Wybierz stronę, na której ma się pojawić moduł (np. stronę koszyka — wymagany plan Premium, lub inną stronę).
- Kliknij "Dodaj" i odszukaj "HotBasket" na liście modułów.
- Przeciągnij moduł w wybrane miejsce na stronie.
- Skonfiguruj moduł w panelu po prawej stronie (patrz rozdział 5).
- Kliknij "Zapisz".
| ⚠️ Ważne: Umieszczenie modułu SVE na stronie koszyka wymaga planu Premium. Na planie Standard moduł SVE można dodać na inne strony sklepu (np. strona główna, strona kategorii), ale nie do koszyka. |
3.2 Opcje konfiguracyjne SVE
Panel konfiguracji modułu SVE zawiera dwie sekcje:
Sekcja: Konfiguracja modułu HotBasket
| Opcja | Opis |
| Pokaż tytuł modułu | Włącza/wyłącza wyświetlanie tytułu nad listą produktów. |
| Tytuł modułu | Tekst tytułu (widoczny tylko gdy opcja powyżej jest włączona). Domyślnie: "Nie zapomnij o:". |
| Dodaj obramowanie modułu | Dodaje ramkę wokół całego modułu HotBasket. |
| Kolor obramowania modułu | Kolor ramki modułu (selektor koloru). Domyślnie: #DDDDDD. |
Sekcja: Konfiguracja produktów HotBasket
Konfiguracja produktów wyświetlanych w module - identyczna w obu wariantach. Szczegółowy opis w rozdziale 5.
4. Wariant Integracja - konfiguracja
Wariant integracyjny to rozwiązanie dla sklepów na planie Standard (i wyższych), które pozwala osadzić HotBasket bezpośrednio w koszyku, omijając ograniczenia planu Standard. Konfiguruje się go w innym miejscu niż SVE.
4.1 Jak dodać moduł Integracja
- W panelu administracyjnym Shopera przejdź do edytora SVE
- Kliknij ikonę "Integracje" (wtyczka) w lewym pasku narzędzi.
- Na liście integracji odszukaj "Hot Basket - Koszyk".
- Kliknij integrację, aby otworzyć panel konfiguracji po prawej stronie.
- Skonfiguruj moduł (patrz rozdział 4.2).
- Kliknij "Zapisz".
- Nie zapomnij przełączyć aktywności modułu na "aktywny"
4.2 Dodatkowe opcje konfiguracyjne (tylko wariant Integracja)
Wariant Integracja ma dodatkowe opcje niedostępne w SVE:
Sekcja: Konfiguracja modułu HotBasket – Koszyk
| Opcja | Opis |
| Niestandardowy selektor | Gdy wyłączony: moduł pojawia się standardowo po liście produktów w koszyku. Gdy włączony: moduł pojawia się przy elemencie wskazanym przez własny selektor CSS. |
| Selektor CSS elementu docelowego | Widoczne tylko gdy "Niestandardowy selektor" jest włączony. Podaj selektor CSS elementu, np. #basket-products lub .basket-items. |
| Pozycja wstawiania | Widoczne przy niestandardowym selektorze. Wybór: "Po elemencie" lub "Przed elementem". |
| Wyświetlanie produktu HotBasket na liście w koszyku |
Określa jak wyglądają produkty HotBasket na standardowej liście w koszyku: • Normalnie - widoczne jak inne produkty • Ukryty - niewidoczne na liście (ale są w koszyku) • Wyszarzony - widoczne, ale wygaszone i niemożliwe do usunięcia przez klienta |
| Pokaż tytuł modułu | Jak w wariancie SVE. |
| Tytuł modułu | Jak w wariancie SVE. |
| Dodaj obramowanie modułu | Jak w wariancie SVE. |
| Kolor obramowania modułu | Jak w wariancie SVE. |
Konfiguracja produktów wyświetlanych w module - identyczna w obu wariantach. Szczegółowy opis w rozdziale 5.
| 💡 Tryb "Wyszarzony" jest szczególnie przydatny dla produktów obowiązkowych - klient widzi produkt na liście koszyka, ale nie może go samodzielnie usunąć. |
5. Konfiguracja produktów HotBasket
Sekcja "Konfiguracja produktów HotBasket" jest identyczna w obu wariantach modułu. Pozwala skonfigurować do 10 produktów, które pojawią się na liście HotBasket.
| ⚠️ Ważne: Wszystkie produkty HotBasket powinny być produktami prostymi (bez wariantów). Produkty z wariantami (np. różne rozmiary, kolory) nie będą mogły być prawidłowo dodane do koszyka przez moduł. |
5.1 Dodawanie i zarządzanie produktami
- W sekcji "Konfiguracja produktów HotBasket" kliknij przycisk dodawania nowego produktu.
- Rozwiń konfigurację produktu ("Konfiguracja produktu 1", "Konfiguracja produktu 2" itd.).
- Skonfiguruj każdy produkt wg opcji opisanych poniżej.
- Możesz dodać maksymalnie 10 produktów.
5.2 Opcje konfiguracji pojedynczego produktu
| Opcja | Opis |
| Produkt fizyczny ze sklepu | Wybór produktu z katalogu sklepu (selektor produktów). To jest rzeczywisty produkt, który trafi do koszyka. Pamiętaj, aby był to produkt prosty - bez wariantów. |
| Dodaj obramowanie do produktu | Dodaje ramkę wokół pojedynczego wiersza produktu na liście HotBasket. |
| Kolor obramowania produktu | Kolor ramki produktu (widoczne gdy obramowanie jest włączone). Domyślnie: #DDDDDD. |
| Ikonka zamiast zdjęcia produktu | Gdy włączone: zamiast zdjęcia produktu wyświetlana jest wybrana ikonka. Gdy wyłączone: wyświetlane jest zdjęcie główne produktu. |
| Wybór ikonki | Lista dostępnych ikonek (widoczna gdy opcja ikonki jest włączona). |
| Produkt obowiązkowy | Gdy włączone: produkt jest automatycznie dodawany do koszyka i klient nie może go odznaczyć. Przydatne dla produktów wymaganych (np. montaż, licencja). |
| Zmieniona nazwa produktu | Opcjonalnie: własna nazwa produktu widoczna dla klienta w module. Nie zmienia nazwy w panelu sklepu. Jeśli puste, pobierana jest oryginalna nazwa z Shoper. |
| Opis produktu HotBasket | Opcjonalny własny opis produktu wyświetlany pod nazwą. Obsługuje HTML (edytor WYSIWYG). |
5.3 Dostępne ikonki
Jeśli zamiast zdjęcia produktu chcesz wyświetlić ikonkę, dostępne są następujące opcje:
| Klucz ikonki | Opis |
| icon-gift | Prezent 🎁 |
| icon-basket | Koszyk |
| icon-star | Gwiazdka |
| icon-check-circle | Zaznaczenie |
| icon-alert-circle | Uwaga |
| icon-clock | Zegar |
| icon-cloud | Chmura |
| icon-coffee | Kawa |
| icon-compass | Kompas |
| icon-cpu | Procesor |
| icon-download | Pobieranie |
| icon-home | Dom |
| icon-image | Pusty obrazek |
| icon-plus-circle | Plus |
| icon-zap | Piorun |
| icon-arrow-down-circle | Strzałka w dół |
| icon-arrow-up-circle | Strzałka w górę |
| icon-arrow-left-circle | Strzałka w lewo |
| icon-arrow-right-circle | Strzałka w prawo |
6. Kiedy pokazywać produkt HotBasket? Warunki widoczności
HotBasket pozwala wyświetlać dodatkowe produkty dokładnie wtedy, gdy mają sens dla klienta. Zamiast pokazywać wszystkim tę samą ofertę, możesz ustawić warunki - produkt pojawi się tylko gdy koszyk spełnia Twoje kryteria, reagując na zmiany w czasie rzeczywistym bez przeładowania strony.
| Ważne Poniższa funkcja działa tylko na szablonach Storefront. |
6.1 Do czego służą warunki widoczności?
Kilka przykładów z życia:
- Pasta do butów pojawia się tylko gdy klient kupuje buty z kategorii Obuwie
- Usługa wniesienia mebla wyświetla się gdy łączna waga zamówienia przekracza 30 kg
- Darmowa dostawa jako HotBasket pojawia się gdy klient ma jeszcze 50 zł do progu
- Gratis od producenta X pokazuje się gdy klient kupuje cokolwiek z jego oferty
Bez warunków produkt HotBasket jest zawsze widoczny dla każdego klienta. Warunki dają Ci precyzję.
6.2 Jak włączyć warunki dla produktu
Każdy produkt w konfiguracji HotBasket ma własne, niezależne ustawienia warunków.
- W panelu Shopera otwórz konfigurację modułu HotBasket (moduł integracyjny lub moduł SVE).
- Rozwiń konfigurację produktu HotBasket
- Zaznacz checkbox „Warunki widoczności produktu". Pojawi się sekcja z ustawieniami.
- Wybierz logikę warunków: AND (wszystkie muszą być spełnione) lub OR (wystarczy jeden). Domyślnie ustawione jest AND.
- Włącz i skonfiguruj jeden lub więcej warunków opisanych poniżej.
6.3 Waga koszyka
Zaznacz „Uzależnij od wagi koszyka", a następnie podaj minimalną i/lub maksymalną wagę w kilogramach. Możesz podać ułamki, np. 0.5 oznacza 500 g.
- Zostaw pole puste jeśli nie chcesz sprawdzać danego progu (np. samo minimum bez maksimum)
- Waga jest liczona jako suma wagi wszystkich produktów pomnożona przez ich ilość
- Produkty bez ustawionej wagi w panelu Shopera są liczone jako 0 kg - sprawdź, czy Twoje produkty mają uzupełnioną wagę
|
Przykład Usługa „Wniesienie na piętro" z min = 5 kg pojawi się gdy klient ma w koszyku łącznie co najmniej 5 kg produktów. |
6.4 Konkretny produkt w koszyku
Zaznacz „Pokaż tylko gdy konkretny produkt jest w koszyku", a następnie wybierz produkt przez selektor produktów. Produkt HotBasket pojawi się tylko gdy ten konkretny produkt jest aktualnie w koszyku klienta.
|
Przykład Toner do drukarki pojawi się w koszyku tylko gdy klient kupuje tę konkretną drukarkę. |
6.5 Kategoria w koszyku
Zaznacz „Pokaż tylko gdy produkt z kategorii jest w koszyku", a następnie wpisz ID kategorii w polu tekstowym. Produkt HotBasket pojawi się gdy w koszyku jest co najmniej jeden produkt, którego główna kategoria ma to ID.
| Ważne. Sprawdzana jest tylko główna kategoria każdego produktu. Jeśli produkt jest przypisany do kilku kategorii, liczy się ta oznaczona jako główna w panelu Shopera. |
Jak znaleźć ID kategorii w Shoper?
- W panelu Shopera przejdź do Produkty → Kategorie.
- Kliknij na wybraną kategorię, żeby ją otworzyć do edycji.
- ID pojawi się pod nazwą kategorii.
6.6 Producent w koszyku
Zaznacz „Pokaż tylko gdy produkt danego producenta jest w koszyku", a następnie wpisz ID producenta. Produkt HotBasket pojawi się gdy w koszyku jest co najmniej jeden produkt tego producenta.
Jak znaleźć ID producenta w Shoper?
- W panelu Shopera przejdź do Produkty → Producenci.
- Kliknij na wybranego producenta, żeby otworzyć go do edycji.
- Id będzie widoczne obok nazwy producenta w nawiasie
|
Przykład Wpisz ID producenta Nike - produkt HotBasket „Gratis od Nike" pojawi się gdy klient kupuje cokolwiek tej marki. |
6.7 Cena koszyka
Zaznacz „Uzależnij od ceny koszyka", a następnie podaj minimalną i/lub maksymalną kwotę w walucie sklepu (brutto). Zostaw pole puste jeśli nie chcesz sprawdzać danego progu.
Dodatkowy select „Cena koszyka - podstawa wyliczenia" pozwala wybrać:
- Po rabatach (domyślne) - porównuje kwotę, którą klient faktycznie zapłaci, już po zastosowaniu kuponów i rabatów
- Przed rabatami - porównuje sumę produktów bez żadnych rabatów
6.8 Łączenie kilku warunków
Możesz włączyć dowolną liczbę warunków jednocześnie. Logika AND/OR zdecyduje, jak są interpretowane.
| AND - wszystkie muszą być spełnione | OR - wystarczy jeden |
| Pokaż gdy koszyk ≥ 500 zł I zawiera produkt z kategorii Elektronika | Pokaż gdy koszyk ≥ 1000 zł LUB zawiera produkt producenta premium |
| Klient musi spełnić oba warunki naraz | Każdy klient spełniający choć jeden warunek zobaczy ofertę |
| Dobry do bardzo precyzyjnego targetowania | Dobry gdy oferta pasuje do szerszej grupy klientów |
7. Konfiguracja na starszych szablonach RWD
Sklepy Shoper oparte na starszych szablonach klasycznych (RWD) konfigurują HotBasket przez osobny panel administracyjny - nie przez edytor SVE ani panel Integracje.
7.1 Jak otworzyć panel konfiguracji RWD
- Zaloguj się do panelu administracyjnego Shopera.
- Przejdź do sekcji Moje Aplikacje.
- Odszukaj aplikację HotBasket i kliknij Konfiguracja.
7.2 Podstawowa konfiguracja dodatku
| Opcja | Opis |
| Włącz moduł | Główny przełącznik modułu - gdy odznaczony, moduł jest nieaktywny i nie wyświetla się w koszyku. |
| Obramowanie | Włącza obramowanie wokół modułu HotBasket. |
| Grubość ramki | Grubość linii obramowania w pikselach. Domyślnie: 1. |
| Kolor obramowania | Kolor ramki modułu (selektor koloru). |
| Kolor tekstu | Kolor tekstu wyświetlanego w module (selektor koloru). |
| Rozmiar czcionki (pt) | Rozmiar czcionki tekstu w module. Domyślnie: 11 pt. |
| Niestandardowy kontener | Selektor CSS elementu, w którym ma pojawić się moduł. Domyślna wartość: #hotbasket. Zmień tylko jeśli szablon sklepu wymaga innego miejsca osadzenia. |
Po zmianie ustawień kliknij przycisk Zapisz konfigurację.
7.3 Zarządzanie produktami (tabela Zapisane produkty proponowane)
Po skonfigurowaniu i zapisaniu dodanych produktów widoczna jest tabela z listą wszystkich produktów HotBasket. Kolumny tabeli:
| Kolumna | Opis |
| Nazwa produktu w sklepie | Oryginalna nazwa produktu pobrana z katalogu Shopera (tylko do odczytu). |
| Nazwa produktu w koszyku | Własna nazwa produktu widoczna dla klienta w module HotBasket. Edytowalna bezpośrednio w tabeli. |
| Aktywność | Checkbox włączający/wyłączający wyświetlanie produktu bez konieczności usuwania go z listy. |
| Wymagany | Gdy zaznaczone: produkt jest automatycznie dodawany do koszyka i klient nie może go usunąć (odpowiednik opcji "Produkt obowiązkowy" w wariantach SVE/Integracja). |
| Opis produktu w koszyku | Własny opis tekstowy wyświetlany pod nazwą produktu w module. Edytowalny bezpośrednio w tabeli. |
| Ikonka (zmień) | Aktualna ikonka przypisana do produktu z możliwością zmiany. |
| Akcje | Przycisk Usuń - trwale usuwa produkt z listy HotBasket. |
7.4 Dodawanie nowego produktu
Formularz Dodawanie nowego produktu proponowanego znajduje się poniżej tabeli produktów. Pola formularza:
| Pole | Opis |
| Proponowany produkt | Wyszukiwarka produktów z katalogu sklepu — wpisz nazwę i wybierz produkt. Uwaga: produkt nie może mieć wariantów. |
| Aktywność proponowanego produktu | Określa czy produkt ma być od razu aktywny po dodaniu. |
| Zaznacz i zablokuj | Odpowiednik opcji "Wymagany" — produkt jest automatycznie zaznaczony i klient nie może go odznaczyć. |
| Nazwa produktu wyświetlana w koszyku | Opcjonalna własna nazwa produktu widoczna w module. Jeśli puste, wyświetlana jest oryginalna nazwa z katalogu. |
| Opis wyświetlany w boksie proponowanego produktu | Opcjonalny opis tekstowy wyświetlany pod nazwą produktu w module HotBasket. |
| Ikonka w boksie | Wybór graficznej ikonki wyświetlanej zamiast zdjęcia produktu. Dostępnych jest 15 ikon do wyboru (widoczne jako klikalne grafiki). |
Po uzupełnieniu formularza kliknij przycisk Dodaj nowy produkt. Produkt pojawi się w tabeli powyżej.
| ⚠️ Ważne: Tak samo jak w pozostałych wariantach — proponowany produkt nie może posiadać wariantów (np. różnych rozmiarów lub kolorów). Moduł Hot Basket nie będzie w stanie dodać takiego produktu do koszyka. |
Komentarze
Komentarze: 0
Zaloguj się, aby dodać komentarz.