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

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

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

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;
}

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