Framer – filtrowanie kolekcji CMS

dogtronic.io 4 miesięcy temu

Framer oferuje funkcję filtrowania listy, jednak zmiana kryteriów filtrowania wiąże się z koniecznością stworzenia komponentu z wariantami dla wszystkich 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ć, iż 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

Zobacz demo: https://advanced-filtering-cms-dogtronic.framer.website

Możesz również skopiować gotowy projekt dzięki tego linku:
https://framer.com/projects/new?duplicate=5eM5GYgAi2d2pabVDB4p

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żeli 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 dzięki funkcji „withClassForCheckbox”.

Następnie, użyj komponentu CheckboxWrapper, który zawiera następujące adekwatnoś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ę dzięki 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 adekwatnoś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 dzięki 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, iż 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.

Idź do oryginalnego materiału