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

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

HIT

16.07.2017

4749

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

Плагины WooCommerce Grid / List toggle (70 000) Grid/List View for WooCommerce (1000) мне не подошли — в моей кастомной теме они работали не корректно и не делали самого главного — не запоминали выбранный вариант представления товаров — при переходе на другую страницу товары снова были показаны по изначальному виду.

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

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

Выводим краткое описание товаров в шаблонах архивов (кстати также можно разместить в плагине)

// Краткое описание в архивах
add_action( 'woocommerce_after_shop_loop_item_title', 'woocommerce_template_single_excerpt', 5);

Подключаем скрипты и стили функционала (основной файл плагина site-choice-view-product.php), также создаем экшн вывода панели с кнопками переключения (должен быть установлен иконочный шрифт FontAwesome) (в версии для wordpress панель выводилась шорткодом).

<?php

/*
Plugin Name: Site Choice View Product
Description: Плагин добавляет панель выбора стилей отображения записей (по-умолчанию блоками, в линию). 
Панель выводится автоматически. Используется технология LocalStorage.
Version: 1.0
Author: Opttour
Author URI: https://opttour.ru/
Plugin URI: 
*/


function addsitechoiceviewproduct()  
{ 
  if( !is_front_page() || !is_home() ) {
  wp_enqueue_style( 'siteslider-style', plugins_url('/site-choice-view-product.css', __FILE__) );	  
  wp_enqueue_script( 'siteslider-scripts', plugins_url('/site-choice-view-product.js', __FILE__), array('jquery'), null, true );
  }
}  

add_action( 'get_footer', 'addsitechoiceviewproduct' );


function sitechoiceviewproduct() {
	
echo '<div id="style-list">';
echo '<span id="btn-block"><i class="fa fa-th-large"></i></span>';
echo '<span id="btn-line"><i class="fa fa-bars"></i></span>';
echo '</div>';

}

add_action( 'woocommerce_before_shop_loop', 'sitechoiceviewproduct', 45 );

45 — будет выведен после списка с вариантами сортировки.

Скрипт site-choice-view-product.js (из скрипта по сравнению с редакцией для wordpress я удалил выравнивание высоты):

$(document).ready(function(){   

$("#btn-block, #btn-line").click(function(){ 

$('.products .product').addClass('animated fadeIn'); 
setTimeout(function () {  $('.products .product').removeClass('animated fadeIn');   }, 500);

});

/* localStorage */

$("#btn-block").click(function(){

$(".products .product").removeClass("product-line");
localStorage.setItem('construct', 'blocks');

});

$("#btn-line").click(function(){

$(".products .product").removeClass("product-box");
$(".products .product").addClass("product-line");
localStorage.setItem('construct', 'lines');

});


	if(localStorage.getItem('construct') == 'blocks') {
		        $(".products .product").removeClass("product-line");
    }

	if(localStorage.getItem('construct') == 'lines') {
			$(".products .product").removeClass("product-box");
			$(".products .product").addClass("product-line");
    }	
	
});

Файл стилей site-choice-view-product.css

/* Панель выбора вида отображения записей */

#style-list {float: right; margin-right: 15px;}

#style-list span {
    position: relative;
    float: right;
    width: 25px;
    padding: 7px 0;
    text-align: center;
    cursor: pointer;
    font-size: 16px;
    color: #999;
    -webkit-transition: color 0.3s linear;
    transition: color 0.3s linear;
}

#style-list span:hover {color: #222;}

#style-list .fa {float: right;}


/* Линиями */

.product-line {width: 100% !important;}

.product-line img {width: 20% !important; float: left; margin: 0 3% 0 0 !important;}

.product-line h2, .product-line #short-description {
    float: left;
    width: 57%;
    height: auto;
	text-align: left;
	margin-bottom: 0;  
}
	
.product-line .price {
    width: 20%;
    float: right;
    text-align: right;
    padding-right: 15px;
    box-sizing: border-box;
}

.product-line h2 {margin-top: 15px;}

.woocommerce ul.products li.product #short-description {display: none;}

.product-line #short-description {color: #000; cursor: default; display: block !important;}
	
.product-line a.button.ajax_add_to_cart {position: absolute; right: 30px; bottom: 30px;}

.product-line a.added_to_cart.wc-forward {
    float: right;
    width: auto;
    background: none;
    border: none;
    margin-right: 15px;
}

Скачать готовый плагин — site-choice-view-product

Панель сортировки

Чтобы обернуть количество выводимых записей, форму сортировки и другое (перед циклом) в div нужно создать две функции:

function addpannell() { echo '<div id="pannel">'; }
add_action( 'woocommerce_before_shop_loop', 'addpannell', 17 );

function addpannellend() { echo '</div>'; }
add_action( 'woocommerce_before_shop_loop', 'addpannellend', 60 );
Изменил начальное положение панели с 10 на 17, т.к. ранее выводятся уведомления Woocommerce

CSS панели

#pannel {
    background: #fff;
    width: 100%;
    display: flex;
    margin-bottom: 20px;
    box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.1);
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    border-radius: 3px;
}

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

  • Похожие записи
  • Комментарии
  • Вложения
Watermark для изображений товаров (обзор плагинов)

Watermark для изображений товаров (обзор плагинов)

Рассмотрим различные плагины по добавлению водяного знака (watermark) на изображения товаров. WooCommerce Products Image Watermark (BeRocket) Плагин не понравился. Логотип добавляется только одним способом, с указанием положения. Можно перезагрузить загруженные Читать далее »

Акции Woocommerce

Акции Woocommerce

В современном интернет-магазине необходимо постоянно проводить стимулирующие мероприятия — акции. Реализуем различные механизмы акций на движке Woocommerce. Акция (скидка) на категорию Если нам необходимо сделать скидку на всю категорию товаров. Читать далее »

Новинка (товар NEW полем)

Новинка (товар NEW полем)

Ранее были рассмотрены варианты добавления лэйбла New полуавтоматическим способом (последние созданные товары, либо по времени от текущего), либо назначением метки NEW. Здесь разберем как сделать данный функционал полем и какие Читать далее »

/

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

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

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