Filtr produktów WooCommerce na własnej stronie lub stronie głównej

Umieszczasz filtr produktów WooCommerce na własnej stronie, stronie docelowej lub stronie głównej i zdarza się jedno z trzech: formularz się wyświetla, ale nie pojawiają się żadne produkty, każde kliknięcie przenosi do sklepu albo strona się przeładowuje i nic się nie zmienia. To nie jest błąd. Shortcode [woof] wyświetla wyłącznie formularz wyszukiwania, a wtyczka decyduje, gdzie pokazać wyniki, sprawdzając, co jeszcze znajduje się na stronie. Poniżej opisujemy, jak działa ta decyzja, oraz dokładne konfiguracje shortcode'ów dla typowych przypadków: filtr i produkty na jednej stronie, strona ograniczona do jednej kategorii lub jednego atrybutu oraz formularz na stronie głównej, który kieruje odwiedzających do wyników.

Dokąd filtr produktów WooCommerce na własnej stronie kieruje odwiedzających

Gdy odwiedzający naciśnie Filtr (Filter) (albo zmieni opcję przy włączonym autosubmit), skrypt wtyczki buduje link w rodzaju ?swoof=1&pa_color=red i sprawdza na bieżącej stronie, czy jest lista produktów, którą można odświeżyć: wynik działania [woof_products], shortcode WooCommerce [products] albo dowolna lista .products wewnątrz kontenera .woocommerce. Jeśli ją znajdzie, wyniki otwierają się na tej samej stronie. Jeśli nie, odwiedzający trafia na stronę sklepu, czyli stronę wybraną w WooCommerce → Ustawienia → Produkty → Strona sklepu (WooCommerce → Settings → Products → Shop page).

Zanim cokolwiek zbudujesz, warto znać dwa następstwa. Jeśli w WooCommerce nie ustawiono strony sklepu, nie ma dokąd odesłać odwiedzającego i filtr przeładowuje stronę, na której się znajduje, także stronę pojedynczego produktu. A jeśli Twoja strona główna zawiera jakikolwiek blok produktów (polecane produkty, karuzelę promocji zbudowaną ze znacznika WooCommerce), filtr traktuje ten blok jako siatkę wyników i przeładowuje stronę główną zamiast otwierać sklep.

Filtr i produkty na tej samej stronie

Dla strony, która działa jak mały sklep, umieść dwa shortcode'y. Mogą znajdować się w różnych blokach lub kolumnach, na przykład formularz w wąskiej kolumnie, a produkty w szerokiej:

[woof]
[woof_products per_page=12 columns=3 is_ajax=1]

• per_page: ustaw go. Bez niego [woof_products] używa ustawienia Produktów na stronę (Products per page) z zakładki Zaawansowane → Opcje (Advanced → Options) wtyczki, a jeśli jest ono równe -1 (wartość domyślna), ustawienia WordPressa Strony bloga pokazują maksymalnie (Blog pages show at most), które na większości witryn wynosi 10.
• columns: liczba produktów w wierszu. To, czy motyw to uwzględni, zależy od jego CSS.
• is_ajax=1: wyniki są podmieniane bez przeładowania strony, a pasek adresu jest aktualizowany, więc przefiltrowaną stronę można udostępnić. Przy is_ajax=0 strona się przeładowuje. Na własnej stronie to właśnie ten atrybut włącza AJAX; opcja Próbuj zajaxować sklep (Try to ajaxify the shop) wpływa tylko na stronę sklepu i archiwa kategorii.

[woof_products] wyświetla produkty za pomocą karty produktu z Twojego motywu (szablon content-product.php) i uruchamia standardowe haki pętli WooCommerce, więc liczba wyników, sortowanie i paginacja pojawiają się tak samo jak na stronie sklepu.

Shortcode WooCommerce [products] również można filtrować: gdy filtr jest aktywny, HUSKY dodaje swoje warunki do zapytania tego shortcode'a. [products limit="12" columns="4" paginate="true"] obok [woof] działa z przeładowaniem strony; dla AJAX użyj bliźniaka zarejestrowanego przez HUSKY, [products_woof], z tymi samymi atrybutami.

Ogranicz stronę do jednej kategorii, tagu lub atrybutu

Strona jednej marki, jednej lokalizacji albo „tylko smartfony poleasingowe” wymaga stałego warunku, którego odwiedzający nie może wyczyścić. Służy do tego atrybut taxonomies i powinien znaleźć się w obu shortcode'ach:

