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

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

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

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

image-magnifier.js (увеличение изображений)
slick.js (карусель)

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

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

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 слайда (установленному дополнительно).

[site-socialshare]