FacetWP – Color

FacetWP Color: Wprowadzenie do Filtracji Kolorami

FacetWP Color to elastyczne narzędzie w systemie WordPress, które pozwala na filtrowanie postów lub produktów w zależności od wybranej koloru. Pozwala na zwiększenie użyteczności witryny, umożliwiając użytkownikom łatwe przeszukiwanie ofert według kolorów. W tym artykule omówimy zasady działania tej funkcjonalności, jej zastosowania, a także podzielimy się przykładami i wskazówkami, jak maksymalnie wykorzystać jej potencjał.

Jak Działa FacetWP Color?

FacetWP Color działa z wykorzystaniem wartości kolorów z zdefiniowanych źródeł danych. Kolory są prezentowane jako klikane prostokątne swatche, co sprawia, że interfejs jest przejrzysty i estetyczny. Użytkownicy mają możliwość wyboru jednego lub więcej kolorów, co skutkuje dopasowaniem widocznych wyników na stronie. Dodatkowo, kliknięcie na wybrany swatch może zresetować wybór, co daje pełną kontrolę nad filtrowaniem.

Opcje Konfiguracji

FacetWP Color oferuje szereg opcji konfiguracji, które umożliwiają dostosowanie zachowania filtra do potrzeb strony. Oto kluczowe opcje, które można skonfigurować:

• Data Source: Możliwość wyboru źródła danych, które będzie zawierać poprawne wartości kolorów, co może obejmować pola niestandardowe, kategorie lub atrybuty produktu w systemie WooCommerce.

• Parent Term: Umożliwia wyświetlenie tylko dzieci określonego terminu w hierarchicznej taksonomii. Wprowadzając ID rodzica, można zawęzić wybór.

• Value Modifiers: Tutaj można wprowadzić wartości do dołączenia lub wykluczenia. To ustawienie pozwala na dokładniejsze dostosowanie widocznych wartości kolorów.

• Facet Logic: Umożliwia określenie logiki, która powinna być zastosowana między wybieranymi opcjami.

• Sort By: Umożliwia dostosowanie sposobu sortowania dostępnych kolorów, na przykład według nazwy koloru lub liczby, co może pomóc w lepszej organizacji.

Wykorzystanie Kolorów w WooCommerce

Kiedy pracujemy z WooCommerce, FacetWP Color może być użyty do filtrowania produktów na podstawie atrybutów kolorów. W przypadku atrybutów produktów można przypisywać kolory lub obrazy, co zwiększa wizualną atrakcyjność oferty.

Przykład Zastosowania

Wyobraźmy sobie sklep internetowy sprzedający odzież. Dzięki FacetWP Color klienci mogą znaleźć produkty w dokładnie takim kolorze, jakiego szukają. Dodając atrybuty kolorów do produktów, na przykład “Czerwony”, “Zielony” czy “Niebieski”, klienci mogą filtrować na sklepach z odzieżą, szybko i efektywnie.

Integracje z Pluginami

FacetWP Color integruje się z różnymi dodatkami do WooCommerce, takimi jak „Variation Swatches for WooCommerce” oraz „WooCommerce Attribute Swatches”. Umożliwia to lepsze zarządzanie kolorami w produktach.

Dual Color Swatches

Dzięki wersji Pro pluginu „Variation Swatches for WooCommerce”, można dodawać tzw. „dual color swatches”, które łączą dwa kolory w jednym swatch. To szczególnie przydatne w przypadku produktów, które mają więcej niż jeden główny kolor.

Tworzenie Niestandardowych Swatchy

W zależności od potrzeb projektu, programiści mogą dodać niestandardowe kody PHP, aby zmodyfikować wygląd lub funkcjonalność swatchy kolorów. Na przykład, aby wyświetlić nazwy kolorów obok swatchy, można użyć specjalnego kodu, który powoduje, że wysokość swatcha zmienia się w zależności od wybranej wartości.

Personalizacja Wyboru Użytkownika

Dzięki opcjom personalizacji można dostosować sposób, w jaki wybór użytkownika jest prezentowany na stronie. Umożliwia to lepsze ukierunkowanie na użytkowników i zwiększa atrakcyjność interfejsu użytkownika.

Przykład Kodu

Możemy użyć filtrów dostępnych w FacetWP, aby dostosować nazwę kolorów pokazywaną w wyborze użytkownika:

php add_filter( 'facetwp_facet_display_value', function( $label, $params ) { if ( 'my_color_facet_name' == $params['facet']['name'] ) { $label = $params['row']['facet_value']; $label = ucwords(str_replace('-', ' ', $label)); } return $label; }, 10, 2); Ten kod zamienia podkreślenia teraz kolorem, a także przekształca jego zapis na estetyczny i atrakcyjny.

Dodawanie Liczby Wyników do Swatchów Kolorowych

Domyślnie, swatche kolorów nie wyświetlają liczby dostępnych rezultatów. Można jednak zmodyfikować kod, aby każdemu swatchowi przypisać liczbę wyników:

php add_filter('facetwp_facet_option', function($item, $result, $params) { $classes = ''; if ($result['overflow']) { $classes = " facetwp-overflow facetwp-hidden"; } $item = str_replace('<div', '<div class="facetwp-color-item' . $classes . '">' . '(' . $result['counter'] . ')</div>', $item); return $item; }, 11, 3);

Przetłumaczenie Tekstów

W celu dostosowania lub przetłumaczenia etykiet, takich jak „Zobacz więcej” lub „Zobacz mniej”, można użyć filtra gettext. Dzięki temu zyskujemy pełną kontrolę nad treścią pojawiającą się na stronie:

php add_filter( 'gettext', function( $translated_text, $text, $domain ) { if ( 'fwp-front' == $domain ) { if ( 'See {num} more' == $text ) { $translated_text = 'Zobacz {num} więcej'; } elseif ( 'See less' == $text ) { $translated_text = 'Zobacz mniej'; } } return $translated_text; }, 10, 3);

Zmiany w Ostatnich Wersjach

FacetWP Color jest regularnie aktualizowany, co przynosi nowe funkcjonalności oraz poprawki. Ostatnie wersje wprowadziły m.in. ustawienia dla “Parent term”, co pozwala na bardziej zaawansowane filtrowanie i zarządzanie danymi w hierarchicznych taksonomiach.

Uwaga Końcowa

FacetWP Color to potężne narzędzie do filtrowania treści według kolorów, które można dostosować do specyficznych potrzeb każdej witryny. Dzięki zastosowaniu wartości kolorów w różnych źródłach danych, a także integracjom z WooCommerce, użytkownicy są w stanie łatwo odnaleźć to, czego szukają. Personalizacja oraz możliwość dodawania kodu PHP umożliwiają deweloperom pełne dostosowanie swatchy kolorów i ich zachowania, co podnosi jakość obsługi klienta.