Upsell w Koszyku czyli "Szybka dosprzedaż"

W okolicach linijki 264 we "Własnym skrypcie JS" odnajdziesz ustawienia dla szybkiej dosprzedaży w koszyku. 

Założenia

W koszyku dosprzedajemy produkty o wartości około 20-30% średniej wartości koszyka. Średnią wartość koszyka znajdziesz w panelu sklepu, u nas na GrowCommerce wygląda to tak:


W związku z tym, naszą dosprzedażą w koszyku są produkty o wartości od 300 do 600zł czyli Wsparcie Techniczne, Szablon wiadomości email oraz Konfiguracja CloudFlare. 

Taki produkt musi być bez wariantów. Musi to być bardzo szybka dosprzedaż i zakodowaliśmy to tak, aby klient jednym kliknięciem mógł dodać ten produkt do koszyka. Po dodaniu produktu strona koszyka automatycznie się odświeża z nowym produktem. Jeśli produkt z dosprzedaży znajduje się już w koszyku -> to nie pojawi się niżej w proponowanych "Może zainteresuje Cię:".

Shoper ma mnogość wariantów: radio, select, button, tekstowe, kolory, składane poziomu pierwszego i drugiego, warianty magazynowe i nie magazynowe -> składa się to na to, że bardzo trudno jest zbudować dodatek do dosprzedaży z uniwersalnym podejściem do wariantów. Stąd na ten moment prośba, aby wybrane produkty wariantów nie posiadały :) 

Dodatek domyślnie przystosowany jest do sprzedawania dodatkowej usługi czyli zapakowania na prezent. Jeśli jakiś sklep oferuje tę opcję to przy instalacji szablonu staramy się to tak skonfigurować.

Jak używać

Jak wspomniałem interesuje nas okolica linijki 260. W momencie pisania tego poradnika zaczynam od linijki 253 gdzie mamy wstęp:
// Ustawienia dodatku "Szybka dosprzedaż" w koszyku

W tych pierwszych ustawieniach czyli gc__additional__product__in__basket__on możesz włączyć dodatek (wpisz 1) lub go wyłączyć (0).

Poniżej w ustawieniu gc__additional__product__in__basket__header wpisz w cudzysłowie ofertę skierowaną do klienta. Jak zwykle możesz zmienić komunikat w czterech podstawowych językach.

W kolejnych ustawieniach czyli gc__additional__products__in__basket możesz poszaleć z ustawieniami.

 ID produktu możesz zdobyć np. w panelu sklepu:

Dodatek obsługuje opcję normalnej dosprzedaży, albo dosprzedaży usługi typu zapakuj na prezent. Obraz może wydać się dość skomplikowany, więc podzieliłem go na sekcje:

Żółte: wpisz ID produktu, w tym przypadku 46 zamieniasz na ID produktu dodanego w sklepie o nazwie "Zapakuj na prezent". Taki produkt powinien mieć cenę dosłownie zapakowania. Klient wtedy jednym kliknięciem dodaje go do zakupów. 

Zielone to tytuł produktu. Możesz wpisać 0, aby wyświetlił się tam domyślny tytuł taki jaki masz na sklepie (pobierzemy go po API Shopera). Jeśli wpiszesz inną wartość, to ona pojawi się jako nazwa.

Niebieskie to treść bardzo krótkiego opisu. Możesz sobie wpisać tu ze dwa lub trzy zdania, albo zostanie pobrany główny opis produktu i będzie "wykropkowany" po jakimś fragmencie (zależy od wielkości ekranu urządzenia). 

No i zobacz na nasz screen. Domyślnie wypełniłem dla ID 46 informacje jak dla Zapakuj na prezent. Taki produkt będzie wyświetlony w koszyku, o ile produkty istnieją. No bo jak wpiszesz wyimaginowany ID to się nie wyświetli. 

Jeżeli chcesz mieć tam swoje produkty, jakieś pierdółki, jakieś bestsellery, to podajesz nowy ID produktu, możesz mieć oryginalny tytuł jeśli wpiszesz 0 bądź możesz zamienić go pomiędzy cudzysłowiem. 

Przykład gotowego kodu dla zapakuj na prezent:

let gc__additional__products__in__basket = {
    46: {
      'pl_PL': ['Zapakuj na prezent', 'Już teraz do zamówienia możesz dodać oryginalne ozdobne pudełko prezentowe oraz elegancką torebkę prezentową, dzięki czemu problem z pakowaniem upominku masz już z głowy. Opcja dostępna dla wysyłek kurierem bądź paczkomatem.'],
      'en': ['Pack for a gift', 'You can add an original decorative gift box and an elegant gift bag to your order now, thanks to which the problem with packing the gift is over. Option available for shipments by courier or parcel locker.'],
      'de_DE': ['Als Geschenk verpacken', 'Sie können jetzt Ihrer Bestellung eine originelle dekorative Geschenkbox und eine elegante Geschenktasche hinzufügen, so dass Sie sich keine Gedanken mehr über das Einpacken des Geschenks machen müssen. Option verfügbar für Sendungen per Kurier oder Paketautomat.'],
      'cs_CZ': ['Zabalit jako dárek', 'K vaší objednávce nyní můžete přidat originální dekorativní dárkovou krabičku a elegantní dárkovou tašku, díky čemuž je problém s balením dárku vyřešen. Možnost dostupná pro zásilky kurýrem nebo do balíkovny.']
    },
};

Przykład gotowego kodu do dosprzedaży dwóch produktów prosto z naszego sklepu na sklep.growcommerce.pl:

