Shoper Kariera — oferty pracy, które HR publikuje bez developera

Zadanie

Shoper potrzebował strony kariery, którą dział HR prowadzi samodzielnie: dodaje ofertę, publikuje ją i nie czeka na developera. Projekt był gotowy w Figmie, a oferty miały trafiać do Webflow CMS.

Wdrożyłem stronę w Webflow razem z działem marketingu. Dwie rzeczy wymagały pracy poza samym Webflow: liczba otwartych rekrutacji przy „Oferty pracy” w nawigacji, widoczna na każdej podstronie, oraz filtr ofert po mieście z liczbą ofert przy każdym.

Liczba ofert w nawigacji

Liczbę ofert zna API Webflow, ale żeby z niego skorzystać, potrzebny jest token dostępu. Tokenu nie umieszcza się w kodzie strony, bo każdy mógłby go odczytać.

Dlatego między stroną a Webflow stoi mała funkcja na Vercelu. Trzyma token po stronie serwera, pyta API o kolekcję ofert i zwraca liczbę. Skrypt na stronie wstawia ją do nawigacji.

HR publikuje ofertę w Webflow, a liczba w nawigacji zmienia się na wszystkich podstronach. Funkcja działa nieprzerwanie od stycznia 2024 roku.

Filtr po mieście

Na liście ofert każde miasto ma swoją liczbę otwartych rekrutacji. Miasta bez ofert znikają z filtra same, więc kandydat nie trafia na pustą listę.

Wybrane miasto trafia do adresu strony (?lokalizacja=Kraków). Dzięki temu kafelki miast na stronie głównej prowadzą od razu do przefiltrowanej listy, a link z filtrem można komuś wysłać. Przyciski filtra mają stan dla czytników ekranu (aria-pressed) i działają z klawiatury.

Animacje i analityka

Wyróżnione słowa w nagłówkach dostają rysowane podkreślenie, a sekcja o zespole przewija tekst w parze ze zdjęciami (GSAP ScrollTrigger). Analitykę ustawiłem w Google Tag Managerze razem z działem marketingu.

Efekt

Strona działa od 2022 roku. HR samodzielnie dodaje i zamyka rekrutacje, a liczba ofert w nawigacji i w filtrze zmienia się razem z nimi, bez udziału developera.

„Odwzorował nasze projekty UX/UI z dużą dbałością o szczegóły, responsywność i spójność wszystkich elementów strony.” Product Design Owner, Shoper