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

Нажав кнопку "Принять и продолжить", вы соглашаетесь с Политики конфиденциальности

Принять и продолжить

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

Отменить
2867 1
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
«Список задач» — готовый to-do лист, который поможет вести учет
о выполнении работ по конкретному проекту. Инструмент содержит готовые шаблоны с обширным списком параметров по развитию проекта, к которым также можно добавлять собственные пункты.
Начать работу со «Списком задач»

Сэкономьте время на изучении Serpstat

Хотите получить персональную демонстрацию сервиса, тестовый период или эффективные кейсы использования Serpstat?

Оставьте заявку и мы свяжемся с вами ;)

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

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

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

Войти Регистрация

Вы исчерпали лимит запросов.

Или email
Забыли пароль?
Или email
Back To Login

Не волнуйтесь! Напишите свой электронный адрес и мы пришлем вам новый пароль.

Вы уверены?

Awesome!

To complete your registration you need to enter your phone number

Назад

Мы отправили код подтверждения на ваш номер телефона

Your phone Resend code Осталось запросов

Что-то пошло не так.

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

Знакомство с сервисом

Ознакомьтесь с основными возможностями Serpstat удобным способом!

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

Имя

Email

Телефон

Будем рады вашему комментарию
Увеличить лимиты

Улучшить тариф

Экспорт недоступен для вашего тарифного плана. Вам необходимо улучшить свой тариф до Lite или выше, чтобы получить доступ к инструменту Подробнее

Зарегистрироваться

Спасибо, мы с вами свяжемся в ближайшее время

Пригласить
Просмотр Редактирование

E-mail
Сообщение
необязательно
E-mail
Сообщение
необязательно

У вас закончились лимиты

Вы достигли лимита на количество созданных проектов и больше не можете создавать новые проекты. Увеличьте лимиты или удалите существующие проекты.

Я хочу больше лимитов