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