Framer – filtrowanie kolekcji CMS

Framer oferuje funkcję filtrowania listy, jednak zmiana kryteriów filtrowania wiąże się z koniecznością stworzenia komponentu z wariantami dla każdego wybranego zestawu opcji.

Takie rozwiązanie sprawdza się przy prostych filtrach, ale w przypadku bardziej rozbudowanych scenariuszy filtrowania generuje zbyt dużą liczbę wariantów. Opisane poniżej rozwiązanie eliminuje ten problem.

Nasze rozszerzenie oferuje:

• Zaawansowane filtrowanie oparte na tzw. polach wyboru, pozwala na precyzyjne selekcjonowanie danych poprzez zaznaczanie odpowiednich opcji.
• Swobodna personalizacja pustego widoku listy, przycisku paginacji oraz ekranu ładowania, do stylu strony internetowej.
• Układ Grid zapewnia responsywność na wszystkich urządzeniach.
• Paginacja ogranicza liczbę wyświetlanych elementów na liście, co pozwala na dynamiczne, a co za tym idzie szybsze wczytywanie treści.

Ważne: podczas pracy z dużymi kolekcjami w CMS należy pamiętać, że może to wpłynąć na wydajność strony. Dzieje się tak, ponieważ wszystkie elementy listy są ładowane jednocześnie, co może spowolnić działanie strony. Problem ten jest szczególnie zauważalny w przypadku kolekcji zawierających 100 lub więcej elementów.

Poradnik video

Poradnik tekstowy

1. Dodanie Code Components

Code Components to zwykłe komponenty Reacta.

Wystarczy je dodać do projektu poprzez skopiowanie załączonych linków i wklejenie ich w dowolne miejsce w projekcie. 

• CollectionManager – link
• CollectionItemFilter – link
• CheckboxWrapper – link

2. Utworzenie pliku Code override

Rozszerzenie wymaga dodatkowych klas. Utwórz nowy plik Code Override lub nadpisz istniejący. Jeśli nie wiesz jak dodać niestandardową klasę do komponentu/elementu w Framer, sprawdź ten poradnik  How to add a custom class to an element.

export function withClassForCheckbox(Component): ComponentType {
    return (props) => {
        props.className += " dg_advf_checkbox"

        return <Component {...props} />
    }
}

export function withClassForCollectionItem(Component): ComponentType {
    return (props) => {
        props.className += " dg_advf_item"

        return <Component {...props} />
    }
}

3. Tworzenie niestandardowego checkboxa

Niestandardowy checkbox musi posiadać dwa warianty: Unchecked oraz Checked.

Dla każdego elementu wewnątrz komponentu musisz ustawić pointer-events: none

Wykorzystaj plik Code Override, aby przypisać klasę do każdego checkboxa za pomocą funkcji „withClassForCheckbox”.

Następnie, użyj komponentu CheckboxWrapper, który zawiera następujące właściwości:

• Name: Identyfikuje filtr, używany również do grupowania filtrów.
• Value: Wartość.
• Checkbox: Dowolny komponent utworzony przez nas.

4. Ustawienie komponentu CollectionItemFilter

Po dodaniu listy kolekcji do warstw, nadaj komponentowi Stack klasę za pomocą funkcji o nazwie „withClassForCollectionItem”, którą dodaliśmy wcześniej w pliku Code Override.

Następnie, wewnątrz komponentu Stack, możemy dodać komponent CollectionItemFilter, który zawiera następujące właściwości:

• Name: Powinno być identyczne z nazwą ustawioną w CheckboxWrapper.
• Value: Przekazujesz tutaj dowolne pole z CMS, które chcesz użyć.

Aby ukryć dodany komponent CollectionItemFilter, ustaw poniższe style:

• Position: absolute
• Z-Index: -1

5. Konfiguracja CollectionManager

Najpierw dodaj komponent CollectionManager do wybranej warstwy. Następnie połącz instancje komponentów z odpowiednimi polami:

• CMS Collection: Komponent reprezentujący Collection List.
• Load More Button: Komponent pełniący rolę przycisku do załadowania kolejnych elementów z listy.
• Empty Collection: Komponent wyświetlany, gdy podczas filtrowania nie zostanie znaleziony żaden element.
• Loader: Komponent wyświetlany podczas ładowania listy.

6. Ustawienia

Za pomocą poniższych ustawień możesz dostosować działanie filtrowania i wygląd listy.

Match (dopasowanie)

• Any: Wyszukuje dowolny element, który pasuje przynajmniej do jednego filtra.
• Precise: Wyszukuje elementy pasujące do wszystkich filtrów.

Pagination (paginacja)

• Limit: Maksymalna liczba elementów do wyświetlenia i załadowania za pomocą przycisku „Załaduj więcej”.
• Duration of loading: Czas sztucznego ładowania listy w milisekundach.
• Margin Top: Odstęp między przyciskiem „Załaduj więcej” a listą kolekcji.

Grid

Aby ułatwić dostosowanie wyglądu listy, wykorzystywany jest układ grid. Pozwala to na zdefiniowanie liczby kolumn oraz odstępów między nimi.

Za pomocą opcji Gap Mode możemy przełączyć się do trybu zaawansowanego, który pozwala nam ustawić odstępy między kolumnami i wierszami osobno.

Visibility of the Collection on Canvas (widoczność kolekcji w aplikacji Framer)

Ta opcja pozwala ukryć listę tylko w aplikacji Framer. Nie oznacza to jednak automatycznie, że lista będzie niewidoczna na stronie internetowej.

Jeśli kolekcja CMS zawiera wiele elementów, renderowanie całej listy może przeciążyć aplikację Framer, potencjalnie wpływając na pracę innych elementów na tej samej stronie zawierającej komponent CollectionManager.