Divi jest bardzo rozbudowanym i potężnym narzędziem dla tych bardziej zaawansowanych twórców stron, kórzy korzystają z gotowych rozwiązań. Divi to nie tylko motyw, ale przede wszystkim wszechstronny page builder, który pozwala na bardzo szybkie stworzenie strony internetowej oraz dostosowanie jej do potrzeb klienta. Jak każdy inny Page Builder – nie jest to idealne rozwiązanie. Page buildery posiadają wiele ograniczeń. W przypadku Divi skupie się na jednym z nich – na narzuconym z góry rozwiązaniom jeśli chodzi o rozmieszczanie komponentów na stronie. Na ten przykład: możemy stworzyć kontener dla naszego komponentu, ale builder nie umożliwia nam stu procentowej kontroli nad każdym zagnieżdżonym w nim elemencie. Co więcej, w Divi nie możemy nadawać klas na niektóre, główne elementy kontenera, przez co ostylowanie danego komponentu staje się czasochłonne.
Podobnie było w moim przypadku, kiedy chciałem dodać licznik produktów przy ikonce koszyka. Logicznie rzecz biorąc taka opcja moim zdaniem powinna być „w pakiecie”, ale tak nie było. Divi pozwala nam stworzyć własny nagłówek, który będzie wyświetlany na każdej stronie, ale nie zawsze wyświetli on nam informacje, na których nam zależy. W tym przypadku chodzi mi o tytułowy licznik produktów obok ikonki koszyka. Oczywiście wszystkie rozwiązania są dostępne jako płatne wtyczki u twórców motywu Divi. Nie przedłużając – do rzeczy! W moje ręce wpadło zlecenie, które polegało na stworzeniu sklepu internetowego, który miał powstać przy pomocy Divi. Tworząc pierwsze globalne elementy motywu wszystko szło gładko. Jednak klient zgłosił pewną uwagę: brak informacji o ilości produktów w koszyku. W Internecie znalazłem kilka rozwiązań, dzięki którym licznik produktów się pojawia jednak nie spełniały one moich oczekiwań. W tym artykule opiszę w jaki sposób poradziłem sobie z tym problemem.
Stworzenie i konfiguracja nagłówka globalnego
Stworzyłem globalny nagłówek, który zawierał menu główne, obok którego znajdowała się ikonka koszyka (poniżej zrzut ekranu kawałka nagłówka obrazujący problem). Wszystko ustawione i skonfigurowane. Klient zgłosił mi, że po dodaniu produktu do koszyka, nie wyświetla się żadna informacja, która sugerowała by ilość produktów umieszczonych w koszyku. W tym miejscu zaczęła się cała przygoda z szukaniem odpowiedniego rozwiązania.
Znalezione rozwiązania
W internecie znalazłem kilka sensownych rozwiązań mojego problemu. Niektóre z nich były naprawdę blisko efektu jaki chciałem osiągnąć, ale nie spełniały one do końca moich oczekiwań. Najciekawsze rozwiązania po krótce opisuję poniżej.
Pierwsze rozwiązanie
Polegało na dodaniu odpowiedniego filtra, który włączał domyślnie wyłączoną opcję, dzięki czemu informacje o ilości produktów w koszyku była widoczna. Problem rozwiązany – tak by się mogło wydawać. Niestety, wszystko działało tylko wtedy, gdy korzystałem z domyślnego wyglądu nagłówka. Niestety, rozwiązanie szybkie i przyjemne, jednak nie dla niestandardowych typów nagłówka.
Drugie rozwiązanie
Drugie rozwiązanie polegało na tym, aby stworzyć shortcode, który wyświetla menu i umieszcza na jego końcu informację o ilości produktów dodanych do koszyka. Pomysł okazał się być dobry, lecz nie spełniał do końca moich oczekiwań, a co za tym idzie nie spełniał wymagań klienta. Kod faktycznie dodawał na koniec menu licznik produktów, ale też nie był widoczny w wersji mobilnej. Aby go zobaczyć należało rozwinąć menu klikając w ikonkę hamburgera. Było tak, ponieważ za pomocą odpowiedniego filtra była dodawana kolejna pozycja menu głównego, które w wersji mobilnej nie było od razu widoczne. Rozwiązanie najbliższe oczekiwanego efektu, ale nie sprawdzało się w wersji strony na urządzenia mobilne. Szukamy dalej…
Trzecie rozwiązanie
Trzecim rozwiązaniem była instalacja wtyczki. Wtyczka, faktycznie spełniała oczekiwania, ale pojawiły się problemy z ustawieniem wyglądu całego menu w różnych rozdzielczościach. Divi nie jest motywem (Page Builderem), który pozwala na łatwe ustawianie szerokości kolumn przy różnych rozdzielczościach. Jeśli nawet, to zbyt dużo czasu musiałbym temu poświęcić, aby wszystko wyglądało tak jak należy. Traciłem niepotrzebny czas na rzeczy, które moim zdaniem powinny być łatwo dostępne w tego typu narzędziach. Oczywiście firma ElegantTheme udostępnia rozwiązanie, które w 100% zadowoliło by mnie, a tym samym mojego klienta, ale kosztowałoby to kilkanaście $. To już nie do końca nas zadowalało. Dlatego powstało moje rozwiązanie. Zdecydowanie szybsze i mało inwazyjne.
Własne rozwiązanie – jak dodać licznik produktów?
Przy tworzeniu własnego globalnego nagłówka, aby pojawiła się ikonka koszyka obok górnego menu należy zaznaczyć odpowiednią opcję w ustawieniach głównego menu. To jest pierwszy krok. Następnie, aby dodać liczbę produktów w koszyku należało znaleźć odpowiednią funkcję, która dodawała tą ikonkę na końcu menu – udało się! Po odnalezieniu funkcji wiedziałem, w jaki sposób ikonka została tam umieszczona. Okazało się, że sekcja menu głównego dodawana jest za pomocą odpowiedniego filtra. Za dodanie ikonki w motywie odpowiedzialny jest kod:
protected function render_cart() {
if ( ! $this->is_icon_enabled( 'cart' ) ) {
return '';
}
if ( ! class_exists( 'woocommerce' ) || ! WC()->cart ) {
return '';
}
$url = function_exists( 'wc_get_cart_url' ) ? wc_get_cart_url() : WC()->cart->get_cart_url();
$output = sprintf(
'<a href="%1$s" class="et_pb_menu__icon et_pb_menu__cart-button"></a>',
esc_url( $url )
);
return apply_filters( 'et_pb_menu_module_cart_output', $output, self::$menu_slug );
}Z powyższego kodu wynika, że „et_pb_menu_module_cart_output” odpowiada za zawartość sekcji gdzie wyświetlany jest koszyk.
Wystarczyło napisać funkcję, która zwróci ilość produktów w koszyku oraz użyć odpowiedniego filtra, aby wyświetlić wynik obok ikonki koszyka:
function mhs_cart_count($cartIcon) {
$cart_count = '';
$items_number = WC()->cart->get_cart_contents_count();
$url = function_exists( 'wc_get_cart_url' ) ? wc_get_cart_url() : WC()->cart->get_cart_url();
if ( ! $et_top_info_defined && ( ! $et_slide_header || is_customize_preview() ) ) {
if($items_number == 0) {
$cart_count = '';
} else {
$cart_count = '<a href="'. $url .'" class="mhs_cart_count"><span>'. $items_number .'</span></a>';
}
}
return $cartIcon.$cart_count;
}
add_filter('et_pb_menu_module_cart_output', 'mhs_cart_count', 10, 2);Do pliku ze stylami css dodałem jedynie kilka linijek kodu, aby ładnie zaprezentować liczbę produktów w koszyku obok ikonki:
.mhs_cart_count {
display: flex;
align-items: center;
margin-left: -.3em;
}Efekt poniżej:
Gdzie dodać kod?
Najlepiej jest wykorzystać do tego motyw potomny (Child Theme) i kod umieścić w pliku functions.php. Dzięki temu zachowamy nasz efekt nawet po aktualizacji motywu. Natomiast kod CSS również umieszczamy przy pomocy motywu potomnego np. w pliku style.css.
Co to jest Motyw potomny i w jaki sposób może na pomóc w tworzeniu modyfikacji praktycznie każdego motywu opisuję we wpisie Co to jest Motyw Potomny i do czego służy?
