Spin to Win dla WooCommerce — darmowe koło fortuny z kuponami rabatowymi

Black Friday to dla sklepów internetowych jeden z najważniejszych okresów sprzedażowych w roku. Jednocześnie jest to moment, w którym trudno wyróżnić się na tle konkurencji.

Klienci widzą dziesiątki reklam, banerów i wyskakujących okien, a niemal każdy sklep próbuje przekonać ich do zakupów podobnym komunikatem: „Rabat 20%”, „Wyprzedaż”, „Tylko dzisiaj” albo „Nie przegap promocji”.

Zastanawiałem się, czy można podejść do tego trochę inaczej. I tak powstał moduł dla Prestashop DC Spin To Win. Na drugi dzień dostałem już maile z pytaniami czy tego typu rozwiązanie mamy dla Woocommerce. No więc...trzeba było moduł przepisać pod platformę Woocommerce. No i voilà!!! 😎 Dzisiaj w tym artykule prezentuję wam wersję Design Cart Spin To Win dla platformy Woocommerce.  Moduł na tyle się spodobał że wszedł na wyposażenie tworzonych przez nas sklepów internetowych Woocommerce na stałe. 

Krótki przerywnik na video z działania pluginu Design Cart Spin To Win:

Nie będę się tu rozpisywał o pierwotnej myśli która popchnęła mnie do napisania tego modułu. Ciekawych odsyłam do pierwotnego modułu: Jak stworzyć angażującą klienta promocję na Black Friday w PrestaShop. W tym artykule skupię się już na module Design Cart Spin To Win tylko w kontekście Woocommerce. 

Co właściwie potrafi Design Cart Spin To Win?

Z perspektywy klienta rozwiązanie wygląda stosunkowo prosto. Otwiera się popup, klient zakręca kołem, wygrywa nagrodę i podaje adres e-mail.

Od strony właściciela sklepu możliwości są nieco szersze.

Wtyczka pozwala:

• Wyświetlać interaktywne koło fortuny 3D na stronie sklepu WooCommerce.

• Korzystać z istniejących kuponów rabatowych WooCommerce.

• Wybierać nagrody za pomocą kafelków w panelu administratora.

• Obsługiwać rabaty procentowe, kwotowe i kupony darmowej dostawy.

• Korzystać z ograniczeń kuponów zdefiniowanych w WooCommerce.

• Pokazywać koło automatycznie lub otwierać je przyciskiem.

• Ograniczyć wyświetlanie do strony głównej lub udostępnić na wszystkich publicznych podstronach.

• Sterować częstotliwością automatycznego pojawiania się popupu.

• Otwierać koło poprzez własne selektory CSS.

• Edytować teksty popupu, komunikaty wygranej i wiadomość e-mail.

• Personalizować typografię i kolory okien.

• Wymagać zaznaczenia checkboxa zgody pod formularzem.

• Wysyłać kod rabatowy na adres e-mail.

• Zapisywać zgłoszenia w bazie WordPressa.

• Przeglądać historię zgłoszeń.

• Eksportować zgromadzone dane lub same adresy e-mail do CSV.

Większość tych operacji nie wymaga znajomości PHP, JavaScriptu ani CSS.

Właściciel sklepu przygotowuje kupony w WooCommerce, zaznacza je w panelu Spin To Win i decyduje o sposobie wyświetlania promocji.

Jak zainstalować Spin To Win w WooCommerce?

Instalacja nie różni się znacząco od instalacji standardowych wtyczek WordPressa.

Nie trzeba ręcznie dodawać skryptów do motywu ani przygotowywać tabel w bazie danych.

Wymagania techniczne

Na podstawie metadanych dołączonych do wersji 1.0.0:

W pliku readme.txt zadeklarowałem również zgodność z WordPressem do wersji 7.1. Jest to informacja z metadanych pakietu, nie wynik niezależnie przeprowadzonych przeze mnie testów na wszystkich wymienionych wersjach.

Instalacja przez panel WordPressa

Pobieramy archiwum ZIP z wtyczką i logujemy się do panelu administratora.

Następnie przechodzimy do:

Wtyczki → Dodaj nową → Wyślij wtyczkę na serwer.

Wskazujemy pobrany plik, rozpoczynamy instalację i aktywujemy rozszerzenie.

Po aktywacji w lewym menu pojawi się nowa pozycja Spin To Win.

Można też przeprowadzić instalację ręcznie, przesyłając katalog design-cart-spin-to-win do:

/wp-content/plugins/

Następnie włączamy wtyczkę w panelu WordPressa.

Co dzieje się podczas aktywacji?

Po uruchomieniu wtyczka przygotowuje domyślną konfigurację i tworzy tabelę przeznaczoną do przechowywania zgłoszeń klientów.

Ustawienia zapisywane są za pomocą mechanizmu opcji WordPressa, natomiast zgłoszenia trafiają do oddzielnej tabeli bazy danych.

Od razu zaznaczę, że domyślnie wyświetlanie koła jest wyłączone.

To celowe rozwiązanie. Nie chciałem, aby instalacja wtyczki automatycznie uruchamiała promocję na działającym sklepie.

Najpierw należy przygotować kupony, skonfigurować wygląd, treści i sposób otwierania. Dopiero później włączyć koło na froncie.

Panel administratora – pięć działów zamiast jednej długiej konfiguracji

Po wejściu do Spin To Win zobaczymy kokpit z pięcioma kafelkami.

Przygotowując panel, zależało mi przede wszystkim na czytelności.

Wtyczka ma kilka grup ustawień, które dotyczą różnych etapów działania. Dlatego rozdzieliłem konfigurację samego popupu od nagród, komunikatów i stylów tekstu.

Każdy dział ma osobny ekran. W górnej części znajduje się charakterystyczny nagłówek Design Cart, przycisk powrotu do kokpitu i – tam, gdzie jest to potrzebne – przycisk zapisu.

Dostęp do ustawień wymaga uprawnienia WordPressa manage_woocommerce. Oznacza to, że nie są one przeznaczone dla każdego zalogowanego użytkownika.

Przejdźmy teraz do pełnej konfiguracji.

Ustawienia ogólne – status i wyświetlanie

Pierwszym działem, który warto odwiedzić, jest Spin To Win → Ogólne.

Znajdują się tutaj trzy zakładki: „Status i wyświetlanie”, „Przycisk / klasy CSS” oraz „Kolory popupów”.

Zacznę od pierwszej.

Włączenie modułu

Na samej górze znajduje się przełącznik Moduł włączony na froncie.

Jest to nadrzędne ustawienie całej wtyczki.

Jeżeli pozostawimy je wyłączone, Spin To Win nie będzie pokazywał koła na stronie sklepu.

Co ważne, wyłączenie nie usuwa naszej konfiguracji ani wcześniej zgromadzonych zgłoszeń. Możemy więc zakończyć promocję, wyłączyć koło, a następnie ponownie uruchomić je podczas kolejnej kampanii.

Na których stronach pokazywać?

Do wyboru są dwa tryby.

Pierwszy wariant jest przydatny, jeżeli chcemy prowadzić akcję promocyjną przede wszystkim z poziomu strony startowej.

Drugi daje większy zasięg – koło może pojawiać się również na kartach produktów, kategoriach czy innych publicznych podstronach.

Tutaj ważna uwaga techniczna: w kodzie opcja „Każda podstrona sklepu” nie ogranicza się wyłącznie do stron WooCommerce. Mechanizm dopuszcza wszystkie publiczne podstrony WordPressa, w tym np. wpisy blogowe.

