Как сделать сравнение товаров на сайте

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

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

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

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

Как правило, в CMS интернет-магазинов уже есть встроенные решения, позволяющие сравнивать товар, однако модули расширяют возможности и делают использование сравнительных таблиц более удобным.

Пример стандартного вида блока сравнения в OcStore 2.3.0.2.3:

Чтобы улучшить стандартный вариант функции сравнения товаров, установим модуль Compare Improve. Данный инструмент позволяет улучшить сравнение товара в OpenCart версии 2.3 таким образом:

• разделить товары при сравнении по категориям;
  
  
• отключить ненужные поля, присутствующие в стандартном варианте, например: вес, описание товара;
  
  
• установить лимит количества товаров для сравнения в различных категориях;
  
  
• использовать технологию ajax при удалении товара из списка, благодаря чему не будет перегружаться страница;
  
  
• использовать слайдер в таблице с товарами;
  
  
• быстро удалить все выбранные товары в таблице, нажав «Очистить все».
  
  

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

Сравнение товаров в интернет-магазинах на базе WooCommerce WordPress можно реализовать с помощью плагина YITH WooCommerce Compare:

Есть два способа установки плагина:

Найдем необходимый плагин и установим его, а затем — активируем:

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

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

Чтобы добавить функцию сравнения товаров на сайтах, использующих CMS Drupal, можно установить модуль Entity comparison. Модуль позволяет настроить самостоятельно названия кнопок для добавления и удаления товаров, указать, какие данные будут отображаться, и установить лимит количества сравниваемых продуктов:

Для сайтов на Joomla можно воспользоваться модулем сравнения товаров JoomShopping. В этом варианте используется AJAX-технология, благодаря которой страница не перезагружается. Можно установить лимит продуктов для сравнения. Пример работы модуля:

В данной системе управления контентом также можно использовать готовое решение — Сравнение товаров ПЛЮС. Сравнение происходит в рамках одной категории и дает возможность настроить необходимые параметры. Страница сравнения товаров адаптирована под мобильные устройства. Пример:

В данной CMS можно также установить модуль для AJAX-сравнения товаров без перезагрузки страницы, что ускоряет работу и улучшает юзабилити сайта. Пример сравнения с установленным модулем Advanced Compare:

Модуль Product Compare позволяет не только сравнить товары, но и поделиться страницей сравнения, чтобы получить совет. Пример сравнения продуктов:

Для ModX можно воспользоваться компонентом Comparison, предназначенным для сравнения товаров одной группы. Решение работает на AJAX-технологии и pdoTools. Пример использования:

Улучшить стандартное сравнение товаров в PrestaShop можно с помощью модуля Product Comparison Plus. Решение добавляет миниатюры отобранных товаров в подвал сайта, нажав на которые пользователь попадет на страницу сравнения:

Модуль также позволяет поделиться списком с друзьями через соцсети:

Функция сравнения товара — удобная опция для интернет-магазинов с товарами, обладающими большим набором технических характеристик, которые нужно проанализировать при принятии решения о покупке.

Необходимо использовать на проекте удобные решения, позволяющие пользователю осуществлять следующие действия: