Framer – filtrowanie kolekcji CMS

Spis treści

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.

Podgląd gotowego projektu.

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.

Dwa warianty niestandardowego checkboxa.

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

Każdy element wewnątrz komponentu musi mieć ustawiony pointer event na none.

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

Dodaj klasę za pomocą pliku Code Override.

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.
Wartości komponentu CheckboxWrapper.

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.

Dodanie CollectionItemFilter.

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ć.
Właściwości CollectionItemFilter.

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.
Ustawienia CollectionManager.

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.
Ustawienia CollectionManager - Match.

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.
Ustawienia CollectionManager - Pagination.

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.

Ustawienia CollectionManager - Grid.

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.

Ustawienia CollectionManager - Gap mode.

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.

Jakub Rychlicki

Front-End Developer

Zostaw komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *

20 − trzy =

Przekształć
swoje pomysły w rzeczywistość

Skontaktuj się z nami i pozwól nam sprawdzić jak możemy Ci pomóc.

Najciekawsze treści na Blogu