Jeżeli potrzebujemy bardziej szczegółowych warunków, takich jak pokazywanie tylko na wybranych kategoriach produktów, obecny panel nie ma osobnego konfiguratora takich reguł.

Jak często otwierać popup?

To jedno z ważniejszych ustawień z punktu widzenia doświadczenia użytkownika.

Nie każdy właściciel sklepu chce wyświetlać koło w taki sam sposób. W jednych kampaniach zależy nam na silnym pierwszym wrażeniu, w innych koło powinno pozostawać dostępną, ale nienachalną atrakcją.

Dlatego przygotowałem cztery tryby.

Tryb „Tylko raz”

To rozwiązanie, które w wielu przypadkach wybrałbym dla sklepu produkcyjnego.

Przy pierwszym otwarciu popupu wtyczka zapisuje informację w pamięci lokalnej przeglądarki.

Kiedy klient ponownie otworzy stronę w tej samej przeglądarce, automatyczny popup nie zostanie pokazany.

Nie oznacza to jednak, że użytkownik nigdy więcej nie zobaczy koła. Jeżeli na stronie znajduje się przycisk uruchamiający promocję, może je ponownie otworzyć ręcznie.

Warto też pamiętać, że localStorage dotyczy konkretnej przeglądarki i jej danych. Wejście na sklep z innego urządzenia lub wyczyszczenie danych przeglądarki może spowodować ponowne automatyczne wyświetlenie.

Tryb „Przy każdej nowej sesji”

Tutaj wykorzystywany jest sessionStorage.

Koło zostanie pokazane przy pierwszym wejściu w danej sesji, natomiast kolejne przeładowania w jej ramach nie powinny uruchamiać go automatycznie.

Po zakończeniu sesji przeglądarki mechanizm może ponownie zaprezentować promocję.

Jest to kompromis pomiędzy jednorazowym pokazaniem a bardzo intensywnym przypominaniem o promocji.

Tryb „Przy każdym przeładowaniu”

Ten wariant przygotowałem przede wszystkim do testowania.

Podczas konfiguracji nie chcemy przecież za każdym razem ręcznie czyścić localStorage, żeby sprawdzić zmiany w popupie.

Wystarczy wybrać tryb testowy, zapisać ustawienia i odświeżać sklep.

Nie polecałbym jednak pozostawiania tego wariantu na stałe w sklepie, w którym użytkownicy regularnie przechodzą pomiędzy produktami i kategoriami.

Wyświetlanie dużego popupu po każdej zmianie strony może szybko stać się irytujące.

Tryb „Tylko po kliknięciu przycisku”

To drugi wariant, który szczególnie lubię.

W tym trybie koło nie pojawia się samo. Klient decyduje, czy chce wziąć udział w zabawie.

Możemy przygotować własny baner, przycisk w nagłówku albo niewielką zachętę w dowolnej sekcji sklepu.

Dzięki temu promocja jest dostępna, ale nie przerywa przeglądania oferty.

Ważne: opisane tryby ograniczają automatyczne wyświetlanie popupu, a nie liczbę zgłoszeń na serwerze. Nie należy traktować ich jako zabezpieczenia przed wielokrotnym odbieraniem nagród.

Ustawienia ogólne – przycisk i klasy CSS

Kolejna zakładka daje znacznie większą swobodę w uruchamianiu koła.

Zamiast ograniczać się do przycisku osadzonego przez samą wtyczkę, pozwoliłem wskazać elementy strony, które mają otwierać kołowrotek.

W panelu znajduje się pole Selektory CSS.

Domyślna wartość to:

.dc-stw-open

Oznacza to, że wystarczy dodać tę klasę do przycisku w sklepie.

Przykładowo

<button type="button" class="dc-stw-open">
  🎁 Zakręć kołem i odbierz rabat
</button>

Po kliknięciu zostanie uruchomiony popup z kołem.

Kilka przycisków na jednej stronie

Można również wpisać kilka selektorów, oddzielając je przecinkami.

Przykładowo:

.dc-stw-open, #open-wheel, .menu-spin

Każdy z tych elementów będzie mógł otworzyć ten sam popup.

Daje to ciekawe możliwości.

Możemy umieścić przycisk w górnym menu, drugi pod sliderem na stronie głównej, a trzeci w treści artykułu informującego o Black Friday.

Nie ma potrzeby tworzenia kilku niezależnych instancji koła.

Uruchamianie za pomocą atrybutu HTML

W kodzie przewidziałem również obsługę atrybutu:

data-dc-stw-open

Przykład

<a href="#" data-dc-stw-open>
  Sprawdź swoją nagrodę
</a>

Ta metoda ma dodatkową zaletę.

Obsługa atrybutu oparta jest na delegowaniu zdarzenia click, więc może działać także dla elementów dodanych dynamicznie do dokumentu.

W przypadku selektorów wpisanych w panelu wtyczka wyszukuje elementy podczas inicjalizacji skryptu. Jeżeli jakiś kreator stron dopisze przycisk dopiero później, delegowany atrybut może być wygodniejszym rozwiązaniem.

Czy można otworzyć koło programowo?

Tak.

Wtyczka udostępnia obiekt JavaScript window.DcSpinToWin z metodami open(), close() oraz load().

Możemy więc uruchomić popup własnym skryptem:

window.DcSpinToWin.open();

Metoda close() pozwala go zamknąć.

Metoda load() służy do ponownego załadowania listy segmentów po stronie przeglądarki. Jest to już funkcja dla programistów i nie należy używać jej do obchodzenia serwerowej listy dozwolonych kuponów.

Gdzie najlepiej umieścić przycisk?

To zależy od projektu sklepu.

W przypadku Black Friday widziałbym go na przykład w dużym banerze promocyjnym. Zamiast „Sprawdź promocje” można zastosować bardziej angażujące „Zakręć kołem i sprawdź, co wygrasz”.

W sklepie z zabawkami przycisk mógłby znaleźć się na kolorowej grafice, a w sklepie odzieżowym stanowić jeden z elementów sekcji promocyjnej.

Najważniejsze, żeby sam przycisk jasno komunikował, co stanie się po jego naciśnięciu.

Ustawienia ogólne – kolory popupów

Ostatnia zakładka w ustawieniach ogólnych dotyczy tła.

Wtyczka wykorzystuje dwa odrębne obszary wizualne.

Pierwszy to duży popup z kołem. Drugi to mniejsza karta, która pojawia się po zakończeniu losowania.

Nie chciałem, aby oba elementy musiały korzystać z tego samego koloru.

Do ustawiania barw wykorzystałem interfejs colorpickera.

Administrator wybiera kolor, a wtyczka zapisuje jego wartość i wykorzystuje ją na froncie.

Warto przy tym wiedzieć, że duży popup nie jest wypełniony wyłącznie jednolitym kolorem. CSS buduje na jego podstawie gradient, który nadaje tłu nieco głębi.

W projekcie demonstracyjnym wybrałem ciemny fiolet. Dobrze komponuje się ze złotą wskazówką oraz kolorowymi segmentami.

Nie jest to jednak obowiązkowa kolorystyka. Możemy dopasować ją do motywu sklepu.

W aktualnej wersji nie ma osobnego edytora kolorów poszczególnych segmentów koła. Ich paleta jest zdefiniowana w kodzie JavaScript i obejmuje sześć powtarzających się kolorów.

Kupony WooCommerce – dlaczego nie stworzyłem własnego systemu rabatowego?

Przechodzimy do jednej z najważniejszych części wtyczki.

