Галерея товара woocommerce

woocommerce — очень популярный плагин для wp но для товара нет нормальной галереи. Исправим это ! Если есть похожие готовые решения кидайте в коменты 

34 wordpress Aвтор:
Рейтинг: 0/5 - 0 голосов

Галерея товара woocommerce

 

woocommerce — очень популярный плагин для wp но для товара нет нормальной галереи. Исправим это ! Если есть похожие готовые решения кидайте в коменты .

Lля упрощения задачи будем использовать -Advanced Custom Fields pro,он нам для добавления видео в нашу галерею.

И библиотеку JQuery lightSlider.

Создаем поле с типом «Повторитель» Для того чтобы можно было добавлять поля в карточке товара . Куда будем вставлять ссылку на видео с Youtube

Отображаем его типе записей-Товар

.

Далее работам с шаблоном вывода ( для наглядности будем работать прямо в файле шаблона) По правильному нужно весь код вынести в function.php.

<?php
$metas = explode(',',get_post_meta( $post->ID,'_product_image_gallery')[0]);// картинки из стандартной галереи товара 
$video_product = get_field('video_product',$post->ID);// ccылки на ютую видео acf

$galegy = array();// создаем массив и добавляем в него главную картинку товара 
$galegy[] =	array(
		'thumb' =>wp_get_attachment_image_src(get_post_meta( $post->ID,'_thumbnail_id')[0],'slide_product_thumb')[0],
		'full' => wp_get_attachment_image_src(get_post_meta( $post->ID,'_thumbnail_id')[0],'slide_product_full')[0],
		'type'=> 'photo',
		'url'=> ''
		
	);
if ($metas!= ['']){// добавляем картинки из галереи 
foreach ($metas as $key ) {

	$galegy[] =	array(
		'thumb' => wp_get_attachment_image_src($key,'slide_product_thumb')[0],
		'full' => wp_get_attachment_image_src($key,'slide_product_full')[0],
		'type'=> 'photo'
		
	);

}
}
if ($video_product != ['']) {// банально проверяем не пустой ли массив добавиляем в основной масив ссылки на видео


foreach ($video_product as $keys ) {
	preg_match('%(?:youtube(?:-nocookie)?\.com/(?:[^/]+/.+/|(?:v|e(?:mbed)?)/|.*[?&]v=)|youtu\.be/)([^"&?/ ]{11})%i', $keys['url_video'], $match);
	$galegy[] =	array(
		'thumb' =>  '//img.youtube.com/vi/'.$match[1].'/mqdefault.jpg',
		'full' => '//img.youtube.com/vi/'.$match[1].'/maxresdefault.jpg',
		'type'=> 'video',
		'url'=> $keys['url_video'],
		'id' => $match[1]
		
	);
}

}
//$galegy - массив с картинками и видео 

Далее работаем с выводом 

	echo '<div class="demo" style="max-width: 700px;">';
				echo  '<ul id="lightSlider">';
					foreach ($galegy as $key ) {						
						if ( $key['type'] == 'photo') {
								echo  '<li data-thumb="'.$key['thumb'].'" data-src="'.$key['full'].'" >';
								echo  '<img src="'.$key['full'].'" />';
								echo  ' </li>';									
							
						}
						if ( $key['type'] == 'video') {	
							echo '<a href="'.$key['url'].'" data-thumb="'.$key['thumb'].'" class="video-f">';
							echo '<div style="background-image:url('.$key['full'].');background-size: cover;">';
							echo '<img class="play_y" src="/new_img/play_y.png">';
							  echo  '/new_img/opacity.png" />';
							 echo '</div>';
							echo '</a>';
						}
					}   					
				echo  ' </ul>';     
		echo  '</div>';

 

Инициализируем скрипт. С параметрами функции можно ознакомится на сайте 


$('#lightSlider').lightSlider({
    gallery: true,
    item: 1,
    loop: true,
    slideMargin: 0,
    thumbItem: 9
});



	

 

в итоге должно получится вот такое 

 

 

3 случайных Поста

Card image cap
Форма обратной связи в телеграм
Card image cap
Cборка. 301 редирект через .htaccess .
Card image cap
Товары что нет в наличие в конце списка в теме journal2 opencart 2.1

коммент.

Контакти

Contact

info@pechenki.top

Начать чат со мной

© SiteBlog designer