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