| Параметр | Описание |
|---|---|
| Сайт | STAROPTIC (staroptic.ru) |
| Год выполнения | 2012 |
| Заказчик | ООО «Стелла-Оптик» |
| Сфера деятельности компании | Продажа брендовой оптики: очков для зрения, солнцезащитных очков, оправ и линз мировых брендов. |
| Цели и задачи проекта | Создание интернет-витрины товаров (каталога витринного типа) с упором на удобство навигации и обзорность товара. Главный принцип — «Товар лицом», на котором базируется построение пространства разделов и категорий. |
Ключевые работы и результаты проекта
Были выполнены комплексные работы по созданию и продвижению сайта:
- Веб-дизайн и разработка: Оригинальный дизайн главной и внутренних страниц, разделов и рубрик.
- Техническая реализация: HTML-верстка (блочная + табличная), CSS. Динамичные эффекты на JavaScript, JQuery, AJAX. Проработка имиджевого оформления.
- Программирование и CMS: Разработка сайта на базе модифицированной CMS osCommerce 2.3. Установка, отладка, модернизация модулей и индивидуальная разработка динамичных скриптов на PHP.
- Контент и SEO: Создание раздела информационных статей, копирайтинг, написание рекламных текстов. Поисковая оптимизация внутреннего кода CMS и контента сайта. Продвижение сайта в поисковых системах.
Инструментарий: Adobe Photoshop (веб-дизайн), PHP, JavaScript, JQuery.
Технические особенности и модификации движка
Сайт создан на базе модифицированной CMS osCommerce 2.3. Специфика доработок направлена на улучшение дизайна и SEO.
Ключевые доработки функционала включали:
- ЧПУ (Человекопонятные URL): Автоматическое формирование ссылок на латинице по заголовку товара или категории (например,
site.ru/catalog/kupit-ochki-mujskie-gucci-2228-pde-p-3218.html). Это улучшает SEO и избавляет от ручного ввода URL. - Расширенные SEO-возможности: Возможность задания уникальных ключевых слов (кейвордов) и описаний для каждой товарной позиции.
- Визуальный редактор: Для удобного внесения описательных текстов товаров и разделов.
- Работа с изображениями: Автоматическое уменьшение (ресайз) картинок товаров и нанесение на них логотипа.
- Описания категорий: Доработка движка для возможности добавления SEO-текстов в категории товаров.
- Гибкий вывод информации: Вывод как кратких, так и полных описаний товаров, создание тегов (меток).
- Виджет «Заказать звонок»: Была разработана форма заказа обратного звонка, данные которой отправлялись менеджеру на почту. Впоследствии этот виджет был удален с сайта из-за нерациональности расходов на междугороднюю связь.
Эволюция сайта на основе обратной связи
В процессе эксплуатации сайт дорабатывался, исходя из пожеланий клиентов и изменений в бизнесе заказчика (открытие шоурума в бизнес-центре «Омега-Плаза» на м. Автозаводская).
Важные добавления:
- Поле поиска в горизонтальном меню — для удобства покупателей, ищущих модели по артикулу.
- «Красная полоса» для оперативных объявлений (работа в праздники и т.д.). Несмотря на некоторую простоту в дизайне, она эффективно доносила важную информацию.
- Социальные кнопки для повышения вовлеченности.
Структура и юзабилити каталога
Страница «Все бренды»
Каждому бренду соответствует логотип. Если изображение логотипа отсутствует, выводится картинка-заглушка с надписью «not found LOGO», что важно для корректной индексации сайта поисковыми системами.
Категории товаров
Изначально крупные разделы (например, «Мужские очки») представляли собой просто список подкатегорий-брендов, что было неудобно для просмотра всего ассортимента. В дальнейшем подкатегории были вынесены в отдельный блок с прокруткой, а в основном разделе стали сразу отображаться товары из всех входящих в него брендов.
Просмотр товара в категории
Реализована возможность полноценного просмотра товара с разных ракурсов прямо на странице категории без перехода на карточку товара. При наведении курсора на изображение возникает динамический эффект, указывающий на возможность взаимодействия. При клике изображение открывается в увеличенном масштабе поверх страницы (всплывающее окно).
Страница товара (карточка)
На странице представлены название, цена, описание и изображения товара. Дополнительно выводятся:
- Похожие по цене товары.
- Связанные теги (ключевые слова).
- Блок «Поделиться» (социальные закладки).
- Ссылка на страницу бренда.
- Блок «Лидеры продаж».
Система контроля наличия товара
Для поддержания актуальности информации о наличии позиций была реализована автоматическая функция. Количество товара на складе указывается при его публикации. Когда товар заказывают и отгружают покупателю, для этой модели автоматически:
- Устанавливается метка «продано».
- Убирается кнопка «Купить сейчас / Добавить в корзину».
Было рассмотрено два варианта: полное скрытие товара при отсутствии или оставление с меткой. Выбран второй вариант для сохранения обзорности коллекций, что рационально для покупателей, которые могут искать конкретную модель, увиденную ранее в других местах.
