Angels2Animals

O projekcie

Fundacja Centaurus to międzynarodowa organizacja zajmująca się ratowaniem zwierząt. W ramach projektu dla serwisu angels2animals.com (oraz trzech pozostałych rynków zagranicznych) stworzyliśmy od podstaw dedykowany system fundraisingowy. Zrezygnowaliśmy z gotowych motywów i ciężkich page builderów na rzecz autorskiego, ultralekkiego silnika, który łączy w sobie pełną swobodę edycji dla redaktorów z zaawansowaną logiką biznesową i płatniczą.

Wyzwanie

Celem fundacji nie było wdrożenie kolejnej prostej wtyczki „Donate”. Organizacja potrzebowała kompleksowego systemu do obsługi jednorazowych darowizn, zbiórek celowych, wirtualnych adopcji, petycji oraz Klubu Centaurus. System musiał działać błyskawicznie na urządzeniach mobilnych, obsługiwać geolokalizację z automatycznym doborem walut oraz integrować się z bramką Stripe. Dodatkowym wyzwaniem była obsługa czterech rynków (EN, PL, DE, IT) na osobnych domenach, zarządzanych z poziomu jednego, centralnego silnika WordPress.

Architektura i wdrożone rozwiązania

• Autorski Block Theme: Zbudowaliśmy dedykowany motyw oparty na architekturze Gutenberga. Stworzyliśmy ok. 40 własnych bloków (m.in. hero, moduł zbiórek, dynamiczna mapa, adopcje, donacje), dzięki którym redaktorzy mogą intuicyjnie układać strony z gotowych, spójnych wizualnie klocków.
• Hybrydowy Checkout (React + Stripe): Proces płatności został napisany w React (@stripe/react-stripe-js). Moduł ładuje się asynchronicznie, dopiero gdy użytkownik otwiera checkout, dzięki czemu nie blokuje pierwszego renderowania strony. System obsługuje płatności kartą, Apple Pay, Google Pay i PayPal, w pełni dostosowując waluty i metody do kraju darczyńcy.
• Dedykowane REST API i Custom Post Types: Zamiast opierać się na zewnętrznych wtyczkach czy WooCommerce, stworzyliśmy autorskie API do obsługi płatności, statusów transakcji czy własnego modułu Live Chat. Za pomocą Custom Post Types wyodrębniliśmy logikę dla zbiórek (z pełnym cyklem życia: Live, Ended, Archiwum), zwierząt, adopcji wirtualnych oraz petycji.
• Integracja i analityka: Po udanej wpłacie webhook ze Stripe przesyła dane do WordPressa, zapisuje darczyńcę, opcjonalnie dodaje go do bazy MailerLite i precyzyjnie raportuje konwersję do GTM (dataLayer) i Meta Pixel (bez ryzyka podwójnego zliczania).

Wydajność – bezkompromisowe 100/100

Motyw został zaprojektowany i zaprogramowany stricte pod wytyczne Core Web Vitals, dzięki czemu osiąga perfekcyjne wyniki 100/100 w PageSpeed Insights na desktopie i mobile. Jak to osiągnęliśmy?

• Wdrożyliśmy preloading kluczowych grafik (LCP) oraz fontów.
• Wykorzystaliśmy krytyczny CSS (inline) i minifikację dzięki Tailwind CSS, całkowicie eliminując przesunięcia układu (CLS).
• Odroczyliśmy (defer) ładowanie skryptów motywu, analityki oraz formularzy, dzięki czemu wskaźnik TBT (Total Blocking Time) pozostaje w zielonej strefie.
• Zrezygnowaliśmy ze zbędnego kodu edytora na front-endzie (lazy-load mediów, asynchroniczne dekodowanie).

Rezultat

Dostarczyliśmy potężną, a zarazem niezwykle lekką platformę typu enterprise. Darowizny, subskrypcje, adopcje i zbiórki korzystają z jednej, wydajnej warstwy płatniczej. Fundacja Centaurus zyskała w pełni dedykowane, skalowalne i błyskawiczne narzędzie, które realnie wspiera ich misję ratowania zwierząt na całym świecie.

Zobacz stronę angels2animals.com