let gc__additional__products__in__basket = {
  54:{
      'pl_PL': ['0', '0'],
      'en': ['Pack for a gift', 'You can add an original decorative gift box and an elegant gift bag to your order now, thanks to which the problem with packing the gift is over. Option available for shipments by courier or parcel locker.'],
      'de_DE': ['Als Geschenk verpacken', 'Sie können jetzt Ihrer Bestellung eine originelle dekorative Geschenkbox und eine elegante Geschenktasche hinzufügen, so dass Sie sich keine Gedanken mehr über das Einpacken des Geschenks machen müssen. Option verfügbar für Sendungen per Kurier oder Paketautomat.'],
      'cs_CZ': ['Zabalit jako dárek', 'K vaší objednávce nyní můžete přidat originální dekorativní dárkovou krabičku a elegantní dárkovou tašku, díky čemuž je problém s balením dárku vyřešen. Možnost dostupná pro zásilky kurýrem nebo do balíkovny.']
    },
  38:{
      'pl_PL': ['0', 'Piękne maile w Twoim sklepie przy każdym komunikacie. Od przyjęcia zamówienia, aż po jego wysyłkę.'],
      'en': ['Choose a bestseller', 'Check out the latest bestseller'],
      'de_DE': ['Wählen Sie einen Bestseller', 'Schauen Sie sich den neuesten Bestseller an'],
      'cs_CZ': ['Vyberte si bestseller', 'Podívejte se na nejnovější bestseller']
    }
  };

W tym przykładzie oferuję dwa produkty. 54 to CloudFlare, 38 to szablon maili. Dla Cloudflare nie zdobyłem się na wysiłek podmiany oryginalnego tytułu i opisu, więc wpisałem 0 i 0, żeby pobrał po API. Na innych językach nie zmieniałem, bo mamy tylko polską wersję językową odpaloną :)

Dla szablonu maili o ID 38 wpisałem 0 dla tytułu, ale nadałem mu customowy opis, żeby ładnie leżał w koszyku. 

Efekt:

No dobra, a jak dodać więcej produktów? 

Skopiuj fragment od ID produktu aż po zamknięcie klamry z przecinkiem (},). 

Przykład:

let gc__additional__products__in__basket = {
  54:{
      'pl_PL': ['0', '0'],
      'en': ['Pack for a gift', 'You can add an original decorative gift box and an elegant gift bag to your order now, thanks to which the problem with packing the gift is over. Option available for shipments by courier or parcel locker.'],
      'de_DE': ['Als Geschenk verpacken', 'Sie können jetzt Ihrer Bestellung eine originelle dekorative Geschenkbox und eine elegante Geschenktasche hinzufügen, so dass Sie sich keine Gedanken mehr über das Einpacken des Geschenks machen müssen. Option verfügbar für Sendungen per Kurier oder Paketautomat.'],
      'cs_CZ': ['Zabalit jako dárek', 'K vaší objednávce nyní můžete přidat originální dekorativní dárkovou krabičku a elegantní dárkovou tašku, díky čemuž je problém s balením dárku vyřešen. Možnost dostupná pro zásilky kurýrem nebo do balíkovny.']
    },
  38:{
      'pl_PL': ['0', 'Piękne maile w Twoim sklepie przy każdym komunikacie. Od przyjęcia zamówienia, aż po jego wysyłkę.'],
      'en': ['Choose a bestseller', 'Check out the latest bestseller'],
      'de_DE': ['Wählen Sie einen Bestseller', 'Schauen Sie sich den neuesten Bestseller an'],
      'cs_CZ': ['Vyberte si bestseller', 'Podívejte se na nejnovější bestseller']
    },
        33: {
      'pl_PL': ['0', '0'],
      'en': ['Choose a bestseller', 'Check out the latest bestseller'],
      'de_DE': ['Wählen Sie einen Bestseller', 'Schauen Sie sich den neuesten Bestseller an'],
      'cs_CZ': ['Vyberte si bestseller', 'Podívejte se na nejnovější bestseller']
    },
  };

Możesz wstawić tych produktów ile uważasz za słuszne. Generalnie kod nie ma ograniczeń i ile wklepiesz, tyle przyjmie. Wizualnie wydaje mi się, że max to 3 sztuki, żeby to fajnie wyglądało w koszyku.

Pozostałe ustawienia

Wiesz już jak znaleźć ID produktu, gdzie je wpisać, jak zmienić sobie tytuł produktów i ewentualnie ich opis. 

Idziemy dalej, bo masz jeszcze kilka ustawień:

Tu już drobnostki do poprawnego tłumaczenia. Tłumaczysz sobie CTA czyli zachętę do wykonania akcji (Dodaj do koszyka) oraz informację o tym, że produkt jest już w koszyku. Jak zwykle możesz w 4 językach. 

Niżej w ustawieniu gc__additional__product__in__basket__custom__icon masz ciekawą opcję, bo możesz tam podać URL (adres) do jakiejś ikonki. Na co dzień Ci się to nie przyda, ale jeśli sprzedajesz np. "Zapakuj na prezent" i chcesz mieć inne zdjęcie (ikonę) niż masz zdjęcie produktu, to tu to możesz podstawić. 

Ustawienie gc__additional__product__place pozwala na przepięcie doczepienia naszej szybkiej dosprzedaży w inne miejsce, póki nie masz mega udziwnionego koszyka, to to ustawienie Ci się nie przyda.

Powodzenia i udanej sprzedaży!