FacetWP – Flyout menu

FacetWP Flyout Menu: Mobilność i Wygoda dla Użytkowników

FacetWP Flyout menu to innowacyjna funkcjonalność, która znacznie poprawia doświadczenia użytkowników korzystających z urządzeń mobilnych. Dzięki temu interfejsowi użytkownik może szybko i łatwo filtrować zawartość strony internetowej, co jest niezwykle ważne, mając na uwadze rosnący procent ruchu mobilnego w internecie. W tej sekcji przyjrzymy się bliżej temu, jak działa to rozwiązanie, jakie korzyści przynosi użytkownikom oraz jak je wdrożyć na własnej stronie.

Rozwój

FacetWP Flyout menu dostarcza mobilnym użytkownikom wygodny dostęp do narzędzi filtrujących, które są kluczowe na stronach z dużą ilością treści, takich jak sklepy internetowe czy serwisy z ogłoszeniami. Standardowo, w flyout menu wyświetlane są wszystkie filtry znajdujące się na stronie, z wyjątkiem tych, które nie są wymagane, takich jak paski nawigacyjne czy wybrane opcje przez użytkownika. Użytkownicy mogą w prosty sposób aktywować flyout menu, klikając przycisk “Pokaż filtry”, który jest umieszczony w widocznym miejscu.

Implementacja

Aby skonfigurować FacetWP Flyout menu, należy pobrać i zainstalować odpowiednią wtyczkę, a następnie aktywować ją. Gdy to już zrobisz, wystarczy dodać przycisk lub link z klasą CSS facetwp-flyout-open, co umożliwi otwarcie panelu filtrów za pomocą jednego kliknięcia. Oto przykłady, jak mogą wyglądać przyciski lub linki otwierające flyout:

• Przykład przycisku: html <button class="facetwp-flyout-open">Pokaż filtry</button>

• Przykład linku: html <a class="facetwp-flyout-open" href="javascript:;">Pokaż filtry</a>

Personalizacja

Dzięki możliwości tłumaczenia tekstu przycisku, FacetWP Flyout menu staje się bardziej dostępne dla użytkowników międzynarodowych. Możesz to osiągnąć, dodając odpowiedni fragment kodu PHP do pliku functions.php w motywie potomnym:

php echo ''.facetwp_i18n(__('Pokaż filtry', 'fwp-front')).'';

Taki zabieg sprawi, że tekst przycisku będzie mógł być tłumaczony w narzędziach takich jak WPML, co poprawia wpływ na doświadczenie użytkownika na globalną skalę.

Dostosowanie widoczności

Jeśli chcesz, aby twój przycisk filtrów był ukryty dla użytkowników korzystających z komputerów stacjonarnych, można to osiągnąć poprzez dodanie odpowiednich reguł CSS do pliku style.css motywu:

css @media only screen and (min-width: 780px) { .facetwp-flyout-open { display: none; } }

Powyższy kod skutecznie ukryje przycisk, gdy szerokość okna przekracza 779 pikseli, co pozwoli skupić użytkowników mobilnych na odpowiednich narzędziach.

Ruch flyout

Możesz dostosować, aby flyout menu zsuwało się z prawej strony, zamiast z lewej. W tym celu dodaj odpowiednie reguły CSS do pliku style.css swojego motywu:

css .facetwp-flyout { right: 0; left: auto; }

Wprowadzenie takiej zmiany może polepszyć estetykę oraz użyteczność menu na stronach mobilnych.

Obsługa duplikatów

Jednym z problemów, które mogą się pojawić, jest występowanie duplikatów filtrów w Mobile Flyout. W przypadku korzystania z Elementora Pro, upewnij się, że nie używasz opcji “Sticky” w widgetach, które zawierają filtry. Taka zgoda na wspomaganie elementów powinna poprawić wydajność i użyteczność flyout menu.

Automatyczne otwieranie menu

Aby flyout menu automatycznie otworzyło się przy pierwszym załadowaniu strony, gdy adres URL zawiera wybory filtrów, użyj poniższego kodu PHP:

php add_action('facetwp_scripts', function() { // Twój kod do otwierania flyout. }, 100);

To bardzo wygodne, gdy facetów jest ukryty na stronie, ale dostępny w URL, na przykład z linku prowadzącego z innej strony.

Zamknięcie flyout przy wyborze filtrów

Możesz racjonalizować proces korzystania z flyout menu, zamykając je automatycznie po kliknięciu w jeden lub więcej filtrów. Można to zrobić poprzez dodanie odpowiednich skryptów do pliku:

php add_action('facetwp_scripts', function() { // Twój kod do zamykania flyout. });

Dzięki użyciu zdarzenia facetwp-refresh, flyout menu zamknie się natychmiast po wykonaniu jakiegokolwiek wyboru, co może znacznie poprawić płynność użycia.

Różne metody zamykania flyout

Analizując różne metody, można również zastosować rozwiązanie, które zamyka flyout tylko po kliknięciu przycisku “Zastosuj”. Pozwala to na szerszą kontrolę nad interakcją użytkowników. W takim przypadku zamkniesz flyout po naciśnięciu przycisku aplikacji, jak pokazano poniżej:

• Utwórz przycisk w flyout: html <button class="facetwp-flyout-close">Zastosuj filtry</button>
• Dodaj skrypt do zamykania flyout przy kliknięciu przycisku.

Dzięki tym rozwiązaniom użytkownicy będą mieli większą kontrolę nad tym, jakie filtry aktywują.

Aktualizacje i poprawki

FacetWP Flyout menu jest regularnie aktualizowane, co przynosi poprawki błędów i nowe funkcjonalności. Oto kilka najnowszych aktualizacji:

• 0.8.3 (czerwiec 2024) – Ulepszona obsługa wielu instancji tego samego filtru oraz naprawione wyświetlanie nagłówków dla ukrytych filtrów Reset.
• 0.8.2 (maj 2024) – Usunięto problemy z renderowaniem filtrów i ulepszono stylizację RTL.
• 0.8 (sierpień 2022) – Ulepszona automatyczna ekskluzja filtrów paginacji oraz optymalizacja stylizacji.

Te częste aktualizacje i poprawki są świadectwem zaangażowania w tworzenie efektywnego narzędzia, które wspiera użytkowników w ich interakcji ze stronami internetowymi.

FacetWP Flyout menu to niezawodne narzędzie, które pozwala na efektywne filtrowanie treści na urządzeniach mobilnych. Dzięki intuicyjnej obsłudze, twórcy stron mogą skoncentrować się na zwiększeniu komfortu użytkowania, co przekłada się na większą satysfakcję klientów i lepsze wyniki biznesowe. Warto zainwestować w tę funkcjonalność, aby nie tylko dostosować się do potrzeb współczesnych użytkowników, ale także wyróżnić się na tle konkurencji.