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

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

HIT

16.07.2017

1744

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

Плагины 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;
}

Тэги: ,

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

  • Похожие записи
  • Комментарии
  • Вложения
Metabox woocommerce

Metabox woocommerce

У плагина woocommerce есть набор дополнительных полей при редактировании товара. При необходимости можно в группы полей WC добавить свои произвольные metabox. Должно получится так: Создание и отображение metabox Первый экшн Читать далее »

/
Upgrade WC

Upgrade WC

Очередная серия улучшений (upgrade) плагина WC. Буду добавлять по мере изучения новые решения. Поиск по SKU (артикулу) Из коробки WC не ищет по артикулам (SKU). Но достаточно установить плагин Search Читать далее »

/
Скидки Woocommerce

Скидки Woocommerce

Добавляем и настраиваем в woocommerce различные системы скидок. Стандартная скидка Woocommerce Можно включить «акционную» цену на товар, к ней можно добавить дату окончания скидки. У товара появляется лэйбл «Распродажа», можно Читать далее »

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

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

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