Od początku wiedziałem, że nie chcę tworzyć drugiego, niezależnego systemu kuponów.

WooCommerce ma już rozbudowany mechanizm rabatowy. Pozwala określać procentowe i kwotowe obniżki, ograniczenia produktów, wymagane wartości koszyka, daty ważności oraz limity wykorzystania.

Tworzenie wszystkiego od nowa oznaczałoby powielanie funkcjonalności, które platforma już posiada.

Dlatego zdecydowałem, że Spin To Win będzie odpowiadać za losowanie i prezentację nagród, a WooCommerce pozostanie systemem zarządzania samymi kuponami.

To rozwiązanie ma kilka praktycznych zalet.

Jeżeli właściciel sklepu chce zmienić minimalną wartość koszyka, może zrobić to w standardowej edycji kuponu WooCommerce.

Jeżeli chce ograniczyć rabat do kategorii „Buty”, również nie potrzebuje osobnych reguł w Spin To Win.

Podobnie wygląda kwestia dat ważności czy limitów wykorzystania.

Jak przygotować pierwszy kupon?

Przechodzimy do Marketing → Kupony w panelu WooCommerce.

Tworzymy nowy kod, np.:

blackfriday15

Następnie wybieramy rodzaj rabatu, na przykład procentowy, i ustawiamy wartość 15%.

Możemy również wpisać opis:

„Black Friday – 15% rabatu na wybrane produkty”

W razie potrzeby ustawiamy dodatkowe ograniczenia: minimalną wartość zamówienia, dostępność dla produktów lub kategorii, limit liczby użyć oraz termin ważności.

Po zapisaniu kupon jest gotowy do wykorzystania.

Wybór nagród w Spin To Win

Teraz przechodzimy do:

Spin To Win → Kupony

Na tej stronie pojawia się siatka kafelków reprezentujących kupony WooCommerce.

Każdy kafelek prezentuje wartość rabatu, nazwę lub opis nagrody oraz kod kuponu.

Aby dodać nagrodę do koła, wystarczy kliknąć kafelek.

Zaznaczony kupon otrzymuje wyróżnione obramowanie oraz ikonę potwierdzającą wybór.

Nie trzeba ręcznie wpisywać identyfikatorów rekordów ani kopiować wartości kuponu.

Po zakończeniu wyboru klikamy przycisk Zapisz wybór kuponów.

Co wtyczka pobiera z WooCommerce?

W panelu wykorzystuję zapytanie do opublikowanych kuponów typu shop_coupon, a następnie tworzę obiekty WC_Coupon.

Z nich pobieram dane potrzebne do zbudowania nagrody.

W panelu wyboru pobieranych jest maksymalnie 200 opublikowanych kuponów, uporządkowanych według tytułu.

Jeżeli sklep ma więcej kodów rabatowych, nie wszystkie muszą pojawić się na tej liście. To ograniczenie obecnej implementacji, które warto mieć na uwadze w dużych sklepach.

Jakie rodzaje nagród są obsługiwane?

Wtyczka rozpoznaje podstawowe rodzaje rabatów WooCommerce.

Warto zaznaczyć, że sam napis FREE SHIP nie oznacza automatycznie, że każda metoda wysyłki stanie się bezpłatna.

W WooCommerce kupon darmowej dostawy współpracuje z konfiguracją wysyłki i odpowiednimi warunkami dostawy.

Jeżeli kupon łączy dodatnią kwotę rabatu z opcją darmowej wysyłki, wtyczka w pierwszej kolejności prezentuje wartość rabatu. Jest to konsekwencja sposobu formatowania etykiety w aktualnym kodzie.

Skąd bierze się nazwa nagrody?

Na segmencie nie musi znajdować się wyłącznie kod kuponu.

W pierwszej kolejności Spin To Win próbuje wykorzystać opis zapisany w WooCommerce.

Jeżeli opis jest pusty, używa kodu kuponu.

To ważne przy przygotowywaniu promocji, ponieważ na kole znacznie lepiej wygląda:

„Darmowa dostawa od 150 zł”

niż:

shipping_code_003

Opis prezentowany w panelu jest skracany do około 80 znaków. Na samym kole dodatkowo działa mechanizm dopasowywania czcionek do dostępnego miejsca.

Zalecam więc przygotowywanie krótkich, zrozumiałych nazw nagród.

Czy można ustawiać szanse wygranej?

To pytanie, które prawdopodobnie pojawi się u części właścicieli sklepów.

W wersji 1.0.0 nie udostępniłem w panelu osobnego edytora prawdopodobieństw.

Każdy wybrany kupon tworzy jeden segment koła.

W silniku JavaScript znajduje się funkcja pickWinner(), która potrafi korzystać z wag nagród, ale dane przekazywane przez aktualną integrację WooCommerce nie zawierają konfigurowalnych wag.

W efekcie nagrody mają jednakowe szanse wyboru na poziomie segmentów.

Jeżeli wybierzemy dziesięć kuponów, pojedynczy segment ma teoretycznie około 10% szans na wylosowanie.

Nie jest to jednak to samo, co 10% szans na określoną wartość rabatu.

Jeżeli trzy segmenty zawierają nagrodę 5%, to łączna szansa na uzyskanie rabatu o tej wartości wynosi około 30%.

Trzeba również pamiętać, że jest to losowanie oparte na Math.random(), a nie certyfikowany system losowy przeznaczony do konkursów czy loterii wymagających specjalnych zasad.

Dla zwykłej promocji rabatowej może być to wystarczająca mechanika wizualna. Przy nagrodach o wysokiej wartości wymagałbym jednak dodatkowego zabezpieczenia i niezależnego wyboru nagrody po stronie serwera.

Adresy e-mail – co dzieje się z danymi klientów?

Po wylosowaniu nagrody klient przechodzi do formularza odbioru kodu.

Podaje adres e-mail i wysyła zgłoszenie.

Zależało mi, aby właściciel sklepu nie musiał szukać później informacji o przyznanych nagrodach w osobnych wiadomościach lub plikach.

Dlatego wtyczka zapisuje zgłoszenia w swojej tabeli bazy danych.

Wszystko można przejrzeć w sekcji Spin To Win → Adresy e-mail.

{{ 7-screen-adresy-email.png alt="Panel adresów e-mail w Spin To Win – historia zgłoszeń klientów, kody rabatowe, wartości nagród oraz eksport CSV" }}

Jak wygląda lista zgłoszeń?

Na górze strony znajduje się sekcja eksportu danych.

Niżej widoczna jest tabela zgłoszeń.

Wpisy uporządkowane są od najnowszych.

W panelu administratora wyświetlane jest maksymalnie 200 rekordów.

Jeżeli zgłoszeń jest więcej, nadal możemy pobrać je poprzez eksport CSV.

Eksportuj wszystko

Pierwszy przycisk pozwala pobrać zestaw danych zawierający informacje o zgłoszeniach i nagrodach.

Eksport obejmuje osiem kolumn:

Taki eksport może być pomocny podczas analizy kampanii.

Możemy sprawdzić, jakie nagrody trafiały do klientów i w jakim okresie pojawiało się najwięcej zgłoszeń.

Sam eksport nie pokazuje jednak, czy kupon został wykorzystany w zamówieniu. To należy sprawdzić w danych WooCommerce.

Tylko adresy e-mail

Drugi przycisk tworzy uproszczony plik zawierający jedną kolumnę:

email

To przydatne, jeżeli chcemy przenieść adresy do innego systemu, pod warunkiem że mamy odpowiednią podstawę prawną do ich dalszego przetwarzania.

