15986 2
How-to Читать 8 минут 20 февраля 2019

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

Как добавить сравнение товаров в интернет-магазин
ЧЕК-ЛИСТ: КОНТЕНТНАЯ ЧАСТЬ — НОВЫЙ ФУНКЦИОНАЛ
Инструкцию одобрил
Руководитель SEO отдела в Mnogoland
Сравнение товаров на сайте — популярная функция во многих интернет-магазинах. Реализация функционала повышает уровень юзабилити ресурса, позволяя клиентам принять взвешенное решение о покупке на основании сравнения характеристик товаров.

Зачем нужно сравнение товаров в интернет-магазинах

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

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

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

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

Как реализовать сравнение товара в интернет-магазине на OpenCart

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

  • разделить товары при сравнении по категориям;

  • отключить ненужные поля, присутствующие в стандартном варианте, например: вес, описание товара;

  • установить лимит количества товаров для сравнения в различных категориях;

  • использовать технологию ajax при удалении товара из списка, благодаря чему не будет перегружаться страница;

  • использовать слайдер в таблице с товарами;

  • быстро удалить все выбранные товары в таблице, нажав «Очистить все».

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

Как настроить функцию сравнения товаров на WordPress

Сравнение товаров в интернет-магазинах на базе WooCommerce WordPress можно реализовать с помощью плагина YITH WooCommerce Compare:
Плагин сравнения YITH WooCommerce Compare
  • плагин популярен у пользователей WordPress и активно обновляется разработчиками;

  • совместим с последней версией CMS (5.0.3);

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

  • каждый параметр для сравнения добавляют посредством атрибутов WooCommerce в конфигурации товара;

  • на сайте можно использовать простой виджет со списком товаров, которые добавили пользователи;

  • доступно изменение внешнего вида таблицы с использованием собственных стилей и шаблонов.

Установка плагина YITH WooCommerce Compare

Есть два способа установки плагина:
1
Можно найти плагин с помощью поиска в административной панели WordPress.

Для этого перейдем в раздел «Плагины» и выберем «Добавить новый»:
Добавление плагина в WordPress
Найдем необходимый плагин и установим его, а затем — активируем:
Активация плагина в WordPress
2
Второй вариант — скачать плагин, а затем загрузить его в папку плагинов на хостинге, расположенную по адресу: wp-content/plugins. После этого нужно также активировать расширение в разделе «Плагины» административной панели.

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

Русификация плагина YITH WooCommerce Compare

Для перевода основных терминов и фраз плагина можно использовать готовое решение, предложенное на сайте с уроками WordPress. Автор блога перевел часть плагина, использующуюся в пользовательском интерфейсе, на русский язык. Чтобы перевести плагин на собственном ресурсе нужно воспользоваться двумя файлами перевода таким образом:
1
Скачать файлы.
2
При желании можно изменить предложенные переводы и добавить собственные варианты к фразам, у которых нет русского значения. Для этого нужно отредактировать файл yit-ru_RU.po с помощью редактора Notepad++:
Русификация плагина YITH WooCommerce Compare
3
После внесения изменений надо переименовать файлы:
«yit-ru_RU.po» → «yith-woocommerce-compare-ru_RU.po»
«yit-ru_RU.mo» → «yith-woocommerce-compare-ru_RU.mo»
4
Затем добавим отредактированные файлы в папку плагина на хостинге, размещенную по данному адресу:
wp-content\plugins\yith-woocommerce-compare\languages
5
После этого отредактируем название кнопки и таблицы сравнения в админке WordPress. Для этого перейдем в настройки плагина WooCommerce:
Настройка плагина WooCommerce
6
После завершения всех настроек сравнение товара будет выглядеть так:
Сравнение товаров в WooCommerce

Настройка сравнения товаров на других популярных CMS

#1

Сравнение товаров в Drupal

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

Сравнение товаров в Joomla

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

Сравнение товаров Битрикс

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

Сравнение товаров в Magento

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

Сравнение товаров в Shopify

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

Сравнение товаров в ModX

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

Сравнение товаров в PrestaShop

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

Заключение

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

Необходимо использовать на проекте удобные решения, позволяющие пользователю осуществлять следующие действия:
1
Добавлять товары в сравнительную таблицу.
2
Включать режим отображения только различающихся параметров.
3
Добавлять товары из сравнительной таблицы в корзину.
4
Удалять все выбранные товары.
5
Использовать настраиваемый список характеристик и свойств продуктов для сравнения.
Эта статья — часть модуля «Список задач» в Serpstat
«Список задач» в Serpstat" title = "Как сделать сравнение товаров на сайте 16261788231557" />
«Список задач» — готовый to-do лист, который поможет вести учет
о выполнении работ по конкретному проекту. Инструмент содержит готовые шаблоны с обширным списком параметров по развитию проекта, к которым также можно добавлять собственные пункты.
Начать работу со «Списком задач»

Serpstat — набор инструментов для поискового маркетинга!

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

Набор инструментов для экономии времени на выполнение SEO-задач.

7 дней бесплатно

Оцените статью по 5-бальной шкале

4.67 из 5 на основе 2 оценок
Нашли ошибку? Выделите её и нажмите Ctrl + Enter, чтобы сообщить нам.

Используйте лучшие SEO инструменты

Подбор ключевых слов

Поиск ключевых слов – раскройте неиспользованный потенциал вашего сайта

Возможности Serpstat

Возможности Serpstat – комплексное решение для эффективного продвижения вебсайтов

Кластеризация ключевых слов

Кластеризация ключевых слов автоматически обработает до 50 000 запросов в несколько кликов

SEO аудит страницы

Проанализируйте уровень оптимизации документа используя SЕО аудит страницы

Поделитесь статьей с вашими друзьями

Вы уверены?

Знакомство с Serpstat

Узнайте об основных возможностях сервиса удобным способом!

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

Имя

Email

Телефон

Будем рады вашему комментарию
Я принимаю условия Политики конфиденциальности.

Спасибо, мы сохранили ваши новые настройки рассылок.

Сообщить об ошибке

Отменить
Открыть чат технической поддержки
mail pocket flipboard Messenger telegramm