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

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

HIT

18.06.2017

3102

Создадим переключающиеся изображения товара при наведении мыши, либо галерею изображений товара в шаблоне категории.
Под галереей изображений (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$). Настраивается направление перелистывания, скорость автопромотки.

Тэги: ,

Поделится информацией с друзьями

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

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

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

/
Несколько миниатюр записи

Несколько миниатюр записи

В некоторых случаях необходимо, чтобы у записи было несколько миниатюр. Например, если запись это товар с несколькими изображениями. Добавим эту возможность при редактировании записи. Плагин Multiple Featured Images После установки Читать далее »

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

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

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

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

Пока нет комментариев. Будь первым!

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