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

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

HIT

05.12.2017

1321

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

Тэги:

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

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

Переключение вида вывода товаров

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

/
Купить в 1 клик

Купить в 1 клик

Добавляем в интернет-магазин кнопку «Купить в 1 клик». Рассмотрим различные плагины по данному направлению. WooCommerce Direct Checkout Плагин с 20 000 скачиваниями, по сути только меняет назначение кнопки «В корзину», Читать далее »

Хлебные крошки WC

Хлебные крошки WC

Хлебные крошки WC имеют свои особенности. Их невозможно заменить стандартными хлебными крошками, т.к. в них еще не предусмотрена система для иерархических таксономий. Выводим хлебные крошки Первым делом надо назначить хлебные Читать далее »

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

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

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