Rozbudowa bloga dla Diamond Pigs w Webflow

Jakiś czas temu migrowałem stronę internetową z WordPressa do Webflow dla Diamond Pigs. Tym razem klient zgłosił się do mnie z prośbą o rozbudowę bloga i dodanie nowych funkcjonalności. Klient bardzo mocno stawia na rozwijanie bloga i artykułów, dlatego potrzebował nowych rozwiązań.

Po omówieniu potrzeb i zakresu rozbudowy doszliśmy do porozumienia.

Wymagania dla nowego bloga

Strona główna bloga

1. Zmiana głównej strony bloga
   Dodanie sekcji „Wyróżnione artykuły” – jeden główny artykuł oraz trzy poboczne.
2. Sekcja popularnych artykułów
   Wyświetlanie trzech najbardziej popularnych artykułów.
3. Modyfikacja sekcji „Wszystkie artykuły”
   Dodanie filtrowania według kategorii, tagów oraz możliwość wyszukiwania i sortowania artykułów (po nazwie i dacie publikacji).
4. Zmiana wyglądu kart blogowych
   Dodano flagę kategorii z linkiem, autora artykułu oraz oznaczenia typu artykułu takie jak: Most Popular, Best Converting, Newest Article.
5. Dodanie kolekcji kategorii artykułów

Strona pojedynczego artykułu

1. Dodanie breadcrumbów – ścieżki nawigacji do danego artykułu.
2. Funkcjonalność udostępniania artykułu w social mediach oraz kopiowania adresu URL.
3. Lekka zmiana layoutu – na końcu artykułu wyświetlany jest autor oraz ponownie opcje udostępnienia.
4. Dodanie sekcji z podobnymi artykułami.

Strony kategorii

1. Dodano indywidualne strony kategorii, gdzie wyświetlane są artykuły z danej kategorii.
   Sekcja posiada te same możliwości filtrowania co główna strona bloga.

Strony tagów

1. Zmodyfikowano wygląd stron tagów – są spójne ze stronami kategorii.

Dodatkowe sekcje

1. Sekcja subskrypcji – formularz zapisu na newsletter.
2. Sekcja CTA – zachęta do założenia darmowego konta i wypróbowania aplikacji do inwestowania w kryptowaluty.

Działanie sekcji „Wyróżnione artykuły”

Aby sekcja działała logicznie i poprawnie, konieczne było jej dobre przemyślenie oraz zabezpieczenie.

W CMS dodałem trzy pola do konfiguracji przy dodawaniu artykułu:

• "Feature article" – przełącznik określający, czy artykuł jest wyróżniony.
• "Feature type" – typ wyróżnienia: main (główny artykuł) lub secondary (trzy poboczne artykuły).
• "Featured order" – liczby od 1 do 3 określające kolejność wyświetlania artykułów typu secondary.

Zabezpieczenia

Wprowadziłem zabezpieczenie, które gwarantuje poprawne wyświetlanie sekcji, nawet jeśli ustawienia CMS są niekompletne. Do tego celu użyto niestandardowego kodu JavaScript wykorzystującego klasy generowane przez Webflow dla dynamicznych elementów.

Jeśli nie są spełnione wszystkie warunki dla artykułów pobocznych, zamiast nich wyświetlane są losowe artykuły.

Dodatkowe elementy w CMS

1. Przełączniki flag typu artykułu:
   • Most Popular – aktywacja powoduje wyświetlenie sekcji z trzema najpopularniejszymi artykułami (jeśli jest ich co najmniej 3).
   • Newest – oznacza najnowsze artykuły.
   • Best Converting – najlepiej konwertujące wpisy.
2. Pole referencyjne
   Każdy artykuł ma przypisane pola referencyjne do kolekcji kategorii oraz autorów/pracowników.
3. Modyfikacja daty publikacji
   Zmieniono pole „pierwsza publikacja” na typ „data”.

Filtrowanie i sortowanie artykułów

Do realizacji tej funkcjonalności wykorzystano Finsweet Attributes:

• CMS Filter – do filtrowania artykułów według kategorii, tagów i fraz z pola wyszukiwania.
• CMS Sort – do sortowania według daty i nazwy.

Ładowanie kolejnych artykułów

Do paginacji i dynamicznego ładowania kolejnych wpisów użyto Finsweet CMS Load.

Ograniczenia

To rozwiązanie ma pewne ograniczenia – np. przy resetowaniu cache’u mogą znikać interakcje ze stanem początkowym. Problem ten zostanie opisany szerzej w osobnym artykule poradnikowym.

Funkcjonalność udostępniania

Do udostępniania artykułów w mediach społecznościowych oraz kopiowania linków użyto sprawdzonego niestandardowego kodu JavaScript. Jest on niezawodny i przetestowany.

Zabezpieczenia CMS

Zabezpieczono wiele pól CMS warunkami widoczności – jeśli dane pole nie zostało uzupełnione, nie jest ono wyświetlane lub zastępowane innym elementem.

Zabezpieczenie bloga było jednym z głównych celów – wszystko ma wyświetlać się prawidłowo w każdej możliwej sytuacji, niezależnie od jakości danych wprowadzonych w CMS.

Podsumowanie

Rozbudowa bloga dla Diamond Pigs w Webflow była kompleksowym projektem obejmującym modyfikacje wizualne, strukturalne i funkcjonalne. Największy nacisk położono na:

• poprawę UX bloga,
• filtrowanie i sortowanie treści,
• bezpieczeństwo i niezawodność działania,
• pełną kontrolę nad CMS,
• zwiększenie zaangażowania użytkowników (subskrypcje, CTA, udostępnienia).

Wdrożone rozwiązania pozwalają zespołowi Diamond Pigs wygodnie rozwijać treści blogowe, bez obaw o problemy z wyświetlaniem czy brak kontroli nad zawartością.