Sklepy Groszek, raper Mata i… nowa strona internetowa!

Groszek to jedna z najbardziej znanych sieci sklepów w Polsce wchodząca w skład wielkopolskiej grupy Eurocash. „Groszków” na terenie całego kraju jest już ponad dwa tysiące. Dzięki bardzo korzystnym warunkom franczyzowym, liczba sklepów systematycznie rośnie.

Jeszcze zanim znany warszawski raper młodego pokolenia, Mata, wcielił się w rolę ekspedienta w jednym ze sklepów Groszek, sprzedając preordery swojego drugiego albumu, cała sieć sklepów konsekwentnie i bez rozgłosu przygotowywała się do zmiany swojej strony internetowej. Stara była już przestarzała i niefunkcjonalna, więc podjęto decyzję o jej całkowitej modernizacji. Zmiana image’u w wirtualnym świecie okazała się niezbędna, ponieważ postęp i nowe technologie odgrywają coraz większą rolę w naszym życiu.

Punktem wyjścia była zmiana logo, które zostało uproszczone i unowocześnione, łącznie z oficjalnym fontem. Oprócz dotychczas realizowanych aktywności marketingowych, powierzono nam ważną misję zaprojektowania i oprogramowania zupełnie nowej, niezwykle zaawansowanej w swoim działaniu i ekosystemie, aplikacji sieciowej. Zgodnie z założeniami, ma ona spełniać oczekiwania nawet najbardziej wymagających internautów.

Rozwiązania technologiczne

Nowa witryna WWW została stworzona przy użyciu nowoczesnych narzędzi, w pełni adekwatnych do czasów, w których żyjemy. Jak zawsze, skorzystaliśmy ze stosu (ang. stack) najnowszych, niezawodnych i wydajnych technologii programistycznych. One, w idealny wręcz sposób, uzupełniają się nawzajem i wydobywają pełnię możliwości nowoczesnych przeglądarek internetowych.

Całość została oparta na najbardziej popularnym systemie zarządzania treścią (ang. Content Management System), jakim jest ogólnodostępny WordPress. Dzięki akurat temu CMS-owi, jednym z elementów w tej całej układance odgrywa system wpisów, tu pod postacią „Aktualności” oraz „Przepisów”. Dodatkowo, dzięki intuicyjnemu panelowi administracyjnemu, osoby odpowiedzialne za aktualizację treści mogą modyfikować zawartość merytoryczną wszystkich podstron i sekcji witryny bez konieczności znajomości programowania, a nawet webowych języków opisowych (HTML, CSS).

Zawartość statyczna i dynamiczna

W witrynie istnieją podstrony, których zawartość merytoryczna jest modyfikowana z poziomu panelu administracyjnego (content statyczny). To jednak nie wszystko, istnieje bowiem pokaźny zbiór podstron, wobec których zastosowano całkowicie odmienne, tj. dynamiczne, podejście.

Dynamiczna zawartość produktowo-ofertowa witryny internetowej została całkowicie zintegrowana z zewnętrznym API (ang. application programming interface — interfejs programistyczny aplikacji) powiązanym technicznie z kreatorem promocji podmiotów gospodarczych działających w ramach franczyzy Groszek. Wymagało to zatem od nas dogłębnej znajomości niezależnego API, żeby móc w sposób spersonalizowany i dynamiczny pobierać pożądane dane.

Cechą charakterystyczną stworzonego przez nas produktu uszytego na miarę są także, a może przede wszystkim, dodatkowe funkcjonalności, których inne strony WWW najczęściej nie posiadają. To właśnie one uczyniły ten projekt tak bardzo skomplikowanym i pracochłonnym, choć jednocześnie unikalnym i niezwykle intrygującym.
Łukasz Krawczyk (web developer)

Dla niewtajemniczonych, API to ściśle określony zestaw reguł oraz metod i właściwości, które umożliwiają komunikację programistyczną między twórcą aplikacji a całym systemem.

Podstrony takie, jak „Gazetka”, „Tylko w sklepie Groszek” czy „Sklepy”, są tego doskonałymi przykładami. Uzupełnieniem ich jest, rzecz jasna, strona główna wyświetlająca docelowo żółte, zielone, a w przyszłości też i czerwone, promocje produktowe.