W obecnym kodzie nie ma automatycznej deduplikacji. Jeśli ten sam adres występuje w kilku zgłoszeniach, może pojawić się w pliku kilka razy.

Eksport pobiera maksymalnie 100 000 najnowszych rekordów i korzysta z separatora średnikowego oraz kodowania UTF-8 z BOM.

Taki format ułatwia otwieranie pliku w programach takich jak Excel czy LibreOffice Calc.

Czy Spin To Win jest systemem newsletterowym?

Nie.

Chcę to wyraźnie zaznaczyć, ponieważ samo przechowywanie adresów e-mail nie oznacza jeszcze, że otrzymujemy kompletny system newsletterowy.

Wtyczka służy do przekazania nagrody i zapisania zgłoszenia.

Nie oferuje osobnego formularza zgody marketingowej, double opt-in ani automatycznego tworzenia subskrybentów w Mailchimp, Brevo czy innym systemie mailingowym.

Podanie adresu w celu otrzymania kodu nie powinno być automatycznie interpretowane jako zgoda na marketing e-mailowy.

Jeżeli właściciel sklepu planuje wykorzystywać adresy do innych celów, powinien osobno zadbać o odpowiednią podstawę prawną i konfigurację procesu pozyskiwania zgód.

Treści – osobna konfiguracja komunikatów

Przejdźmy teraz do sekcji, którą uznaję za szczególnie ważną dla personalizacji.

Spin To Win → Treści

Wtyczka nie wymusza jednego zestawu komunikatów.

Nie chciałem, aby właściciel sklepu z elegancką odzieżą musiał używać tych samych haseł co sklep z zabawkami.

Dlatego teksty przeniosłem do panelu administracyjnego.

Podzieliłem je na trzy zakładki: „Popup z kołem”, „Odbiór nagrody” i „E-mail z kodem”.

Zakładka „Popup z kołem”

To pierwsze teksty, które zobaczy klient.

Nie są to rozbudowane formularze, ale te dwa pola mają spore znaczenie.

Jeżeli klient od razu zrozumie, co ma zrobić, nie będzie potrzebował dodatkowych instrukcji.

Podczas Black Friday przygotowałbym na przykład:

Tytuł: BLACK FRIDAY – ZAKRĘĆ KOŁEM!

Podtytuł: Sprawdź swoje szczęście i odbierz jeden z przygotowanych rabatów.

Dla sklepu z zabawkami można użyć bardziej swobodnej wersji:

Tytuł: ZAKRĘĆ I ZGARNIJ NAGRODĘ!

Podtytuł: Nasze magiczne koło przygotowało dla Ciebie niespodziankę. 🎁

Nie próbowałbym jednak umieszczać w nagłówku całego regulaminu akcji.

Zasady promocji powinny być jasne, ale sam komunikat zachęcający do losowania musi pozostać czytelny.

Zakładka „Odbiór nagrody”

Po zakończeniu losowania użytkownik widzi mniejsze okno.

Nie opuszcza sklepu i nie jest przekierowywany na osobną stronę.

Na ekranie pojawia się karta z komunikatem gratulacyjnym, informacją o nagrodzie oraz polem adresu e-mail.

Wszystkie najważniejsze teksty można edytować w panelu.

Wartość i nazwa nagrody nie są tutaj wpisywane ręcznie.

Pochodzą z kuponu, który został wybrany podczas losowania.

Przykładowo klient może zobaczyć:

Gratulacje! Wygrałeś:

50,00 zł

„50 zł rabatu na koszyk przy zakupach od 250 zł”

Pod spodem pojawia się formularz.

Dzięki temu jedna karta może obsłużyć różne rodzaje nagród bez potrzeby tworzenia osobnych szablonów dla każdej z nich.

Komunikat sukcesu i komunikat błędu

Dodałem możliwość edycji obu komunikatów, ponieważ zależało mi na spójności języka całego sklepu.

W komunikacie sukcesu warto jasno wyjaśnić, co właśnie się wydarzyło.

Na przykład:

„Gotowe! Wysłaliśmy Twój kod rabatowy. Sprawdź skrzynkę odbiorczą, a w razie potrzeby również folder spam.”

Komunikat błędu powinien natomiast pomagać, a nie jedynie informować o problemie.

Możemy napisać:

„Nie udało się wysłać wiadomości. Sprawdź poprawność adresu e-mail i spróbuj ponownie.”

W kodzie klient otrzymuje komunikaty zwrócone przez serwer, więc nie musimy każdej sytuacji sprowadzać do jednego ogólnego tekstu.

Na przykład błędny adres e-mail, nieprawidłowa nagroda czy brak wymaganej zgody mogą zostać rozpoznane jako różne problemy.

RODO – checkbox pod formularzem odbioru

W zakładce „Odbiór nagrody” umieściłem również osobny blok dotyczący przetwarzania danych.

Administrator może włączyć lub wyłączyć checkbox oraz zmienić jego treść.

Domyślny tekst informuje o przetwarzaniu adresu e-mail w celu przesłania kodu rabatowego zgodnie z polityką prywatności sklepu.

Po zaznaczeniu obowiązku zgody wtyczka sprawdza ją dwukrotnie.

Najpierw robi to JavaScript przed wysłaniem formularza.

Następnie PHP weryfikuje obecność odpowiedniej wartości w otrzymanym zgłoszeniu.

Nie wystarczy więc wyłączyć walidacji formularza w przeglądarce.

Jednocześnie nie chciałbym przedstawiać obecności checkboxa jako gwarancji pełnej zgodności z RODO.

To tylko jeden element procesu.

Właściciel sklepu powinien odpowiednio opisać cel przetwarzania danych, okres ich przechowywania oraz prawa użytkownika. Jeśli podstawą przetwarzania jest wykonanie usługi polegającej na wysłaniu nagrody, trzeba też ocenić, czy obowiązkowa zgoda jest właściwym rozwiązaniem prawnym.

Sam tekst checkboxa warto więc dostosować do rzeczywistego modelu działania sklepu.

Zakładka „E-mail z kodem” – własna wiadomość dla zwycięzcy

Po zakończeniu losowania klient musi jeszcze otrzymać nagrodę.

Nie chciałem narzucać jednej, sztywnej wiadomości e-mail.

Dlatego trzecia zakładka pozwala ustawić zarówno temat, jak i treść wiadomości.

W konfiguracji znajdują się dwa pola.

Temat e-maila odpowiada za tytuł wiadomości.

Treść e-maila pozwala przygotować pełną wiadomość wysyłaną do klienta.

Dynamiczne placeholdery

Wtyczka obsługuje trzy specjalne zmienne.

Zmienne można wykorzystać w treści oraz w temacie wiadomości.

Przykładowo przygotowałbym taką treść:

Temat: 🎁 Twoja nagroda Black Friday – odbierz rabat!

Cześć!

Dziękuję za udział w naszej promocji Spin To Win.

Udało Ci się wygrać: {prize_amount}

Twoja nagroda: {prize_name}

Kod rabatowy: {coupon_code}

Aby wykorzystać nagrodę, dodaj produkty do koszyka, a następnie wpisz kod podczas składania zamówienia.

Pamiętaj, że kod obowiązuje na zasadach określonych w warunkach promocji.

Życzymy udanych zakupów!

Po wysłaniu wiadomości placeholdery zostają zastąpione rzeczywistymi danymi.

Na przykład {coupon_code} może zmienić się w blackfriday15, a {prize_amount} w 15%.

Jak wysyłana jest wiadomość?

Wtyczka wykorzystuje funkcję wp_mail() WordPressa.

