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

Сравнение товаров (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 товаров. Категорий сравнения нет.

[site-socialshare]