image-slider
image-slider
image-slider
image-slider
image-slider

Чайный интернет-магазин

  • Тип проекта

    разработка интернет-магазина под ключ

  • Адрес сайта

    www.greentealeaf.ru

Разработка интернет-магазина китайского чая на базе CMS OpenCart. Переработка шаблонного дизайна и расширение стандартного набора функционала в соответствии с определенным техническим заданием, с версткой дополнительных модулей и разделов.

Работы велись с нуля без каких-либо наработок по дизайну и при отсутствии единой концепции магазина. Выбранный шаблон индивидуализирован и переработан.

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

Личный кабинет покупателя с историей заказов, СМС (рассылаются автоматически покупателю со статусами заказа), модули прямых оплат + Робокасса (банковские карты, киви, вебмани, яндекс и др), модуль доставки Почтой России, модуль доставки курьерской службой СДЭК по России.

Дополнительные модули: SEO-PRO, модуль быстрый заказ Simple, модуль кеширования страниц, модуль массового обновления цен, модуль-генератор бонусных баллов. Соцкнопки, отзывы, онлайн-консультант сайта, Новости, Статьи, Акции, рекомендуемые, хиты продаж и тд.

Для администратора – полный доступ ко всем разделам, отчеты, статистика, редактирование, интеграции.

Почта магазина настроена через Яндекс в формате имя_ящика@greentealeaf.ru

На сайт установлена Яндекс.Метрика и дополнительные счетчики.

Как построены страницы магазина

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

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

Общий стиль построения страницы – три колонки, средняя из которых это колонка с основным содержимым (контентом). Боковые блоки отображают категории и блоки товаров разных типов.

Элементы главной страницы:

  • слайдер главной страницы
  • категории на главной
  • текстовый блок
  • блок рекомендуемых товаров
  • блок товаров со скидкой
  • список товаров-новинок

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

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

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

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

Слева от главного контента – колонка с категориями, а также со списком рекомендуемых товаров, справа – блок товаров со скидками. Списки этих двух групп товаров модерируются вручную через панель администрирования.

В нижней части экрана расположился консультант сайта JivoSite для активного взаимодействия с посетителями.

Страница категорий

Каждая категория может иметь заголовок и текстовое описание, что немаловажно для поисковой оптимизации. Текст редактируется в простом текстовом редакторе, где содержимое можно форматировать и изменять.

Ниже описания категории размещается список товаров. Товары в категории могут отображаться двумя способами.

Способ отображения товаров на странице:

  • список (в виде таблицы);
  • превью (иконки);

На скриншоте мы как раз видим группу иконок с товарами. Под каждым изображением – заголовок, цена, рейтинг в виде звездочек (при наличии) и кнопка “Купить”.

Переключатель справа над товарами позволяет посетителю сайта менять режим отображения содержимого категории каталога.

Если выбран режим просмотра “Список”, то страница преображается в последовательный ряд строк – изображений товара с кратким текстовым описанием, которые следуют друг под другом.

Карточка товара

Вот так выглядит полноформатная страница с отображением карточки товара.

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

Карточка товара понятна посетителям сайта, нет нагромождения элементов. Наименование товара прописано крупным заголовком, ниже указаны Производитель, Наличие и Цена. При необходимости к товару можно добавить опцию, например, бант для упаковки (смотри скриншот).

Рядом с кнопкой “Купить” расположился блок с кнопками социальных сетей (функция “Поделиться”).

Отзывы и рейтинг

По каждому товару можно писать отзывы и оставлять рейтинг. Количество звезд в карточке товара показывает его рейтинг, который формируется на основе отзывов пользователей.

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

Все отзывы по товару можно просмотреть на дополнительной вкладке Отзывы, которая расположена рядом с вкладкой текстового описания.

Дополнительные блоки карточки товара

После текстового описания находится блок с группой рекомендуемых товаров, который также можно использовать в качестве списков “С этим товаром покупают” или “Похожие товары”. Списки модерируются вручную в панели администрирования по каждому товару в отдельности.

Еще ниже в виде списка ссылок на товар выводится блок “Лидеры продаж”. Список бестселлеров формируется автоматически на основе общей статистики магазина по продажам.

Текстовые страницы

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

Например, на скриншоте представлена страница с описанием поставщика магазина. Редактирование страницы осуществляется через панель управления в привычном и простом текстовом редакторе.

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