/ Плагины / Альтернативная галерея WC

Альтернативная галерея WC

20.12.2020

149

При попытке совместить в одной галереи различные удачные решения получались различные конфликты. Родной слайдер никак не хочет синхронизироваться с миниатюрами. При подключении Zoom Magnifier (например YITH) ломается вывод миниатюр, особенно при выборе вариативных товаров и т.д. Решил создать собственную галерею с девушками и блэкджеком.

Данное пользовательское решение, вероятно, будет конфликтовать со многими плагинами связанными с функционалом галереи.

Для решения потребуется подключение 2-х скриптов:

Подключение новой галереи

Отключаем стандартную галерею и подключаем файл с новой:

remove_action( 'woocommerce_before_single_product_summary', 'woocommerce_show_product_images', 20 );

add_action( 'woocommerce_before_single_product_summary', 'the_woocommerce_new_gallery', 20 );
function the_woocommerce_new_gallery() { get_template_part( 'gallery' ); }

Кстати теперь можно не подключать стандартную карусель и zoom:

add_action( 'after_setup_theme', 'yourtheme_setup' );
function yourtheme_setup() {
	//add_theme_support( 'wc-product-gallery-zoom' );
	add_theme_support( 'wc-product-gallery-lightbox' );
	//add_theme_support( 'wc-product-gallery-slider' );
}

Файл gallery.php должен находится в корне темы.

Содержимое галереи

Здесь предусмотрен вывод основного изображения, дополнительных изображений, а также изображений вариаций, если они есть.

<?php global $product; 
$thumb_id = get_post_thumbnail_id($post->ID);

if( $product->is_type( 'variable' ) ) {
    $variations = $product->get_available_variations();
} ?>

<div class="new-gallery">

	<div class="slider slider-for">
	
		<?php $thumb_src = wp_get_attachment_image_url($thumb_id, 'shop_single');
		$thumb_sizes = wp_get_attachment_image_src($thumb_id, 'full');
		$thumb_src_full = wp_get_attachment_image_url($thumb_id, 'full'); ?>
		<div id="<?php echo $thumb_id; ?>"><!--<img src="<?php //echo $thumb_src; ?>">-->
		
			<script type="text/javascript">
			imageZoom(
			  { blur: false, inner: false, tint: '#333', border: 0 },
			  <?php echo '{ src: "'.$thumb_src_full.'", height: '.$thumb_sizes[1].', width: '.$thumb_sizes[2].' },'; ?>
			  <?php echo '{ src: "'.$thumb_src.'", height: 600, width: 600 },'; ?>
			);
			</script>
			<a class="lightbox" href="<?php echo $thumb_src_full; ?>"><i class="fas fa-search-plus"></i></a>
		</div>

		<?php $attachment_ids = $product->get_gallery_image_ids();
		if ( $attachment_ids && $product->get_image_id() ) {
			foreach ( $attachment_ids as $attachment_id ) { ?>
				<div id="<?php echo $attachment_id; ?>">
					<?php $thumb_src = wp_get_attachment_image_url($attachment_id, 'shop_single'); 
					$thumb_sizes = wp_get_attachment_image_src($attachment_id, 'full');
					$thumb_src_full = wp_get_attachment_image_url($attachment_id, 'full'); ?>
					<!--<img src="<?php //echo $thumb_src; ?>">-->
					<script type="text/javascript">
					imageZoom(
					  { blur: false, inner: false, tint: '#333', border: 0 },
					  <?php echo '{ src: "'.$thumb_src_full.'", height: '.$thumb_sizes[1].', width: '.$thumb_sizes[2].' },'; ?>
					  <?php echo '{ src: "'.$thumb_src.'", height: 600, width: 600 },'; ?>
					);
					</script>
					<a class="lightbox" href="<?php echo $thumb_src_full; ?>"><i class="fas fa-search-plus"></i></a>
				</div>
			<?php }
		} ?>
		
		<?php if( $product->is_type( 'variable' ) ) {
		foreach ( $variations as $key => $variation ) { 
		if($key === 0) continue; //кроме первой вариации ?>
			<div id="<?php echo $variation['image_id']; ?>">
				<?php $thumb_src = wp_get_attachment_image_url($variation['image_id'], 'shop_single'); 
				$thumb_sizes = wp_get_attachment_image_src($variation['image_id'], 'full');
				$thumb_src_full = wp_get_attachment_image_url($variation['image_id'], 'full'); ?>
				<!--<img src="<?php //echo $thumb_src; ?>">-->
				<script type="text/javascript">
				imageZoom(
				  { blur: false, inner: false, tint: '#333', border: 0 },
				  <?php echo '{ src: "'.$thumb_src_full.'", height: '.$thumb_sizes[1].', width: '.$thumb_sizes[2].' },'; ?>
				  <?php echo '{ src: "'.$thumb_src.'", height: 600, width: 600 },'; ?>
				);
				</script>
				<a class="lightbox" href="<?php echo $thumb_src_full; ?>"><i class="fas fa-search-plus"></i></a>
			</div>
		<?php } } ?>
		
	</div>

	<div class="slider slider-nav">
	
		<?php $thumb_src = wp_get_attachment_image_url($thumb_id, 'thumbnail'); ?>
		<div><img src="<?php echo $thumb_src; ?>"></div>

		<?php $attachment_ids = $product->get_gallery_image_ids();
		if ( $attachment_ids && $product->get_image_id() ) {
			foreach ( $attachment_ids as $attachment_id ) { ?>
				<div><?php $thumb_src = wp_get_attachment_image_url($attachment_id, 'thumbnail'); ?>
				<img src="<?php echo $thumb_src; ?>"></div>
			<?php }
		} ?>
		
		<?php if( $product->is_type( 'variable' ) ) {
		foreach ( $variations as $key => $variation ) { 
		if($key === 0) continue; //кроме первой вариации ?>
			<?php $thumb_src = wp_get_attachment_image_url($variation['image_id'], 'thumbnail'); ?>
			<div><img src="<?php echo $thumb_src; ?>"></div>
		<?php } } ?>
	
	</div>

