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

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

HIT

05.12.2017

3836

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

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

  • Похожие записи
  • Комментарии
  • Вложения
Обзор плагинов по созданию скидок

Обзор плагинов по созданию скидок

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

Изменение методов доставки в зависимости от условий

Изменение методов доставки в зависимости от условий

При оформлении товара мы можем задавать условия для вывода методов доставки, а также менять их стоимость. В данном примере при достижении сумм 1000 и 5000 методы доставки становятся бесплатными. Закомментирован Читать далее »

/
Табы woocommerce

Табы woocommerce

В данной статье будут рассмотрены все моменты связанные с табами Woocommerce. Табы (вкладки) — это секции контента разделенного по смыслу. Редактируем стандартные табы WC Настраиваем порядок вкладок У меня почему Читать далее »

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

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

  1. Максим

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

    1. Alexandr

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

  2. Виктор

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

    1. Alexandr

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

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