/ Плагины / Галерея изображений товара в категории

Галерея изображений товара в категории

HIT

18.06.2017

11522

1

Создадим переключающиеся изображения товара при наведении мыши, либо галерею изображений товара в шаблоне категории.
Под галереей изображений (Featured Images) понимаются дополнительные изображения помимо основного изображения.

Выводим дополнительные изображения

function woocommerce_feature_gallery() {

global $product;
$attachment_ids = $product->get_gallery_attachment_ids();
  
foreach( $attachment_ids as $attachment_id ) {
  echo wp_get_attachment_image( $attachment_id, 'shop_catalog' );
}

}

add_action( 'woocommerce_shop_loop_item_title', 'woocommerce_feature_gallery', 8 );
С версии WC 3.0 нужно заменить get_gallery_attachment_ids на get_gallery_image_ids

Варианты вывода изображений

  //Получить URL изображений галереи - размер изображений WordPress по умолчанию
  echo $Original_image_url = wp_get_attachment_url( $attachment_id );
  echo $full_url = wp_get_attachment_image_src( $attachment_id, 'full' )[0];
  echo $medium_url = wp_get_attachment_image_src( $attachment_id, 'medium' )[0];
  echo $thumbnail_url = wp_get_attachment_image_src( $attachment_id, 'thumbnail' )[0];
  
  //Получить URL изображений галереи - размеры изображений WooCommerce
  echo $shop_thumbnail_image_url = wp_get_attachment_image_src( $attachment_id, 'shop_thumbnail' )[0];
  echo $shop_catalog_image_url = wp_get_attachment_image_src( $attachment_id, 'shop_catalog' )[0];
  echo $shop_single_image_url = wp_get_attachment_image_src( $attachment_id, 'shop_single' )[0];
  
  //Вывести сразу изображение
  echo wp_get_attachment_image($attachment_id, 'full');
  echo wp_get_attachment_image($attachment_id, 'medium');
  echo wp_get_attachment_image($attachment_id, 'thumbnail');
  echo wp_get_attachment_image($attachment_id, 'shop_thumbnail');
  echo wp_get_attachment_image($attachment_id, 'shop_catalog');
  echo wp_get_attachment_image($attachment_id, 'shop_single');

Переключение двух изображений

Вывести только первое изображение галереи

function woocommerce_feature_gallery() {

global $product;
$attachment_ids = $product->get_gallery_attachment_ids();
  
echo wp_get_attachment_image( $attachment_ids[0], 'shop_catalog' );

}

add_action( 'woocommerce_shop_loop_item_title', 'woocommerce_feature_gallery', 8 );

Либо ссылкой, с возможностью добавления произвольного класса — dop-image. Также сделана проверка на наличие дополнительного изображения.

function woocommerce_feature_gallery() {

global $product;
$attachment_ids = $product->get_gallery_attachment_ids();

if (!empty($attachment_ids)) {  
echo '<img class="dop-image" src="'.wp_get_attachment_image_src( $attachment_ids[0], 'shop_catalog' )[0].'">';
}

}

add_action( 'woocommerce_shop_loop_item_title', 'woocommerce_feature_gallery', 8 );

Эффект переключения при наведении будет достигаться чистым CSS

.dop-image {
    display: none;
    position: absolute;
    padding: 10px;
    box-sizing: border-box;
    width: 100%;
    left: 0;
    top: 0;  
}

.product:hover .dop-image {display: block;}

Более плавного эффекта можно добиться используя свойство opacity, но в этом случае не должна быть задействована техника плавного появления изображений.

Решено! Можно применять и при использовании плавного появления элементов:

.dop-image {
    opacity: 0 !important;
    position: absolute;
    padding: 10px;
    box-sizing: border-box;
    width: 100%;
    left: 0;
    top: 0;  
}

.product:hover .dop-image {opacity: 1 !important;}

Создаем галерею из изображений

Непосредственно галерея всех изображений вряд ли пригодится в большинстве случаев. Но мы можем это реализовать.

Создаем новую функцию создания галереи, которая будет совмещать в себе основное изображение и дополнительные (Featured Images).