[woof taxonomies="product_cat:87+product_tag:105" tax_exclude="product_cat,product_tag"]
[woof_products taxonomies="product_cat:87+product_tag:105" per_page=12 columns=3 is_ajax=1]

Składnia to taxonomy:ID. Kilka identyfikatorów jednej taksonomii rozdziela się przecinkami; różne taksonomie łączy się znakiem + i wszystkie muszą pasować. Przy domyślnej logice OR product_cat:87,92+pa_brand:14 oznacza „w kategorii 87 lub 92 oraz marka 14”, a produkty z podkategorii 87 i 92 są uwzględnione. Jeśli w ustawieniach wtyczki przełączysz taksonomię na logikę AND, ta logika obowiązuje także dla jej identyfikatorów tutaj.

Identyfikatory terminów, a nie slugi ani nazwy

Wtyczka zamienia każdą wartość na termin o podanym identyfikatorze. Slug, taki jak cadeau, albo nazwa, taka jak Yes, nie jest identyfikatorem, niczego nie dopasuje, a ta część warunku zostanie pominięta bez żadnego błędu, więc strona pokaże wszystkie produkty. Aby znaleźć identyfikator, otwórz Produkty → Kategorie (Products → Categories) (albo Tagi (Tags), albo Produkty → Atrybuty → Konfiguruj terminy (Products → Attributes → Configure terms)), najedź kursorem na link Edytuj (Edit) przy terminie i odczytaj liczbę po tag_ID= w adresie linku.

Nazwa taksonomii musi być dokładna: product_cat, product_tag, pa_ plus slug atrybutu dla atrybutów globalnych (pa_color, a nie color) albo slug własnej taksonomii, na przykład taksonomii marek. Atrybuty niestandardowe wpisane bezpośrednio w jednym produkcie nie są taksonomiami i nie można ich tu użyć.

Co robi z tą wartością każdy shortcode

• W [woof_products] ogranicza produkty. To ta część wykonuje właściwą pracę.
• W [woof] ogranicza to, co zlicza formularz: przy włączonych Pokaż ilość (Show count) i Dynamiczne przeliczanie (Dynamic recount) liczby przy opcjach i zakres cen opisują ten sam ograniczony zbiór, a przy Ukryj puste określenia (Hide empty terms) opcje bez produktów na tej stronie znikają. W trybie AJAX formularz jest przerysowywany po każdym filtrowaniu z wartością z [woof_products], więc utrzymuj obie identyczne, bo inaczej liczby zmienią się po pierwszym kliknięciu.

Warunek nie znajduje się w adresie URL; jest częścią strony. Reset albo odznaczenie wszystkiego wraca do strony, a warunek nadal na niej działa. Bloki, które wstępnie przefiltrowałeś, ukryj za pomocą tax_exclude (nazwy taksonomii oddzielone przecinkami) albo zbuduj krótki formularz za pomocą tax_only i by_only, na przykład [woof tax_only="pa_brand,pa_size" by_only="by_price"]; by_only="none" ukrywa cenę, wyszukiwanie tekstowe i inne filtry niebędące taksonomiami. Więcej kombinacji znajdziesz w artykule jak pokazywać różne filtry na różnych stronach, a pełną listę atrybutów na stronie shortcode'a [woof]. Aby wstępnie filtrować po polu meta zamiast po taksonomii, zobacz manipulowanie danymi wyszukiwania.

Filtr na stronie głównej z przekierowaniem do sklepu

Niezawodna konfiguracja strony głównej to formularz wyszukiwania, który kieruje odwiedzających na stronę wyników:

[woof redirect="https://example.com/shop/" autosubmit=1 ajax_redraw=1 tax_only="product_cat,pa_size" by_only="none"]

• redirect: strona wyników. Może to być sklep, archiwum kategorii, takie jak https://example.com/product-category/tires/ (wyniki pozostają wtedy w tej kategorii, bo kategoria jest w adresie), albo własna strona z [woof] i [woof_products]. Użyj czystego adresu URL bez ?; wtyczka dopisze do niego ?swoof=1&....
• Samo autosubmit=1 odsyła odwiedzającego już po pierwszej zmianie, co pasuje do pojedynczej listy rozwijanej. Dla formularza z kilkoma polami dodaj ajax_redraw=1: każdy wybór tylko odświeża formularz (liczby, zależne opcje), a przycisk Filtr (Filter) otwiera stronę wyników. Przy autosubmit=0 nic się nie dzieje, dopóki odwiedzający nie naciśnie Filtr (Filter).

Zasady, które powodują większość zgłoszeń „przekierowanie nie działa”:

