WP-CITY.RU

Авторские шаблоны WordPress

Недорогой, функциональный сайт или Интернет-магазин — это реально!


Заказать сейчас

Делаем быстрый просмотр товара для для магазина WooCommerce

Доброго всем времени суток, сегодня я расскажу и покажу как быстро сделать быстрый просмотр товара для магазинов на основе плагина woocommerce.

Начнем с того для чего это вообще надо, ну наверное самое главное чтоб потенциальный покупатель мог прочесть минимальное описание вашего товара не переходя при это на основную страницу.
Вот вам небольшой скрин как это работает:
prosmotr

Итак что нам для этого понадобится, да не многое, всего только скрипт лайтбокса, самый легкий!
Я выбрал для этих целей jquery.fancybox скачать можно его тут.

После того как вы его скачали, как обычно его надо установить в наш шаблон, я покажу самый простой вариант не используя страницу functions.php, хотя многие меня будут критиковать, что мол так не правильно и надо подключать скрипты через функцию, но для людей которые не так часто занимаются такими делами этого не надо!

<script type='text/javascript' src='<?php bloginfo('template_directory'); ?>/js/jquery.fancybox.js'></script>
<link href="<?php bloginfo('template_directory'); ?>/jquery.fancybox.css" rel="stylesheet" type="text/css" />

<script type="text/javascript">
            jQuery(function($){
			$('.fancybox').fancybox();
}); 
  
        </script>

Этот код надо поместить в фаил шаблонна footer.php после тега /body и проследите чтоб у вас папки со скриптом и стилями соответствовали путям!

Далее нам надо вызвать само модальное окно где и будет выводится минимальная информация о товаре.

<div id="<?php echo $post->ID; ?>" style="width:600px;display: none;padding:7px; display:none;">

<div><a href="<?php the_permalink(); ?>"><img src="<?php echo get_image_path($post->ID); ?>" alt="<?php the_title(); ?>" style="width:40%; float:left; margin:0 20px 0 0;"></a>

<?php
		woocommerce_show_product_loop_sale_flash();
		echo '<h3 class="title">', the_title(), '</h3>';
		echo '<span style="display:none;">',woocommerce_template_loop_rating(), '</span>';
		echo '<div class="saser" >',woocommerce_template_loop_price(), '</div>';
		echo '<div class="sas" >',woocommerce_template_single_add_to_cart(), '</div>';
		woocommerce_template_single_excerpt();
		woocommerce_template_single_meta();
		?>
	

</div>
</div>

Данный код полностью настроен и рабочий, его вам надо вставить в фаил вашего магазина
content-product.php, он должен находится в вашем шаблоне в папке woocommerce:
shablon

Далее надо вывести кнопку или иконку на быстрый просмотр, я вам приведу код, он уже рабочий, единственный минус, это вам придется немного подогнать стиль кнопки под ваш дизайн.

<div class="nokar">
<a class="fancybox button" href="#<?php echo $post->ID; ?>" data-product_id="<?php echo $post->ID; ?>" style="position:absolute; bottom:5px;left:50%; margin-left:-30%;"> Быстрый просмотр</a>
</div>

Вот теперь все, наш быстрый просмотр готов, без использования разных тяжелых плагинов!!!

  1. Сергей

    // * <a href="»><img src="ID); ?>» alt=»» style=»width:40%; float:left; margin:0 20px 0 0;»>

    Этот код не стал у меня работать. Глючило всю страницу на сайте. Тогда я его заменил на код из product-image.php касающийся изображений. После этого все заработало, появились в модальном окне все изображения включая и галерею. Причина возможно была в том, что у меня сам плагин вукомерс не перемещен в папку темы.
    Большое спасибо за статью. Было от чего отталкиваться.

  2. Владислав

    Спасибо большое!.. Благодаря этой статьи сделал себе заказ в один клик) ..

  3. xrdz

    Ничего не понял. Что значит «загрузится однократно и в дальнейшем будет грузиться только для определённого товара»?
    Вообще-то у всплывающих окон должна быть поддержка Ajax, который загружает полноразмерную картинку и прочий контент не вошедший в витрину в момент открытия всплывающего окна А вашем коде похоже этого нет.

  4. Евгений (Автор)

    Контент быстрого просмотра загрузится только однократно и в дальнейшем будет грузится только для определенного товара с уникальным ID товара

  5. xrdz

    Получается, что при загрузке категории, он ещё и весь контент быстрого просмотра всех товаров будет загружать. Это многократно увеличит вес страницы и снизит скорость загрузки. Нельзя ли сделать так чтобы контент быстрого просмотра загружался только при клике на него?

  6. Максим

    если речь идёт о woocommerce, то $post->ID вроде как не может работать в данном случае, в общем сделал всё по инструкции — не работает.

© 2012–2017 / wp-city.ru / Авторские шаблоны WORDPRESS / Создание сайтов

evgeniy38868     krizisvt@i.ua