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

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

HIT

05.12.2017

4327

4

В одной из предыдущих статей мы научились вызывать 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 с динамическими элементами)
  • Полноценная галерея изображений с лайтбоксом и увеличением при наведении
  • Система лэйблов
  • Переключение быстрого просмотра соседних по категории товаров

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

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

Фильтр по наличию

Оказывается в последних версиях Woocommerce есть встроенная функция фильтрации по наличию. Через добавление в url параметра filter_stock_status. Можно её использовать для создания фильтра: Функция вывода списка: Функция с условиями вывода Читать далее »

Настройка доставки

Настройка доставки

Настройка доставки в woocommerce 2.6 кардинальным образом изменилась. Стала более гибкой, но и более сложной в настройке. Разберемся в тонкостях настройки доставки. Зоны доставки Зоны доставки — это определенная территория Читать далее »

/
Подарочные сертификаты

Подарочные сертификаты

Рассмотрим такой инструмент маркетинга как подарочные сертификаты, в ракурсе продажи его электронной версии. PW WooCommerce Gift (10 000) Алгоритм следующий: создает новый тип товара PW Gift Card. В котором можно Читать далее »

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

4 комментария

  1. Максим

    Здравствуйте. 
    У меня сейчас стоит такая же задача по созданию плагины quick view. И сталкнулся с теме же проблемами по выводу вариативных товаров, что и вы описываете. Скажите, получилось их решить? 

    1. Alexandr

      Я пользуюсь плагином WPC Smart Quick View for WooCommerce. Многие моменты в нем предусмотрены.

  2. Виктор

    Приятно читать стать, где есть prodigy 🤘

    1. Alexandr

      Да, Prodigy огонь! Слышал недавно что они работают над новым альбомом. Без Кейта, думаю, уже не то конечно, но все же интересно будет послушать.

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