• Przekierowanie jest ignorowane w trybie AJAX. Jeśli ta sama strona zawiera też [woof_products is_ajax=1] lub [products_woof], formularz filtruje tę siatkę.
• Jedna strona, jeden filtr. Gdy na stronie jest kilka formularzy, skrypt bierze redirect, autosubmit i ajax_redraw z pierwszego znalezionego formularza. Drugi formularz na pasku bocznym albo automatyczny filtr nad produktami może po cichu nadpisać skonfigurowany przez Ciebie formularz. Widżet HUSKY ma w tym samym celu własne pole Przekieruj na (Redirect to).
• Warunek taxonomies w formularzu na stronie głównej nie jest przenoszony wraz z przekierowaniem; do adresu URL trafia tylko to, co wybrał odwiedzający. Jeśli formularz dotyczy jednej kategorii, przekieruj do archiwum tej kategorii.

Dlaczego nie filtrować na samej statycznej stronie głównej

Filtrowanie w miejscu działa na zwykłych stronach. Statyczna strona główna jest wyjątkiem: parametry takie jak product_cat czy product_tag są jednocześnie zmiennymi zapytania WordPressa i gdy pojawiają się w głównym adresie witryny, WordPress przestaje traktować żądanie jako Twoją stronę główną. W zależności od motywu odwiedzający zobaczą wtedy archiwum kategorii, pustą stronę albo tytuł Nie znaleziono strony (Page not found) dodany przez wtyczkę SEO. Umieść filtr i [woof_products] na zwykłej stronie (na przykład /products/), a formularz na stronie głównej niech przekierowuje właśnie tam.

Pokazuj produkty dopiero po przefiltrowaniu

Dla strony docelowej, która ma otwierać się samym formularzem, dodaj display_on_search=1 do [woof_products]. Dopóki filtr nie zostanie zastosowany, obszar produktów pozostaje pusty; po pierwszym wyszukiwaniu strona pokazuje wyniki. Dokumentacja opisuje ten atrybut dla trybu z przeładowaniem, więc używaj go z is_ajax=0. Szczegóły na stronie shortcode'a [woof_products].

Strony pojedynczych produktów, menu i siatki z kreatorów stron

• Strony pojedynczych produktów. Filtr na pasku bocznym strony produktu zawsze otwiera sklep (albo adres URL z redirect); produkty powiązane i up-selle nie są traktowane jako wyniki.
• Menu i mega menu. Linkuj pozycje kategorii do prawdziwych archiwów kategorii (/product-category/.../), a nie do stron zawierających shortcode. Archiwa można filtrować bez żadnej konfiguracji i podczas filtrowania zachowują kategorię.
• Siatki produktów z kreatorów. Siatka z Elementora, Divi lub innego kreatora, która uruchamia własne zapytanie o produkty, nie reaguje na filtr, nawet jeśli formularz pozostaje na stronie. Zastąp ją shortcode'em [woof_products] albo spraw, by jej zapytanie dało się filtrować, jak opisano w artykule adres URL filtra się zmienia, ale produkty nie.
• [woof_products] w szablonach kategorii. Shortcode nie wie, w archiwum której kategorii został umieszczony; jest przeznaczony dla stron. W szablonie kategorii pokazuje wszystkie produkty, chyba że przekażesz taxonomies, więc zostaw tam standardową pętlę produktów archiwum.

Jeśli nadal nie działa

• Cudzysłowy są proste. Shortcode'y skopiowane z edytora tekstu albo z niektórych stron internetowych trafiają do edytora z cudzysłowami drukarskimi (’pa_age’), których WordPress nie akceptuje jako cudzysłowów atrybutów. Wpisz je ponownie w bloku Shortcode.
• Każda wartość w taxonomies jest liczbowym identyfikatorem terminu, nazwa taksonomii jest dokładna, wokół + i : nie ma spacji, a oba shortcode'y mają tę samą wartość.
• [woof_products] ma per_page, więc strona nie kończy się na 10 produktach.
• W ustawieniach WooCommerce wybrana jest strona sklepu.
• Na stronie jest tylko jeden formularz filtra albo pierwszy z nich zawiera redirect, którego potrzebujesz.
• Siatką produktów na stronie jest [woof_products], [products] lub [products_woof], a nie widżet kreatora z własnym zapytaniem.

Jeśli to wszystko się zgadza, a strona nadal działa nieprawidłowo, opublikuj na forum wsparcia HUSKY link do strony i oba shortcode'y dokładnie tak, jak wyglądają w edytorze.