Для разных людей по разному удобно просматривать товары: когда они строятся в виде плиток, либо в линию или другими способами. Добавим на сайт функционал переключения вида отображения товаров в архивах.
Плагины 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; }[site-socialshare]