Katalog części i akcesoriów

https://catalog.polo.blue

Katalog części i akcesoriów VW Polo 6R

Katalog części i akcesoriów VW Polo 6R zbudowany w Astro i Vue3, po migracji z wcześniejszej wersji Vue2. Choć nie jest to sklep internetowy, strona posiada wiele funkcji typowych dla e-commerce, z wyjątkiem obsługi płatności.

Wyzwania

Kluczowym wyzwaniem była optymalizacja obrazów przy rozbudowanym katalogu produktów i przewadze ruchu mobilnego. Początkowo obrazy były kompresowane przez Sharp i Astro Assets. Docelowo rozwiązanie zostało zastąpione kompresją po stronie backendu Laravel z kolejkowaniem zadań w Horizon. Używany jest format WebP jako fallback dla nowszego AVIF ze względu na jego wciąż ograniczone indeksowanie w Google Image Search.

Aby usprawnić nawigację po licznych kategoriach, zaimplementowano przewijalne menu głównych kategorii i zastąpiono listę podkategorii w stopce dedykowaną stroną “Mapa witryny”, poprawiając wyniki w SERP. Strona obsługuje angielski i polski z prawidłowo skonfigurowanymi hreflangami oraz renderuje dokumenty PDF. Dodatkowo strona posiada wydajną funkcję wyszukiwania produktów.

Aby wzmocnić linkowanie wewnętrzne, dodano sekcje Powiązane produkty i Podobne produkty, ułatwiając nawigację użytkownikom i wspierając SEO. Na podstawie testów A/B dodano przyciski nawigacyjne do płynnego przeglądania produktów w ramach kategorii.

Backend i panel administracyjny

Backend oparty na Laravel i FilamentPHP zarządza dostarczaniem REST API i zawiera kompleksowy panel administracyjny do:

Zarządzania produktami z obsługą wielu języków
Organizacji kategorii i hierarchii
Zarządzania tłumaczeniami (angielski, polski, niemiecki)
Przesyłania mediów i zarządzania galerią

Baza wiedzy FAQ

Katalog zawiera zintegrowany system FAQ dostarczający specyfikacje techniczne i poradniki dla VW Polo 6R. Treść jest zorganizowana według kategorii produktów (opony, felgi, olej silnikowy, klimatyzacja, hamulce, zawieszenie, części karoserii) i obsługuje wielojęzyczne wyświetlanie z linkami do szczegółowych wpisów na blogu.

Zarządzanie treścią z FilamentPHP

Panel administracyjny zbudowany z FilamentPHP (19 zasobów, 36 widżetów) zapewnia kompleksowy interfejs do:

Treść i lokalizacja

Zarządzanie produktami, kategoriami, stronami i FAQ
Wielojęzyczne tłumaczenia (EN/PL/DE) z integracją DeepL
Biblioteka mediów ze śledzeniem konwersji obrazów
Zarządzanie przekierowaniami z automatycznymi sugestiami dla 404

Analityka i monitoring

Google Analytics - Odsłony, odwiedzający, sesje, urządzenia, top referrerzy, dane geograficzne
Google Search Console - Kliknięcia, wyświetlenia, CTR, średnia pozycja, top strony i zapytania
Google AdSense - Śledzenie przychodów z wielu stron, RPM, alerty o spadkach przychodów

Operacje i utrzymanie

Czyszczenie cache Cloudflare (według URL, prefiksu lub typu modelu)
Narzędzia do backupu/przywracania bazy danych
Logowanie aktywności i ścieżka audytu
Audyty kompletności SEO i monitoring jakości danych

Wykorzystane technologie

Astro

Nowoczesny framework webowy do budowania szybkich i zoptymalizowanych stron. Częściowa hydratacja Astro poprawia wydajność, ładując JavaScript tylko wtedy, gdy jest potrzebny.

Vue.js

Umożliwia budowanie interaktywnych komponentów, takich jak przeglądarka PDF, zapewniając dynamiczny i responsywny interfejs użytkownika.

Laravel

Zapewnia solidną integrację backendu z REST API, umożliwiając płynną komunikację między serwerem a klientem i wspierając dynamiczne funkcje strony.

FilamentPHP

Napędza panel administracyjny do zarządzania treścią, w tym produktami, kategoriami, tłumaczeniami, wpisami FAQ i przesyłaniem mediów z intuicyjnym interfejsem TALL-stack.

Progressive Web App (PWA)

Oferuje płynne, aplikacyjne doświadczenie na urządzeniach mobilnych z możliwością pracy offline, szybkim dostępem i zwiększoną wydajnością dla bardziej niezawodnej interakcji z użytkownikiem.

Cloudflare

Zwiększa wydajność i bezpieczeństwo strony, zapewniając ochronę przed DDoS, szybsze dostarczanie treści przez globalne CDN i zaawansowane zarządzanie ruchem.

Google Tag Manager

Ułatwia integrację Analytics i AdSense, umożliwiając szczegółowe śledzenie i monetyzację.

Strona jest Progressive Web App (PWA), co pozwala użytkownikom zainstalować ją i używać jak natywnej aplikacji. W planach jest implementacja trybu ciemnego.

Silne SEO i optymalizacja obrazów przyciągnęły znaczący ruch z wyszukiwarek grafiki.