Wiadomość ma format zwykłego tekstu i kodowanie UTF-8.

Nie tworzyłem osobnego systemu SMTP, ponieważ nie chciałem niepotrzebnie rozbudowywać wtyczki o funkcje, które można już obsłużyć na poziomie WordPressa.

Jeżeli sklep korzysta z poprawnie skonfigurowanej poczty transakcyjnej, Spin To Win może używać tego samego mechanizmu.

Polecam jednak przetestować wysyłkę przed uruchomieniem kampanii.

Trzeba też pamiętać, że powodzenie wywołania wp_mail() nie gwarantuje ostatecznego dostarczenia wiadomości do skrzynki klienta.

Jeżeli serwer ma problemy z konfiguracją poczty, wiadomość może trafić do spamu albo w ogóle nie zostać dostarczona.

Czy można wysyłać wiadomości HTML?

Obecna wersja 1.0.0 wysyła wiadomości jako text/plain.

Nie ma tutaj osobnego kreatora szablonów HTML.

To prostsze rozwiązanie, ale ma również ograniczenie: wiadomości nie zawierają formatowanych przycisków, kolumn ani rozbudowanych elementów graficznych.

Jeżeli planowałbym kolejną rozbudowę tej sekcji, edytor wiadomości HTML byłby jednym z możliwych kierunków.

Typografia – dopasowanie wyglądu bez edytowania CSS

Ostatnią częścią panelu jest Typografia.

Uważam ją za ważną z punktu widzenia właściciela sklepu, który chce zachować spójność wizualną.

Nie każdy sklep potrzebuje ogromnego złotego napisu nad kołem. W niektórych projektach lepiej sprawdzi się spokojniejsza, bardziej minimalistyczna typografia.

Z drugiej strony, podczas promocji Black Friday można świadomie zastosować większe nagłówki, mocniejsze kolory i bardziej wyraziste komunikaty.

Dlatego przygotowałem konfigurację osobno dla różnych bloków tekstowych.

Panel podzielony jest na dwie zakładki: Kołowrotek oraz Karta wygranej.

Jakie parametry można zmieniać?

Każdy blok posiada własne ustawienia. Nie trzeba więc stosować tego samego rozmiaru i koloru do wszystkich elementów.

Typografia kołowrotka

W pierwszej zakładce konfigurujemy:

Domyślny tytuł ma złoty kolor #ffd54a.

Podtytuł jest znacznie spokojniejszy, z jasnofioletową barwą #e6dcff.

Taki kontrast dobrze sprawdza się przy ciemnym tle.

Typografia karty wygranej

Druga zakładka obejmuje pięć niezależnych elementów.

Przycisk ma dodatkowo domyślne tło #ffb703.

Najbardziej wyróżniającym się elementem jest wartość nagrody.

To właśnie ją chciałem pokazać dużą czcionką, ponieważ powinna być pierwszą informacją odczytaną przez klienta po zakończeniu losowania.

Nie oznacza to jednak, że wszystkie sklepy powinny używać rozmiaru 48 pikseli.

Jeżeli nagrody mają dłuższe opisy albo sklep jest projektowany przede wszystkim pod urządzenia mobilne, warto dobrać parametry odpowiednio do układu.

Jak działa to od strony technicznej?

Zapisane ustawienia są przekształcane na zmienne CSS.

Przykładowo wielkość wartości rabatu trafia do zmiennej:

--dc-stw-win_amount-size

Kolor tła przycisku jest przekazywany poprzez:

--dc-stw-claim_button-bg

To pozwala oddzielić konfigurację administracyjną od właściwego arkusza stylów.

Nie trzeba zapisywać osobnego pliku CSS za każdym razem, kiedy właściciel sklepu zmieni rozmiar tekstu.

Warto dodać, że ustawienia mają również walidację po stronie PHP. Rozmiar jest ograniczany do zakresu 10–96 pikseli, a nieobsługiwane wartości grubości są odrzucane na rzecz ustawień domyślnych.

Jak działa cały mechanizm od strony PHP i JavaScriptu?

Po omówieniu panelu możemy zajrzeć nieco głębiej do architektury wtyczki.

Nie chciałem, aby cała logika znalazła się w jednym dużym pliku PHP.

Dlatego podzieliłem projekt na kilka warstw.

Główna klasa wtyczki

Klasa DC_STW_Plugin odpowiada za inicjalizację rozszerzenia, ładowanie pozostałych klas i rejestrowanie podstawowych mechanizmów.

Podczas uruchomienia sprawdza również, czy aktywny jest WooCommerce.

Jeżeli WooCommerce nie jest dostępny, wtyczka nie inicjalizuje swojej głównej funkcjonalności i wyświetla odpowiednią informację w panelu administratora.

Klasy ustawień

Osobne klasy odpowiadają za:

• ustawienia ogólne,

• wybrane kupony,

• treści komunikatów,

• typografię.

Dzięki temu zapisywanie koloru popupu nie jest mieszane z logiką odczytywania kuponów czy wysyłania wiadomości e-mail.

Warstwa frontendowa

Klasa DC_STW_Frontend decyduje, czy koło powinno zostać załadowane na danej stronie.

Sprawdza ustawienia, przygotowuje listę nagród i dołącza potrzebne zasoby.

Popup jest renderowany przez szablon PHP umieszczony w osobnym pliku.

Sam model koła, jego animacje i interakcje obsługuje JavaScript.

Obsługa odbioru nagrody

Klasa DC_STW_Claim odpowiada za żądania AJAX.

Obsługuje zarówno użytkowników zalogowanych, jak i gości sklepu.

Jest to istotne, ponieważ większość klientów WooCommerce nie musi logować się przed rozpoczęciem przeglądania oferty.

Repozytorium zgłoszeń

Klasa DC_STW_Email_Lead_Repository odpowiada za zapis, odczyt i zliczanie zgłoszeń.

Dane przechowywane są poza standardowymi wpisami WordPressa, w osobnej tabeli bazy danych.

Takie rozwiązanie pozwala zachować czytelny podział pomiędzy danymi marketingowej akcji promocyjnej a produktami i zamówieniami sklepu.

Co dokładnie dzieje się podczas wysyłania formularza?

Z perspektywy klienta wystarczy wpisać adres e-mail i kliknąć przycisk.

W rzeczywistości uruchamiana jest sekwencja operacji.

Najpierw JavaScript sprawdza, czy adres e-mail ma poprawną postać oraz czy zaznaczono wymagany checkbox.

Następnie przeglądarka wysyła żądanie POST do endpointu WordPressa:

admin-ajax.php

Żądanie wykorzystuje akcję:

dc_stw_claim

Oprócz adresu e-mail przesyłane są również identyfikator wybranego kuponu, nonce oraz informacja o zaznaczeniu zgody.

Po stronie PHP wykonywane są kolejne kontrole.

Serwer weryfikuje aktywność modułu i poprawność tokenu bezpieczeństwa.

Następnie sprawdza adres e-mail oraz wymaganą zgodę.

Później porównuje identyfikator kuponu z listą wybranych nagród i sprawdza, czy dany kupon nadal istnieje oraz ma status opublikowanego.

Jeżeli wszystko przebiegnie pomyślnie, zgłoszenie jest zapisywane w bazie.

Dopiero po zapisie następuje próba wysłania wiadomości e-mail.

Jeżeli wp_mail() zwróci powodzenie, skrypt odpowiada komunikatem sukcesu.

Jakie dane trafiają do bazy?

Tabela zgłoszeń nosi nazwę:

