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

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

HIT

16.07.2017

4568

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

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

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

  • Похожие записи
  • Комментарии
  • Вложения
Защита Woocommerce от СПАМа

Защита Woocommerce от СПАМа

Защитим разные формы Woocommerce от надоедливого СПАМа. Защита форма регистрации Функция по защите формы регистрации, без плагина. Включаем скрипт Далее регистрируем сайт в сервисе Google reCaptcha (тестировал на v2, работает) Читать далее »

Субкатегории в категориях Woocommerce

Субкатегории в категориях Woocommerce

В шаблоне вывода категорий Woocommerce к каждой категории можно выводить список субкатегорий. Для этого в шаблоне content-product_cat.php, перед закрывающим тегом /li вставляем следующее CSS стили списка субкатегорий

Виртуальный и Скачиваемый товар

Виртуальный и Скачиваемый товар

В интернет-магазине Woocommerce можно создавать Виртуальный и Скачиваемый товары. Разберемся как это выглядит и работает. Виртуальный товар Данная опция не меняет структуру товара. Если при оформлении в корзине только виртуальные Читать далее »

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

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

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