Galeria na stronie z pojedynczym produktem w WooCommerce to standardowy element, który znajdziemy w większości sklepów internetowych. W tym artykule zastąpimy oryginalną galerię wygenerowaną przez wtyczkę WooCommerce na własną, która będzie wyglądać dokładnie tak jak tego chcemy zarówno do strony kodu HTML jak i wizualnej czy też funkcjonalnej.
Tworzenie własnego motywu dla sklepu WooCommerce to bardzo przyjemne zadanie. Każdy element sklepu możemy stworzyć od podstaw bądź wykorzystać rozwiązanie, które oryginalnie znajduje się w szablonach WooCommerce. Po instalacji wtyczki WooCommerce kopiujemy zawartość folderu /plugins/woocommerce/ do naszego motywu /themes/nazwa_motywu/woocommerce/. Operacja ta jest określana jako override czyli nadpisanie. Ilekroć wtyczka WooCommerce chce korzystać z szablonów znajdujących się w oryginalnym folderze /woocommerce/templates/ najpierw sprawdza ona czy tak czasem nie istnieje odrębny szablon w aktualnie wykonanym motywie.
Za wyświetlanie galerii (czyli głównego zdjęcia i miniaturek do jego przełączania na stronie pojedynczego produktu) odpowiadają pliki product-image.php i product-thumbnails.php znajdujące się w pod folderze /single-product/. Funkcje tam zawarte generują obrazek i zwykłą listę miniaturek – z technicznego punktu widzenia są to dwie listy zdjęć (w większym rozmiarze oraz w mniejszym), które zazwyczaj zamieniamy na slajdery. Dodatkowe skrypty odpowiadające za funkcjonalność slajdera, lightboxa i efektu zoom dodają interakcję, której spodziewa się użytkownik na tego typu stronie czyli:
- kiedy klikamy w małe zdjęcie przełącza się duży obrazek,
- kiedy klikniemy w duży obrazek widzimy powiększone zdjęcie na prawie całym ekranie.
Funkcję zoom uważam za mało przydatną – tym bardziej w czasach dominacji urządzeń mobilnych – no ale co kto lubi…
Tworząc własny motyw WordPress, który ma wspierać tę standardową galerię WooCommerce wystarczy dodać te instrukcje do naszego pliku functions.php.
add_action( 'after_setup_theme', 'ustawienia_motywu' );
function ustawienia_motywu() {
add_theme_support( 'wc-product-gallery-zoom' );
add_theme_support( 'wc-product-gallery-lightbox' );
add_theme_support( 'wc-product-gallery-slider' );
}
Jak widać wszystko działa. Do szablonu doszły style i skrypty, między innymi zoom.js, flexslider.min.js oraz photoswipe.min.js. W mgnieniu oka uzyskaliśmy funkcjonalność galerii w naszym szablonie single-product.php. Nic nie stoi na przeszkodzie aby dostosować taką galerię za pomocą własnych stylów bądź dodatkowych opcji, które możemy dodać w pliku functions.php w postaci filtrów (np. woocommerce_single_product_carousel_options).
Rozwiązanie takie ma też kilka wad. Choćby takie, że:
- kod JS jest zależny od jQuery (a już od ponad roku nie wykorzystujemy tej biblioteki w tworzeniu motywów WordPress i WooCommerce),
- skrypty są obszerne cieżkie i mało zoptymalizowane pod urządzenia mobilne,
- flexslider nie obsługuje wielu funkcjonalności na jakich może zależeć naszym klientom.
Galeria produktu WooCommerce bez jQuery
Tworząc nowoczesny motyw WooCommerce może nam zależeć na wysokiej wydajności a wtedy jedynym rozwiązaniem okazuje się napisanie funkcjonalności galerii i małego slajdera przełączającego zdjęcie samodzielnie.
Krok 1: Generowanie zdjęć galerii produktu w szablonie WooCommerce
Za pobranie zdjęć, którą użytkownik dodał w galerii produktu może odpowiadać metoda get_gallery_image_ids(); Zwróci ona tablice z numerami ID zdjęć produktów:
$gallery_image_ids = $product->get_gallery_image_ids();
Teraz za pomocą pętli wyświetlimy zdjęcia w osobnych elementach div:
<div class="splide" id="big-slider">
<div class="splide__track">
<div class="splide__list">
<?php foreach( $gallery_image_ids as $attachment_id ) : ?>
<div class="splide_slide">
<a href="<?php echo wp_get_attachment_image_src( $attachment_id, "full")[0]; ?>" class="glightbox">
<?php echo wp_get_attachment_image( $attachment_id, "medium_large", "", ["class" => "img-fluid"]); ?>
</a>
</div>
endforeach;
</div>
</div>
</div>
Powyższy kod zdecydowałem umieścić w pliku content-single-product.php gdzie domyślnie znajduje się akcja:
do_action( 'woocommerce_before_single_product_summary' );
Krok 2: Generowanie miniaturek galerii produktu WooCommerce
Musimy zrobić poniżej dokładnie to samo. Ale już nie musimy linkować oryginalnych rozmiarów zdjęć i używać rozmiaru medium_large wystarczy thumbnail:
<div class="splide" id="thumbnail-slider">
<div class="splide__track">
<div class="splide__list">
<?php $thumbnail_ids = $product->get_gallery_image_ids(); ?>
<?php foreach( $thumbnail_ids as $attachment_id ) : ?>
<div class="splide__slide"> <?php
echo wp_get_attachment_image( $attachment_id, "thumbnail", "", ""); ?>
</div >
<?php endforeach; ?>
</div>
</div>
</div>
Krok 3: Dodanie funkcjonalności karuzeli/slajdera
Na kroku drugim moglibyśmy zakończyć oficjalną część tutorialu, bo teraz wszystko zależy od tego, które biblioteki preferujemy i jakie funkcjonalności są nam potrzebne. W tym kroku pokażę jak wykonać karuzelę wraz z karuzelą sterującą na przykładzie prezentowanej w innym artykule biblioteki splide.js. Jak pamiętamy, biblioteka ta nie posiada zależności od jQuery, jest lekka, stale aktualizowana, funkcjonalna i w dodatku ma przejrzystą dokumentację.
W powyższych kodach umieściłem już potrzebne klasy takie jak: splide, splide_track splide_list, splide_slide. Wystarczy dodać pliki CSS i JS do szablonu strony według tego tutorialu: Splide.js – slajder bez jQuery oraz umieścić kod inicjujący galerię wraz ze zsynchronizowanym slajderem sterującym:
if (document.querySelectorAll('#thumbnail-slider').length > 0) {
var productGalleryNavigation = new Splide('#thumbnail-slider', {
classes: {
arrows: 'splide__arrows'
},
autoplay: true,
perMove: 1,
interval: 3000,
isNavigation: true,
pagination: false,
type: 'slide',
width: '100%',
perPage: 4,
focus: 'center'
}).mount();
var productGallerySlider = new Splide('#big-slider', {
classes: {
arrows: 'splide__arrows'
},
autoplay: true,
perMove: 1,
interval: 3000,
type: 'loop',
width: '100%',
perPage: 1,
});
productGallerySlider.sync(productGalleryNavigation).mount();
}
Krok 4: Dodanie funkcjonalności lightboxa
Jeżeli zależy nam na dodaniu lightboxa, tez się posłużę biblioteką, która była już przedmiotem wcześniejszego tutorialu. Mowa o Glightbox – lightbox bez jQuery. Jej dodanie spowoduje że po kliknięciu na obrazek w galerii wyświetli się nam jego powiększenie na całym ekranie. Kod inicjalizujący, który dodamy do stopki to jedna instrukcja z preferencjami:
const lightbox = GLightbox({
touchNavigation: true,
loop: false,
autoplayVideos: true
});
Podsumowanie
Pozbycie się standardowych skryptów dołączonych do WooCommerce może być konieczne kiedy musimy wykonać funkcjonalność, którą nie sposób wykonać w ramach flexslidera.js i photoswipe.js. W wielu komercyjnych i nowocześniejszych motywach do WooCommerce biblioteka ta jest zamieniana na slick.js.
Stylowanie elementów za pomocą kodu CSS też jest znacznie prostsze kiedy mamy swobodny wpływ na to jak będzie wyglądał ich kod HTML. Pozbycie się zależności od jQuery w elemencie, który zazwyczaj znajduje się w obszarze above-the-fold znacznie poprawi wydajność, przyspieszy ładowanie się sklepu, udoskonali doświadczenia użytkownika i oczywiście podstawowe wskaźniki internetowe.
Odpowiedz lub skomentuj