{prefix}dc_stw_leads

Prefix jest pobierany z konfiguracji WordPressa.

W tabeli znajdują się między innymi:

Tabela tworzona jest za pomocą mechanizmu dbDelta() WordPressa.

Co w sytuacji, gdy wysyłka e-maila się nie powiedzie?

To ważny szczegół obecnej implementacji.

Zgłoszenie jest zapisywane w bazie przed próbą wysłania wiadomości.

Jeżeli zapis się powiedzie, ale wp_mail() zwróci błąd, klient zobaczy informację o niepowodzeniu wysyłki. Rekord pozostanie jednak w tabeli zgłoszeń.

W panelu nie ma osobnej kolumny oznaczającej status dostarczenia wiadomości.

Dlatego liczba zapisanych rekordów nie musi być równa liczbie skutecznie dostarczonych e-maili.

Warto o tym pamiętać podczas analizowania wyników kampanii.

Bezpieczeństwo i ograniczenia losowania

Nie chciałbym przedstawiać Spin To Win jako rozwiązania, które posiada mechanizmy, których jeszcze nie zaimplementowałem.

Z kodu wersji 1.0.0 wynika, że sam wybór zwycięskiego segmentu następuje w JavaScripcie, a więc po stronie przeglądarki.

Serwer podczas odbioru nagrody sprawdza, czy wskazany kupon jest jednym z kuponów wybranych przez administratora.

Nie weryfikuje natomiast niezależnie wyniku wcześniejszego losowania.

Oznacza to, że osoba potrafiąca analizować i modyfikować żądania przeglądarki może próbować zgłosić inny kupon z dozwolonej puli.

Wtyczka nie ma również osobnego serwerowego limitu losowań na użytkownika, adres e-mail czy IP.

Ograniczenia automatycznego otwierania popupu są zapisane w przeglądarce i mają charakter przede wszystkim interfejsowy.

Co więcej, lista nagród przekazywana do JavaScriptu zawiera kody kuponów, zanim klient prześle formularz e-mail. Nie należy więc traktować ich jako sekretów skutecznie ukrytych przed użytkownikiem.

To istotne ograniczenia w kontekście promocji, w których pojedyncza nagroda ma znaczną wartość.

Z tego powodu nie rekomendowałbym obecnej wersji jako systemu do przeprowadzania losowań drogich nagród, konkursów wymagających formalnej kontroli wyników ani akcji z bardzo ścisłymi limitami.

Przy takich zastosowaniach przeniósłbym wybór i zapamiętanie wyniku na serwer, wprowadził identyfikację losowania oraz ograniczenia liczby prób.

W obecnej postaci jest to przede wszystkim narzędzie do interaktywnego prezentowania promocji opartych na istniejących kuponach WooCommerce.

Czy WooCommerce nadal sprawdza ograniczenia kuponu?

Tak – podczas wykorzystania kodu w koszyku WooCommerce stosuje swoje standardowe zasady walidacji kuponów.

Jeżeli rabat wymaga minimalnej wartości zamówienia, klient musi spełnić ten warunek.

Jeżeli kupon jest ograniczony do konkretnych produktów albo kategorii, pozostają one objęte ograniczeniami zapisanymi w WooCommerce.

Dlatego tak ważne jest poprawne przygotowanie kuponów przed uruchomieniem promocji.

Spin To Win nie powinien zastępować zasad rabatowych sklepu. Powinien być ich atrakcyjną prezentacją.

Wydajność – czy koło 3D spowolni WooCommerce?

Nie będę twierdził, że biblioteka Three.js nie ma wpływu na wydajność.

Renderowanie sceny WebGL wymaga zasobów przeglądarki i nie jest tym samym co wyświetlenie zwykłego obrazka.

Podczas przygotowywania wtyczki zastosowałem jednak kilka rozwiązań pozwalających ograniczyć zbędne ładowanie.

Warunkowe dołączanie zasobów

Pliki frontowe nie są ładowane bezwarunkowo na każdej stronie.

Wtyczka najpierw sprawdza, czy jest aktywna, czy aktualna strona spełnia ustawione warunki i czy istnieje przynajmniej jedna dostępna nagroda.

Dopiero wtedy dołącza odpowiednie pliki CSS i JavaScript.

Jeżeli właściciel sklepu wyłączy moduł, nie powinien on ładować frontendowego koła.

Lokalna kopia Three.js

Biblioteka Three.js znajduje się w katalogu wtyczki.

Nie jest pobierana z zewnętrznego CDN podczas każdego wejścia użytkownika.

Ułatwia to kontrolowanie używanej wersji biblioteki i eliminuje zależność od zewnętrznego adresu dostarczającego sam skrypt.

Ograniczenie gęstości renderowania

Renderer wykorzystuje:

Math.min(window.devicePixelRatio || 1, 2)

Oznacza to, że współczynnik gęstości pikseli jest ograniczany do maksymalnie 2.

Ma to znaczenie szczególnie na urządzeniach o bardzo wysokiej rozdzielczości ekranu.

Renderowanie ukrytego popupu

Warto też wiedzieć, że skrypt uruchamia pętlę requestAnimationFrame, ale kiedy popup jest ukryty, pomija właściwe renderowanie sceny.

Nie jest to pełne zatrzymanie całej pętli animacji, dlatego nadal widzę tutaj możliwość dalszej optymalizacji.

Responsywność

Do dostosowywania rozmiaru sceny wykorzystałem ResizeObserver.

CSS uwzględnia również obszary bezpieczne ekranu urządzeń mobilnych, np. przy wcięciach i systemowych elementach interfejsu.

W przypadku ograniczenia ruchu w systemie (prefers-reduced-motion) wyłączana jest animacja pojawienia się karty nagrody. Nie oznacza to jednak automatycznego wyłączenia całej animacji koła 3D.

Przed wdrożeniem produkcyjnym polecam sprawdzić działanie na telefonach o różnej wydajności, a także zweryfikować, czy inne wtyczki optymalizujące JavaScript nie zmieniają kolejności ładowania Three.js i głównego skryptu.

Przykład kompletnej promocji Black Friday

Spróbujmy teraz przełożyć możliwości wtyczki na konkretny scenariusz.

Załóżmy, że prowadzimy sklep odzieżowy WooCommerce.

W sklepie mamy produkty o różnej marży. Chcemy zorganizować promocję Black Friday, ale nie chcemy oferować wszystkim klientom największego dostępnego rabatu.

Przygotowujemy więc kilka rodzajów nagród.

Nie są to wartości wynikające z obliczeń dla konkretnego sklepu. Traktuję je wyłącznie jako przykład konfiguracji.

W rzeczywistej kampanii należałoby uwzględnić marżę, średnią wartość koszyka, koszty dostawy oraz oczekiwaną rentowność promocji.

Etap 1 – tworzenie kuponów

W WooCommerce przygotowujemy sześć kuponów.

Każdy otrzymuje własny kod, odpowiedni rodzaj rabatu i ograniczenia.

Dodałbym także wyraźny termin ważności.

Przy promocjach sezonowych ważne jest, aby klient nie próbował wykorzystywać kodu długo po zakończeniu akcji.

Etap 2 – wybór nagród

Przechodzimy do sekcji Kupony w Spin To Win.

Zaznaczamy sześć przygotowanych kodów, zapisujemy wybór i sprawdzamy, czy wszystkie nagrody są dostępne.

Etap 3 – konfiguracja wyświetlania

Włączamy wtyczkę.

Ustawiamy wyświetlanie na stronie głównej i częstotliwość „Tylko raz”.