Niestandardowe funkcjonalności

Na podstronie gazetkowej, z zewnętrznego API pobierane są pliki PDF do interaktywnego ich przeglądania.

Na podstronie „Tylko w sklepie Groszek”, zaprezentowane są produkty z zewnętrznego API, które sprzedawane są w ramach marki własnej. Zostało to uzupełnione o funkcjonalność ich filtrowania względem kategorii.

Z kolei „Sklepy” to podstrona, której programistycznym sercem jest API Map Google (ang. Google Maps). Na mapie zamieszczono wszystkie sklepy sieci Groszek — zarówno te zintegrowane z kreatorem promocji, jak i niezintegrowane. Dla tych pierwszych, wyświetlane są produkty i gazetki. Sklepy są zlokalizowane na mapie oczywiście na podstawie zewnętrznego API. Stworzone zostało przez nas również miniAPI wewnętrzne. Uzupełnia ono wykaz sklepów o sklepy niezintegrowane, których jest nawet kilka razy więcej od tych zintegrowanych. Dodatkowym „smaczkiem” jest wyszukiwarka sklepów wzbogacona o moduł autouzupełniania (ang. autocomplete), która, w efekcie swojego działania, wskazuje najbliższe sklepy względem wyszukiwanego miejsca.

Wisienką na torcie jest mechanizm geolokalizacji, który uaktywnia się po zaakceptowaniu funkcjonalnych plików cookie. To właśnie dzięki wbudowanemu w nowoczesne przeglądarki geolokalizowaniu możemy pobrać współrzędne geograficzne użytkownika i przypisać mu najbliższy zintegrowany sklep. Jeżeli internauta chciałby przypisać sobie sklep niestandardowy, powinien go odnaleźć z poziomu podstrony z mapą opartej na Google Maps. Dodajmy, iż w takiej sytuacji użytkownikowi nie wyświetlą się produkty i oferty, bo te zarezerwowane są tylko dla sklepów zintegrowanych.

Adres URL nowej witryny webowej

Nowa strona internetowa sklepów Groszek dostępna jest pod dotychczasowym adresem URL groszek.com.pl i — żeby móc wydobyć pełnię możliwości funkcjonalnych — została zabezpieczona certyfikatem bezpieczeństwa SSL, dzięki czemu połączenie z nią jest szyfrowane, więc w pełni bezpieczne.

Jest ona, rzecz jasna, w pełni responsywna, w związku z czym płynnie skaluje się i adaptuje względem pikselowych rozmiarów ekranu urządzenia, na którym jest uruchamiana. Co więcej, zadbaliśmy też o dostosowanie produktu końcowego do wyświetlaczy wysokiej rozdzielczości Retina i ogólnie do wyświetlaczy o wysokiej gęstości pikseli, w które obecnie wyposażone są smartfony czy tablety.

Z technicznego punktu widzenia, całość jest w pełni kompatybilna z nowoczesnymi sieciowymi przeglądarkami. Mamy na myśli nie tylko Chrome od Google’a, Firefox od Mozilli, lecz także norweską Operę oraz Edge od Microsoftu.

A Wy z jakimi nieszablonowymi i czasochłonnymi wyzwaniami spotkaliście się podczas kodowania strony, sklepu czy aplikacji internetowej? Co sprawiało Wam najwięcej kłopotów i trudności, lecz ostatecznie dało ogrom dumy, radości i zadowolenia?

Zapraszamy do dyskusji na naszym facebookowym fanpage’u!

Gorąco zachęcamy do osobistego sprawdzenia rezultatów naszych kilkumiesięcznych działań graficzno-programistycznych — groszek.com.pl

Last, but not least…

Pomimo tego, że — opracowując szatę graficzną — musieliśmy trzymać się systemu identyfikacji wizualnej (SIW) sieci sklepów Groszek, layout niniejszej strony został oparty o nasze autorskie narzędzia — cyberdesign oraz cybersemantykę — które znacząco podnoszą skuteczność realizowanych przez nas projektów.