/ Плагины / Сравнение товаров (Compare)

Сравнение товаров (Compare)

HIT

19.11.2017

4430

Сравнение товаров (Compare) нужно для сайта с товарами у которых есть некоторые технические характеристики. Это может быть как электроника, так и более простые вещи, например ламинат. Сделаем обзор плагинов посвященных функционалу сравнения товаров.

YITH WooCommerce Compare (100 000)

В настройках есть возможность добавить кнопку СРАВНИТЬ и в каталоге и в карточке товара.
Если не устраивают название кнопок, их можно перевести в файле yith-woocommerce-compare/templates/compare.php
Можно настраивать сразу ли открывать окно сравнения при добавлении или нет. В бесплатной версии нет отдельной страницы для вызова окна сравнения.

Сделать отдельную кнопку Сравнение товаров

В PREMIUM версии (56$, 19/11/2017) этого плагина есть все необходимые плюшки:

  • отдельная страница сравнения товаров
  • сравнения товаров из разных категорий (т.е. если в сравнении товары из разных категорий — сначала выбрать категорию сравнения)
  • исключение категорий из сравнения
  • сравнения только различающихся параметров
  • кнопки поделиться
  • настройка дизайна элементов сравнения
  • создание специальных сравнений и их вывод по шорткоду
  • специальный виджет для товаров к сравнению

Вывести количество товаров в сравнении

<div id="total-compare">
<?php global $yith_woocompare;
echo count($yith_woocompare->obj->products_list); ?>
</div>

Только ajax данный код обновлять не получится в бесплатной версии. Срабатывает видимость функции protected.

Плагин в бесплатном исполнении мало на что пригоден.

WooCommerce Compare List (2000)

Данный плагин дает более упрощенный функционал, чем предыдущий плагин. Кнопки СРАВНИТЬ добавляются как в карточке, так в категории. Сравнение происходит на отдельной странице. При добавлении товаров к сравнению — они видны и рядом есть есть кнопка К СРАВНЕНИЮ. Стили сделаны довольно топорно — нужно дорабатывать.

Products Compare for WooCommerce (Автор: BeRocket)

Плагин имеет небольшое количество скачиваний, но имеет довольно интересный метод работы. Кнопка СРАВНИТЬ имеет чекбокс, что удобно. Товары к сравнению выводятся в специальном виджете. Непосредственно сравнение происходит на отдельной страницы. И практически весь функционал сделан на ajax.

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

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

Вывести общее количество товаров в сравнении:

<div id="total-compare">
<?php $BeRocket_Compare_Products = BeRocket_Compare_Products::getInstance();
$compare_products = $BeRocket_Compare_Products->get_all_compare_products();
if ( empty($compare_products) ) { echo '0'; }
else { echo count($compare_products); } ?>
</div>

Обновить ajax количество товаров в сравнении. Функции:

// Ajax обновление Сравнение в шапке
add_action( 'wp_enqueue_scripts', 'ajax_compare_enqueue_scripts' );
function ajax_compare_enqueue_scripts() {
	wp_enqueue_script( 'compare', get_template_directory_uri() . '/js/compare.js', array('jquery'), '1.0', true );
	wp_localize_script( 'favorite', 'totalcom', array(
		'ajax_url' => admin_url( 'admin-ajax.php' ),
	));
}

add_action( 'wp_ajax_nopriv_refresh_total_compare', 'refresh_total_compare' );
add_action( 'wp_ajax_refresh_total_compare', 'refresh_total_compare' );
function refresh_total_compare() {
	$BeRocket_Compare_Products = BeRocket_Compare_Products::getInstance();
	$compare_products = $BeRocket_Compare_Products->get_all_compare_products();	
	if ( empty($compare_products) ) { echo '0'; }
	else { echo count($compare_products); }
	die();
}

Скрипт:

jQuery( document ).on( 'click', 'a.br_compare_button, a.br_compare_button i', function() {
	
	setTimeout(function () { 
	jQuery.ajax({
		url : totalcom.ajax_url,
		type : 'post',
		data : {
			action : 'refresh_total_compare',
		},
		success : function( response ) {
			jQuery('#total-compare').html( response );
			//console.log( response );
		}
		
		
	});
	}, 1000);
});

Плагин в оформлении кнопки «Добавить в сравнение» использует иконочный шрифт fontawesome 4 версии. И в настройках нет возможности прописать свои иконки. Так что если на сайте используется более новая 5 версия шрифта, то нужно прописать такой скрипт (подменяем классы иконок новыми):

$(document).ready(function () {
	
	$('a.br_compare_button').each(function() {
		$(this).find('i.fa.fa-square-o').removeClass('fa-square-o').addClass('far fa-square');
		$(this).find('i.fa.fa-check-square-o').removeClass('fa-check-square-o').addClass('far fa-check-square');
	});
	
});

И такие стили:

.br_compare_button .fa-check-square {display: none;}
.br_compare_button.br_compare_added .fa-check-square {display: inline-block;}
.br_compare_button.br_compare_added .fa-square {display: none;}

Если нужно убрать ссылку с кнопки Compare (не всегда удобно чтобы при нажатии происходил переход в Сравнение), нужно добавить:

$('a.br_compare_button').each(function() {
	$(this).removeAttr('href');
});

WooCommerce Smart Compare (200)

Очень классная реализация! Сравниваемые товары появляются внизу на специальной панели, там же кнопка СРАВНИТЬ. При нажатии кнопки СРАВНИТЬ появляется всплывающее окно с товарами. Условным недостатком можно считать отсутствие при сравнении атрибутов товаров, но это решается покупкой платной версии за 19$.

Этот плагин теперь называется WPC Smart Compare for WooCommerce (10 000). И функционал и дизайн у него действительно необычный и прикольный.

WooCommerce Products Compare

Стоит данный «шедевр» от Woo $49 (23.04.2021).

Плагин — полный ноль! Дает самый базовый функционал сравнения. Настроек вообще нет. Ajax нет. Сравнивать можно до 5 товаров. Категорий сравнения нет.

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

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

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

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

Отзывы к товарам

Отзывы к товарам

Рассмотрим различные аспекты такого функционала WC как отзывы к товарам. Изображения в отзывах Плагин YITH WooCommerce Advanced Reviews (6000) добавляет в комментарии поле изображение (можно добавлять несколько) и заголовок. Также Читать далее »

Интересные фишки для Woocommerce

Интересные фишки для Woocommerce

Продолжаем серию интересных доработок для Woocmmerce. Выведем дату последней покупки товара У товара такого мета поля нет, нужно сопоставлять наименования (перебирая заказы). Для этого создаем запрос на перебор БД: В Читать далее »

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

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

Сравнение товаров (Compare) Сравнение товаров (Compare)
Авторизация через соц. сети
Рекомендации для васАвторизация через соц. сетиOpttour.ru
Спасибо! Наш менеджер свяжется с Вами в течении 5 минут.