Dlaczego nie przy każdym odświeżeniu?

Ponieważ klient, który już zobaczył koło, nie musi oglądać go ponownie po każdej zmianie strony.

Dodatkowo umieszczamy w nagłówku przycisk „🎁 Zakręć kołem”.

Dzięki temu użytkownik może sam otworzyć promocję.

Etap 4 – przygotowanie komunikatów

W sekcji Treści wpisujemy:

Tytuł koła: BLACK FRIDAY – ZAKRĘĆ I WYGRAJ

Podtytuł: Przygotowaliśmy dla Ciebie sześć nagród. Sprawdź, jaki rabat uda Ci się zdobyć.

Nagłówek wygranej: Gratulacje! Twoja nagroda to:

Przycisk odbioru: Wyślij mi kod rabatowy

Komunikat sukcesu: Gotowe! Kod został wysłany. Sprawdź swoją pocztę.

Etap 5 – dopasowanie kolorów

Jeżeli sklep wykorzystuje czarną, złotą i białą kolorystykę, możemy zastosować ciemne tło koła oraz jasną kartę odbioru.

Tytuł koła ustawiamy dużą, wyrazistą czcionką.

Wartość nagrody pozostawiamy jako główny element karty.

Etap 6 – testowanie

Zanim uruchomiłbym kampanię, wykonałbym kilka próbnych losowań.

Sprawdziłbym, czy popup otwiera się w odpowiednim momencie, czy działa na telefonie, czy można wprowadzić e-mail i czy wiadomość rzeczywiście dociera.

Przetestowałbym też kupony bezpośrednio w koszyku.

To szczególnie ważne przy kodach z ograniczeniami kategorii, produktów i minimalnej wartości zamówienia.

Etap 7 – uruchomienie promocji

Po sprawdzeniu działania można włączyć akcję i obserwować zgłoszenia.

Dzięki zapisom w panelu właściciel sklepu może sprawdzić, ile razy klienci odebrali nagrody.

Warto później zestawić te dane z faktycznym wykorzystaniem kuponów i wynikami sprzedaży.

Samo rozdanie dużej liczby kodów nie oznacza jeszcze sukcesu kampanii. Ostatecznie interesuje nas to, czy promocja pomogła w realizacji celów sklepu.

Najczęstsze problemy i sposoby ich rozwiązania

Przygotowując tego typu rozszerzenia, staram się patrzeć na nie nie tylko z perspektywy autora kodu, ale również osoby, która będzie musiała je samodzielnie skonfigurować.

Dlatego zebrałem kilka sytuacji, które mogą pojawić się podczas instalacji i testowania.

Koło nie wyświetla się po wejściu na sklep

W pierwszej kolejności sprawdziłbym, czy moduł jest włączony w ustawieniach ogólnych.

Następnie warto sprawdzić, czy przynajmniej jeden kupon został zaznaczony w sekcji Kupony.

Bez aktywnej nagrody frontend nie renderuje koła.

Kolejny krok to ustawienie stron wyświetlania. Jeżeli wybrano tylko stronę główną, otwarcie podstrony produktu nie spowoduje uruchomienia popupu.

Sprawdziłbym też ustawioną częstotliwość. Być może przeglądarka zapamiętała już wcześniejsze wyświetlenie.

Podczas testów najprościej tymczasowo wybrać tryb uruchamiania przy każdym przeładowaniu strony.

Kupon nie pojawia się w panelu Spin To Win

Wtyczka pobiera opublikowane kupony WooCommerce.

Sprawdziłbym więc, czy dany kupon rzeczywiście został opublikowany oraz czy nie upłynął termin jego ważności.

Warto również pamiętać o limicie 200 kuponów wyświetlanych w panelu wyboru.

Jeżeli sklep posiada rozbudowaną bazę kodów promocyjnych, starsze lub dalsze alfabetycznie pozycje mogą nie zmieścić się na liście.

Koło się wyświetla, ale nie można go obrócić

W pierwszej kolejności sprawdziłbym konsolę JavaScript w przeglądarce.

Wtyczka wymaga prawidłowego załadowania Three.js.

Problemy mogą również powodować rozszerzenia optymalizacyjne, które opóźniają, łączą albo przestawiają kolejność wykonywania skryptów.

Warto przetestować stronę bez agresywnego opóźniania JavaScriptu.

Przycisk nie otwiera popupu

Jeżeli używamy własnego przycisku, upewnijmy się, że jego klasa odpowiada selektorowi wpisanemu w ustawieniach.

Dla domyślnej konfiguracji element powinien posiadać klasę:

dc-stw-open

Alternatywnie można zastosować atrybut:

data-dc-stw-open

Jeżeli przycisk został dodany przez kreator stron, który dynamicznie renderuje elementy, metoda z atrybutem może być wygodniejsza.

E-mail z kodem nie dociera

Najpierw sprawdziłbym, czy WordPress w ogóle potrafi wysyłać wiadomości.

Problem nie zawsze znajduje się w samej wtyczce. Może wynikać z konfiguracji serwera pocztowego, błędnych rekordów DNS, ograniczeń hostingu albo filtrów antyspamowych.

Dla sklepów produkcyjnych polecam korzystanie z poprawnie skonfigurowanej poczty transakcyjnej.

Należy też sprawdzić adres odbiorcy i folder spam.

Kupon jest widoczny na kole, ale WooCommerce go odrzuca

W takiej sytuacji sprawdziłbym ograniczenia zapisane w samym kuponie.

Może on wymagać minimalnej wartości zamówienia, dotyczyć określonych kategorii lub mieć wyczerpany limit użyć.

Warto pamiętać, że aktualna obsługa AJAX sprawdza, czy kupon jest wybrany i opublikowany, ale nie przeprowadza pełnej walidacji jego możliwości zastosowania do przyszłego koszyka konkretnego klienta.

Ostateczne warunki wykorzystania weryfikuje WooCommerce.

Tytuł albo opis nagrody nie mieści się na kole

Najprościej skrócić opis kuponu.

Tekstury koła generowane są dynamicznie, a wielkość czcionek jest dopasowywana do segmentów.

Jeżeli jednak wybierzemy kilkanaście nagród z bardzo długimi nazwami, czytelność będzie ograniczona.

Nie próbowałbym umieszczać pełnych warunków promocji na segmencie koła.

Lepiej wykorzystać krótką nazwę nagrody, a szczegółowe zasady opisać w odpowiednim miejscu sklepu.

Dlaczego po odinstalowaniu zniknęły zgłoszenia?

To szczególnie ważna kwestia.

Wtyczka posiada plik uninstall.php, który podczas pełnego odinstalowania usuwa zapisane opcje oraz tabelę dc_stw_leads.

Oznacza to również usunięcie historii zgłoszeń.

Dlatego przed odinstalowaniem zalecam wykonanie kopii zapasowej bazy danych i eksportu CSV.

Samo wyłączenie wtyczki nie jest tym samym co jej całkowite odinstalowanie.

Czy Spin To Win współpracuje z HPOS w WooCommerce?

W głównym pliku wtyczki dodałem deklarację zgodności z mechanizmem custom_order_tables, czyli HPOS – High-Performance Order Storage.

To ważne, ponieważ WooCommerce rozwija własny sposób przechowywania danych zamówień niezależnie od klasycznej struktury wpisów WordPressa.

Spin To Win nie operuje bezpośrednio na tabelach zamówień przy zapisie zgłoszeń. Korzysta z kuponów WooCommerce i własnej tabeli adresów e-mail.