</div>

Инициализация галереи:

$(document).ready(function() {   

	$('.image-zoom .thumbnail').hover(function () {
		$('.slider-for .slick-list.draggable').addClass('image-zoom-visible'); 
	}, function () {
		$('.slider-for .slick-list.draggable').removeClass('image-zoom-visible'); 
	});

	$('.slider-for').slick({
		slidesToShow: 1,
		slidesToScroll: 1,
		arrows: true,
		fade: true,
		autoplay: false,
		autoplaySpeed: 6000,
		//asNavFor: '.slider-nav',
	});

	$('.slider-nav').slick({
		slidesToShow: 6,
		slidesToScroll: 1,
		asNavFor: '.slider-for',
		arrows: true,
		//centerMode: true,
		focusOnSelect: true,	
		infinite: false
	});

});

Некоторые дополнительные стили галереи:

.new-gallery {max-width: 600px; z-index: 9; position: relative;}

.slider-for {margin-bottom: 15px;}
.slider-for .slick-list.draggable.image-zoom-visible {overflow: visible;}

.slider-nav .slick-list.draggable {margin: 0 -10px;}
.slider-nav .slick-slide {padding: 10px;}
.slider-nav .slick-track > *:only-child {display: none;}

.slick-slide {cursor: pointer;}
.slick-slide img {border: 1px solid #eee;}
.slider-nav .slick-slide.slick-current img {border: 1px solid #ccc;}


div.image-zoom {display: flex;}
div.image-zoom div { background-repeat: no-repeat; }

div.image-zoom div.box {display: none; position: relative; border: 2px solid #333; margin: 0;}
div.image-zoom div.popup {display: none; position: relative; left: 0; border: 2px solid #333; pointer-events: none;}
div.image-zoom div.thumbnail {cursor: move; }
div.image-zoom.inner div.popup { margin: 0;}

a.lightbox {position: absolute; top: 15px; right: 15px; color: #ff242c;}

Переключение изображения при выборе вариации

$(document).on('change', '.variations_form select', function() {

	setTimeout(function(){
		var curimage = $(".variations_form").attr('current-image');

		var slide = $('.slick-slider [id=' + curimage + ']');
		var slideIndex = slide.data('slick-index');
		$('.slider-for').slick('slickGoTo', slideIndex);	
	},200);

});

Работает на основе заложенной в slick функции slickGoTo, которая отправляет к определенному слайду по индексу. В данном случае я перехватываю slideIndex по ID слайда (установленному дополнительно).

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

  • Похожие записи
  • Комментарии
  • Вложения
Upgrade WC

Upgrade WC

Очередная серия улучшений (upgrade) плагина WC. Буду добавлять по мере изучения новые решения. Поиск по SKU (артикулу) Из коробки WC не ищет по артикулам (SKU). Но достаточно установить плагин Search Читать далее »

/
Способ доставки Деловыми линиями

Способ доставки Деловыми линиями

Внедряем в пользовательский способ доставки расчет стоимости Деловых линий. Работа с API Деловые линии Данный функционал я почерпнул с сайта lospirata.ru, но немного упростил. Скрипт ajax-обмена данными: Форма расчета: Содержимое Читать далее »

Отключаем стандартные метабоксы

Отключаем стандартные метабоксы

Отключая стандартные метабоксы, мы фактически избавляемся изначально от лишнего функционала. При отключении метабоксов мы также отключаем сами поля, что позволяет существенно разгрузить таблицу wp_postmeta (особенно если у сайта несколько тысяч Читать далее »

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

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

Альтернативная галерея WC Альтернативная галерея WC
Кнопка всплывающего поиска (+ курсор в поиске)
Рекомендации для васКнопка всплывающего поиска (+ курсор в поиске)Opttour.ru
Спасибо! Наш менеджер свяжется с Вами в течении 5 минут.