//Галерея изображений в архиве
function woocommerce_feature_gallery() {

global $product;
$attachment_ids = $product->get_gallery_attachment_ids();
  
  echo '<div class="feature-slider">';
  
  echo '<div>';
  echo get_the_post_thumbnail( $post->ID, 'shop_single', $attributes );
  echo '</div>';
  
foreach( $attachment_ids as $attachment_id ) {
  echo '<div>';
  echo wp_get_attachment_image( $attachment_id, 'shop_catalog' );
  echo '</div>';  
}
  echo '</div>';

}

remove_action( 'woocommerce_before_shop_loop_item_title', 'woocommerce_template_loop_product_thumbnail', 10 ); //Убираем вывод одиночного изображения
add_action( 'woocommerce_shop_loop_item_title', 'woocommerce_feature_gallery', 8 );

Теперь вдохнем жизнь нашей галереи. Я буду это делать с помощью скрипта slick. Инициализируем слайдер:

$(document).ready(function() {
$('.feature-slider').slick();
});

Некоторые стили, возможно пригодяться

/* Для галереи изображений товара */

.feature-slider .slick-list {margin: 0 !important;}

.feature-slider .slick-arrow {
	opacity: 0;
	transition: all 0.3s ease;
	-o-transition: all 0.3s;
	-webkit-transition: all 0.3s ease 0s;
}

.feature-slider:hover .slick-arrow {opacity: 1;}

.feature-slider:hover .slick-prev {left: 0; z-index: 9;}
.feature-slider:hover .slick-next {right: 0;}

.feature-slider .slick-prev:before, .feature-slider .slick-next:before {color: #fff;}

Далее можно прикручивать любые настройки из арсенала slick: стрелки управления, автопрокрутка и т.д.

Есть небольшая проблема: кнопки перемотки влево/вправо переводят в карточку товара, т.к. область изображений обернута ссылкой на товар. Как этого избежать?

Это можно легко исправить мини скриптом, запрещающим переход по ссылке:

$(".slick-arrow").click(function(){ return false; });

Галерея изображений товара в архивах с помощью плагинов

WooCommerce Product Image Flipper (4000) — делает переключение изображения при наведении.

WooCommerce Product Archive Image Slider — выводит у товара всю галерею изображений. Плагин требует серьезной переработки (не обновлялся более 3-х лет): у товаров с одним изображением исчезает кнопка Купить. Кнопки Вперед и Назад находятся в самом низу.

Shop Product Images Slider — платное решение (5$). Настраивается направление перелистывания, скорость автопромотки.

Поделиться в соц. сетях:

  • Похожие записи
  • Комментарии
  • Вложения
Выравнивание миниатюр товаров

Выравнивание миниатюр товаров

Идеальная ситуация, когда мы загружаем изображения для товаров (хотя бы для главного изображения) квадратными. т.е. заранее подготовленными, откадрированными. Но бывают случаи, когда на сайт начинают заливаться изображения разных пропорций. Сделаем Читать далее »

/
Атрибуты миниатюры

Атрибуты миниатюры

У миниатюры (thumbnail) есть служебная функция назначения атрибутов. Манипулируя атрибутами можно добиться интересных результатов. Фильтр wp_get_attachment_image_attributes распространяется на миниатюры, а также на вложенные изображения wp_get_attachment_image($image->ID, ‘rectangle’). Как сделать отложенную загрузку Читать далее »

Адаптивные изображения (атрибут srcset)

Адаптивные изображения (атрибут srcset)

Давно интересовал вопрос адаптивности изображений с помощью атрибута srcset. Как это работает и как правильно настроить. Пришло время это выяснить. Теория srcset В атрибуте srcset выводятся все варианты миниатюры и Читать далее »

Добавить комментарий

1 комментарий

  1. Илья

    Еще 2 вопроса хочу Вам задать:
    1) Использую сейчас предложенный вариант, где добавляется одна первая картинка галереи. При наведении на картинку, у дополнительной появляется свойство opacity:1 и это замечательно. Но первая картинка по-прежнему остается видимой и, если дополнительная картинка меньшего размера, то выглядит несуразно. Пробовал добавлять свойство (product:hover .woocommerce ul.products li.product a img {opacity:0!important;}), но это не помогает. Подскажите, как решить данную проблему.
    2) Интересует вариант, когда можно добавить не только одну картинку и не все, а определенное количество, например 5. Как в таком случае будет выглядеть код?
    Огромное спасибо заранее!

Галерея изображений товара в категории
Технология Ajax
Рекомендации для васТехнология AjaxOpttour.ru
Спасибо! Наш менеджер свяжется с Вами в течении 5 минут.