INSTRUKCJA | Hot Basket | Instrukcja obsługi aplikacji Shoper Appstore

Spis sekcji w tej bazie wiedzy:

Czym jest Hot Basket i jak ją zainstalować?

Jak skonfigurować moduł SVE

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

1. Otwórz edytor stron Shoper (SVE).
2. Wybierz stronę, na której ma się pojawić moduł (np. stronę koszyka — wymagany plan Premium, lub inną stronę).
3. Kliknij "Dodaj" i odszukaj "HotBasket" na liście modułów.
4. Przeciągnij moduł w wybrane miejsce na stronie.
5. Skonfiguruj moduł w panelu po prawej stronie (patrz rozdział 5).
6. 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

1. W panelu administracyjnym Shopera przejdź do edytora SVE
2. Kliknij ikonę "Integracje" (wtyczka) w lewym pasku narzędzi.
3. Na liście integracji odszukaj "Hot Basket - Koszyk".
4. Kliknij integrację, aby otworzyć panel konfiguracji po prawej stronie.
5. Skonfiguruj moduł (patrz rozdział 4.2).
6. Kliknij "Zapisz".
7. 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

1. W sekcji "Konfiguracja produktów HotBasket" kliknij przycisk dodawania nowego produktu.
2. Rozwiń konfigurację produktu ("Konfiguracja produktu 1", "Konfiguracja produktu 2" itd.).
3. Skonfiguruj każdy produkt wg opcji opisanych poniżej.
4. 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.

1. W panelu Shopera otwórz konfigurację modułu HotBasket (moduł integracyjny lub moduł SVE).
2. Rozwiń konfigurację produktu HotBasket
3. Zaznacz checkbox „Warunki widoczności produktu". Pojawi się sekcja z ustawieniami.
4. Wybierz logikę warunków: AND (wszystkie muszą być spełnione) lub OR (wystarczy jeden). Domyślnie ustawione jest AND.
5. 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?

1. W panelu Shopera przejdź do Produkty → Kategorie.
2. Kliknij na wybraną kategorię, żeby ją otworzyć do edycji.
3. 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?

1. W panelu Shopera przejdź do Produkty → Producenci.
2. Kliknij na wybranego producenta, żeby otworzyć go do edycji.
3. 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

1. Zaloguj się do panelu administracyjnego Shopera.
2. Przejdź do sekcji Moje Aplikacje.
3. 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.