Deklaracja kompatybilności z HPOS jest obecna w kodzie. Nie oznacza to jednak automatycznie, że przeprowadzono testy na każdej możliwej kombinacji wersji WooCommerce, motywu i innych rozszerzeń.

Dlatego, podobnie jak w przypadku każdego modułu wpływającego na proces promocyjny sklepu, warto sprawdzić go na środowisku testowym.

Czy wtyczka obsługuje wiele języków?

W kodzie przygotowałem domyślne komunikaty w języku polskim i angielskim.

Wybór domyślnego zestawu tekstów zależy od ustawień językowych środowiska WordPressa.

Wtyczka wykorzystuje również standardowy mechanizm tłumaczeń WordPressa i własną domenę tekstową.

Nie należy jednak mylić tego z pełnym systemem wielojęzycznej konfiguracji.

W obecnej wersji nie przygotowałem osobnych formularzy treści dla każdego języka sklepu, przełączanych automatycznie w zależności od języka odwiedzającego.

Jeżeli ktoś korzysta z WPML, Polylang albo innego rozwiązania wielojęzycznego, powinien dodatkowo sprawdzić, w jaki sposób komunikaty Spin To Win będą prezentowane w jego konfiguracji.

Jest to jeden z obszarów, które można rozwinąć w kolejnych wersjach.

Dla jakich sklepów przygotowałbym promocję Spin To Win?

Nie chciałbym ograniczać tego rozwiązania wyłącznie do Black Friday.

Chociaż właśnie od tej okazji zaczęła się historia projektu, koło fortuny można wykorzystać również podczas innych akcji.

Sklepy odzieżowe

Możemy przygotować nagrody zależne od wartości zamówienia, rabaty na wybrane kolekcje albo darmową dostawę.

W okresie wyprzedaży sezonowych koło może być dodatkowym sposobem prezentowania oferty.

Sklepy z zabawkami

Tutaj sam charakter interakcji może dobrze współgrać z identyfikacją wizualną marki.

Kolorowe koło, złote elementy i mechanika losowania pasują do bardziej swobodnej komunikacji.

Sklepy z elektroniką

W tym przypadku skupiłbym się na bardziej praktycznych nagrodach, takich jak rabat kwotowy, darmowa dostawa lub zniżka na akcesoria.

Sklepy z wyposażeniem wnętrz

Możemy wykorzystać koło w ramach promocji konkretnej kategorii, np. dekoracji albo dodatków.

Warto jednak zadbać o stonowaną kolorystykę popupu, jeśli cały sklep korzysta z eleganckiego projektu.

Kampanie sezonowe

Black Friday, Cyber Monday, wyprzedaże wakacyjne, rocznice sklepu czy akcje związane z wprowadzeniem nowej kolekcji to naturalne okazje do uruchomienia podobnego mechanizmu.

Najważniejsze, żeby samo losowanie nie zastępowało dobrze przygotowanej oferty.

Koło może przyciągnąć uwagę, ale klient nadal musi znaleźć produkty, których potrzebuje, w cenie uzasadniającej zakup.

Co jeszcze można rozwinąć w Spin To Win?

Tworząc własne rozszerzenia, staram się nie traktować pierwszej wersji jako ostatecznego zakończenia projektu.

W przypadku Spin To Win widzę kilka kierunków dalszego rozwoju.

Przede wszystkim warto byłoby przenieść zatwierdzanie losowania na serwer. Umożliwiłoby to bardziej rygorystyczną kontrolę nagród, ograniczenie wielokrotnych zgłoszeń oraz ewentualne stosowanie indywidualnych prawdopodobieństw.

Drugim obszarem mogłaby być rozbudowana analityka.

Chętnie zobaczyłbym w panelu liczbę otwarć popupu, rozpoczętych losowań, zakończonych losowań, zgłoszeń oraz zamówień, w których wykorzystano kupon.

Takie dane pozwoliłyby oceniać nie tylko atrakcyjność samej zabawy, ale także jej wpływ na sprzedaż.

Kolejnym krokiem mogłaby być integracja z zewnętrznymi narzędziami mailingowymi, przy zachowaniu oddzielnych zgód marketingowych.

Interesującym rozwinięciem byłoby również umożliwienie zmiany kolorów segmentów, dodawania własnych grafik oraz tworzenia kilku niezależnych kampanii w jednym sklepie.

Na razie są to jednak kierunki możliwego rozwoju, a nie funkcje dostępne w wersji 1.0.0.

Nie chciałbym obiecywać terminu ich wdrożenia, dopóki nie zdecyduję, które z nich rzeczywiście będą potrzebne użytkownikom.

Pobierz Design Cart Spin To Win dla WooCommerce

Wtyczka jest samodzielnym rozszerzeniem WordPressa przygotowanym dla sklepów korzystających z WooCommerce.

Nie wymaga modyfikowania plików motywu i korzysta z kuponów skonfigurowanych w standardowym panelu sklepu.

Linki do pobrania:

0

Jeżeli korzystasz z PrestaShop, przygotowałem również wcześniejszą wersję rozwiązania.

Znajdziesz ją w artykule Jak stworzyć angażującą klienta promocję na Black Friday w PrestaShop?.

Obie wersje powstały z konkretnych potrzeb naszych klientów i bazują na tej samej idei: zamiast zwykłego kodu promocyjnego dać użytkownikowi możliwość uczestniczenia w krótkiej, interaktywnej zabawie.

Podsumowanie – nie zawsze trzeba dawać większy rabat, czasem warto zaprezentować go inaczej

Tworzenie Spin To Win było dla mnie ciekawym połączeniem dwóch obszarów, którymi zajmuję się na co dzień: programowania i projektowania rozwiązań dla e-commerce.

Z jednej strony mamy dość klasyczną funkcję sklepu internetowego – kupony rabatowe.

Z drugiej interaktywny mechanizm wykorzystujący Three.js, WebGL, animację i obsługę gestów użytkownika.

Połączenie tych dwóch elementów pozwoliło przygotować rozwiązanie, którego zadaniem nie jest wyłącznie wyświetlenie promocji.

Chciałem, żeby klient mógł przez chwilę wejść z nią w interakcję.

Dlatego nie stworzyłem kolejnego popupu z dużym napisem „-20%”. Przygotowałem koło, które można chwycić, zakręcić i obserwować aż do zatrzymania wskazówki.

Jednocześnie zadbałem o stronę administracyjną. Właściciel sklepu nie musi edytować JavaScriptu, żeby zmienić nagrody. Może wykorzystać kupony WooCommerce, wybrać je w panelu, zmienić komunikaty i dostosować wygląd do swojej marki.

Nie jest to rozwiązanie idealne ani zakończone pod każdym względem. Szczególnie mechanizm losowania i kontrola wydawania kuponów mają jeszcze przestrzeń do rozwoju.

Uważam jednak, że dla odpowiednio przygotowanych promocji może stanowić ciekawą alternatywę dla tradycyjnych komunikatów rabatowych.

Najbardziej cieszy mnie to, że pomysł, który zaczął się od realizacji dla klientów PrestaShop, znalazł zastosowanie również w WooCommerce.

A to właśnie lubię w tworzeniu własnych modułów najbardziej.

Nie zawsze zaczynam od pytania: „Jaką kolejną funkcję można dopisać do sklepu?”.

Częściej zastanawiam się, czy coś, co już znamy i wykorzystujemy od lat, da się przedstawić w ciekawszy sposób.

Bo rabat pozostaje rabatem. Ale sposób, w jaki klient go zdobywa, może być zupełnie inny. 🎡