/ Сайтостроение / Scripts & jquery / Быстрый просмотр товара без плагина

Быстрый просмотр товара без плагина

HIT

05.12.2017

1552

Deprecated: Function create_function() is deprecated in /home/t/tiberi6w/opttour.ru/public_html/wp-content/plugins/wp-spamshield/wp-spamshield.php on line 2033

В одной из предыдущих статей мы научились вызывать ajax’ом содержимое записи. Теперь настроим и доработаем данный функционал для товаров woocommerce.

Создание функционала

Техническая часть (скрипты, стили) остается той же что и при подгрузке записей. т.е. мы должны создать скрытое всплывающее окно, которое выводится в момент подгрузки содержимого товара.

Я добавил кнопку закрытия окна (ее нужно создавать сразу на скрытом окне, чтобы на нее мог воздействовать скрипт)

add_action( 'popup-windows', 'supernova', 5 );
function supernova() {
echo '<div class="popup supernova"><p class="close"><i class="fa fa-times" aria-hidden="true"></i></p><div id="ajax-response"></div></div>';
}

Хук добавления иконки вызова Просмотра товара

function ajaxpreviewproductbutton () {
	
$idproduct = get_the_ID();
echo '<a href="#" id="';
echo $idproduct;
echo '" class="ajax-post postview"><i class="fa fa-eye"></i></a>';	
}
add_action( 'woocommerce_after_shop_loop_item', 'ajaxpreviewproductbutton' );

Немного изменим вывод шаблона Просмотра товара, выделив его в отдельный файл (loading-single-product.php)

add_action( 'wp_ajax_theme_post_example', 'theme_post_example_init' );
add_action( 'wp_ajax_nopriv_theme_post_example', 'theme_post_example_init' );

function theme_post_example_init() {

/* Made Query */
  $args = array( 'p' => $_POST['id'],'post_type' => array( 'product' ) );
  $theme_post_query = new WP_Query( $args );
  while( $theme_post_query->have_posts() ) : $theme_post_query->the_post();
		?>
		
<?php  include(__DIR__."/loading-single-product.php"); ?>

		<?php		
  endwhile;			
  exit;
}

Шаблон Просмотра товара и его оформление

Я закоментировал стандартный вывод карточки товара (//do_action( ‘woocommerce_single_product_summary’ );) чтобы больше кастомизировать шаблон:

<div id="product-<?php the_ID(); ?>" <?php post_class(); ?>><div class="preview-block">

	<?php global $product; ?>

	<div id="preview-gallery"><?php echo get_the_post_thumbnail( $post->ID, 'shop_single', $attributes ); ?></div>
	
	<div id="preview-information">
	
	<?php do_action( 'the_woocommerce_single_title' );	?>
	
	<p class="price"><?php echo $product->get_price_html(); ?></p>
	
	<?php echo the_excerpt(); ?>

	<?php //do_action( 'woocommerce_single_product_summary' ); ?>
		
	<?php if ($product->stock_status == 'instock') { echo '<p class="stock in-stock"><i class="fa fa-check-circle-o" aria-hidden="true"></i> в наличии</p>'; 
	} else { echo '<p class="stock out-of-stock"><i class="fa fa-times-circle-o" aria-hidden="true"></i> нет наличии</p>';  } ?>
		
	<?php if($product->get_type() == "variable"){
		echo '</a>';
		woocommerce_variable_add_to_cart();
	} else {
		echo '</a>';
		woocommerce_template_loop_add_to_cart();
	} ?>		
		
		
	</div>

</div></div>

Основной проблемой данной динамической верстки является то, что элементы требующие обработки и взаимодействия с jQuery ее не получают, т.к. изначально всех этих объектов нет в DOM. Перестает работать выборка свойств вариативного товара, измененные кнопки количества, галерея (лайтбокс) и прочие элементы требующие в своей работе jQuery.

Вариант предложенной верстки подойдет для простых (не вариативных товаров). Оформление всплывающего просмотра я постарался сделать максимально лаконичным

Стили

.supernova {
    width: 900px;
    min-height: 400px;
    margin-top: -250px;
    margin-left: -450px;
    border-radius: 0px !important;
}

.supernova .hentry {width: 100%; margin: 0;}

.preview-block {display: flex;}

#preview-gallery {width: 60%;}

#preview-information {width: 40%; padding: 30px; background: white;}

#preview-information .product_title, #preview-information .price {width: 100%; min-height: auto;}

#preview-information .star-rating {float: left;}

#preview-information p, #preview-information .variations {margin-bottom: 30px;}

#preview-information .stock {text-align: left; padding: 0;}

#preview-information .product_meta, #preview-information .woocommerce-review-link, #preview-information .quantity {display: none;}

.supernova .close {right: 15px; top: 15px; color: #aaa;}
.supernova .close .fa {margin-right: 0;}

@media screen and (max-device-width: 480px) { 
.supernova {
    width: 300px;
    margin-left: -150px;
    height: 600px;
    margin-top: -300px;
    overflow-y: scroll;
}
.preview-block { flex-wrap: wrap; } 
#preview-gallery, #preview-information {width: 100%;}
.supernova .close {
    background: white;
    border-radius: 15px;
    line-height: 25px;
}
}

.postview {
    position: absolute;
    top: 5px;
    right: 5px;
    height: auto !important;
    width: auto !important;
    background-color: #fff;
    padding: 5px;
    border-radius: 25px;
    opacity: 0.2;
	z-index: 9;
}

Необходимые доработки

Я недавно делал обзор плагинов по созданию этого же функционала, и исходя из того что в них входило в моем функционале нужно доработать:

  • Работоспособность скриптов (возможно применять синтаксис jQuery с динамическими элементами)
  • Полноценная галерея изображений с лайтбоксом и увеличением при наведении
  • Система лэйблов
  • Переключение быстрого просмотра соседних по категории товаров

Тэги:

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

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

Категория товаров NEW

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

Интеграция Woocommerce с 1С

Интеграция Woocommerce с 1С

Deprecated: Function create_function() is deprecated in /home/t/tiberi6w/opttour.ru/public_html/wp-content/plugins/wp-spamshield/wp-spamshield.php on line 2033

Интеграция Woocommerce с 1С — довольно сложная тема с множеством нюансов. Буду описывать на что стоит обращать внимание, с какими проблемами пришлось столкнуться. Плагин 1С:Предприятие Data Exchange Так как не Читать далее »

Варианты сортировки woocommerce

Варианты сортировки woocommerce

Добавляем свои варианты сортировки в woocommerce, кроме стандартных: по цене, по новизне, по популярности, по рейтингам. Вариант сортировки: Случайно Вариант сортировки: По названию Вариант сортировки: По меткам Вариант сортировки: По Читать далее »

/

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

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

Быстрый просмотр товара без плагина Быстрый просмотр товара без плагина
Метод изменения шаблонов woocommerce
Рекомендации для васМетод изменения шаблонов woocommerceOpttour.ru
Спасибо! Наш менеджер свяжется с Вами в течении 5 минут.