Мои работы

Создание сайта интернет-магазина staroptic.ru (2012). Продвижение сайта, развитие сайта

Создание сайта интернет-магазина брендовой оптики staroptic.ru. 2012 года выпуска

Создание сайта интернет-магазина staroptic.ru (2012)

Сайт STAROPTIC (staroptic.ru)
 Год
выполнения
2012
 Заказчик ООО «Стелла-Оптик»
Сфера
деятельности компании
Продажа брендовой оптики. Продажа очков для зрения, солнцезащитных очков, оправ и линз мировых брендов
Цели
и задачи проекта
Создание интернет-витрины товаров (создание каталога товаров витринного типа) с учетом удобства и простоты навигации и обзорности товара. «Товар лицом» – таков главный принцип, на котором базируется построение пространства разделов и категорий.
Инструментарий создание сайта,
рассчитанного на полную обзорность каждого раздела и демонстрацию «товара лицом»; разработка сайта на
основе CMS интернет-магазина с
последующей модернизацией функционала; установка, отладка и модернизация ряда модулей, модульное программирование, индивидуальная разработка ряда динамичных скриптов на основе PHP-программирования; веб-дизайн
Произведенные работы и полученные результаты создание сайта, веб-дизайн: оригинальный веб-дизайн главной
страницы, веб-дизайн
внутренних
страниц, веб-дизайн разделов и рубрик;
HTML-верстка
(блоковая + табличная), CSS; проработка
имиджевого оформления; FLASH? динамичные эффекты JavaScript, JQuery, AJAX; оптимизация для поисковиков (поисковая оптимизация внутреннего кода CMS и контента сайта), создание раздела информационных статей, копирайтинг (написание текстов для сайта), создание рекламных текстов, продвижение сайта в поисковиках
  Создание сайта: технологии PhotoShop
(веб-дизайн), PHP (разработка уникальных модульных решений в программировании базового движка), приложения на Java Script и JQuery

Главная страница:

Создание сайта интернет-магазина staroptic.ru (2012)

Создание сайта: разработка интернет-магазина на базе движка osCommerce

Создание сайта интернет-магазина производилось на базе модифицированной CMS (osCommerce 2.3). Немного подробнее о специфике модификаций можно узнать в статье: Тюнинг osCommerce v.2.3, или прокачка интернет-магазина для дизайнерских и seo-целей.

Помимо основного функционала движка, были задействованы следующие

  • Формирование УРЛов сайта на лету: формирование ссылок сайта по заголовку (будь то категория, или отдельный товар) на латинице. Например, товар с названием «Купить очки мужские Gucci 2228 PDE» в адресной строке будет представлять следующую ссылку: сайт.ру/каталог/kupit-ochki-mujskie-gucci-2228-pde-p-3218.html . Такой вид ссылок на сайте хорошо сказывается на поисковиках и продвижении сайта. Удобно это и в том плане, что не нужно тратить время, чтобы вписывать вручную УРЛы — ссылка формируется автоматически (исходя из названия).
  • Внесение кейвордов — ключевых слов и описаний. Тоже хорошо сказывается на поисковиках. Возможность определения уникальных ключевых слов для каждого товара интернет-магазина — для лучшего считывания поисковыми системами.
  • Визуальный редактор для внесения описательных текстов для товаров и разделов.
  • Автоуменьшение (авторесайз) картинок товаров и нанесение логотипа на изображения товаров
  • Создание описаний категорий. О чем здесь речь? Казалось бы, движок должен изначально предоставлять возможность для размещения описаний к категориям (рубрикам) интернет-магазина. Однако, как это часто бывает, что кажется логичным — не всегда соответствует практике. Поэтому, пришлось «прокачивать» этот момент на сайте.
  • Вывод кратких и полных описаний товаров.
  • Создание тегов (меток) товаров (совместно с ключевыми словами)

Также, была разработана специальная кнопка «Заказать звонок онлайн». Окошко заказа звонка появляется поверх страницы на замутненном фоне и представляет форму, данные которой приходят менеджеру интернет-магазина по почте. Интернет-форма содержит такие поля как: имя, телефон, удобное время для звонка и произвольный комментарий (Сообщение).

Создание сайта интернет-магазина staroptic.ru (2012). Кнопка «Заказать звонок онлайн»

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

Нужно сказать, в процессе работы, сайт претерпел некоторые другие изменения. Часть из них была вызвана плотным взаимодействием с клиентами — покупателями интернет-магазина — и возникающими у них пожеланиями к удобству пользования интернет-магазина. Другая часть — с открытием шоурума вблизи центра города (м. Автозаводская) — по сути, полноценного салона оптики — в одном из достаточно известных бизнес-центров Москвы (Омега-Плаза).

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

Создание сайта интернет-магазина. Обзор по брендам и категориям

Создание сайта интернет-магазина StarOptic.ru. Страница Все бренды.

Создание сайта StarOptic.ru - Бренды

Каждому бренду соответствует логотип. Если картинка логотипа не добавлена на сайт, выводится дефолтная картинка с надписью «not found LOGO». Это может показаться мелочью, но поисковики довольно остро негативно реагируют на не открывающиеся картинки. Поэтому так важно прописывать в коде вызов картинки на замену отсутствующей.

Создание сайта интернет-магазина StarOptic.ru. Обзор категории товаров.

Изначально в крупных разделах («Мужские очки», «Женские очки» и т.д.), объединяющих в своем составе подразделы (подкатегории) по брендам, представление таких категорий было аналогично странице «Все бренды», рассмотренной выше. Это было не совсем удобно для тех покупателей, которые хотели бы просматривать все мужские (или женские) очки, независимо от бренда. Кроме того, количество брендов составляет довольно ощутимую обзорную часть страницы. Впоследствии такие подкатегории были вынесены в отдельный блок с отдельной «прокруткой». А сам раздел стал представлять соответствующие товары из подкатегорий.

Создание сайта интернет-магазина StarOptic.ru. Обзор категории товаров

Создание сайта интернет-магазина StarOptic.ru. Обзор товара на странице категории.

В интернет-магазине обеспечен полноценный просмотр товара с разных ракурсов прямо на странице категории. Это удобно тем, что не надо переходить на отдельную страницу товара всякий раз, когда хочется просмотреть другие его ракурсы (рис. 1-2). Здесь же можно увеличить каждый из ракурсов (рис. 3, 4). При наведении курсора на изображение, появляется динамичный эффект, слегка расширяющий изображение и подсказывающий, что на изображение можно нажать. При нажатии, поверх окна появляется изображение в увеличенном масштабе.

-1.-

Создание сайта интернет-магазина StarOptic.ru. Обзор товара в категории

-2.-

Создание сайта интернет-магазина StarOptic.ru. Обзор товара в категории

-3.-

Создание сайта интернет-магазина StarOptic.ru. Обзор товара в категории

-4.-

Создание сайта интернет-магазина StarOptic.ru. Обзор товара в категории

Создание сайта интернет-магазина. Страница товара

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

Создание интернет-магазина. Страница товара

Создание сайта интернет-магазина. Метка «продано» исходя из «количества на складе»

Брендовые очки зачастую являются довольно дорогостоящим товаром. Хотя в интернет-магазине представлены сотни и даже тысячи брендовых очков и оправ (порядка 3000 единиц), закупки каждой модели производятся в ограниченном количестве. Но для того, чтобы поддерживать качество интернет-магазина и не терять доверия покупателей, важно обеспечивать актуальную информацию о наличии каждой из моделей. Если это делать всегда вручную, есть вероятность огрешностей, которые со временем будут только накапливаться. Поэтому, в процессе работы интернет-магазина, была спрограммирована и реализована специальная функция, благодаря которой вывод товара в интернет-магазине (в категориях, на странице новых поступлений и на странице товара) опирается на то количество каждой модели, которое было определено и указано заранее — на этапе публикации товара. Другими словами, когда в интернет-магазине происходит заказ, и данная модель доставлена покупателю, для нее автоматически проставляется метка «продано» и убирается кнопка «купить сейчас/добавить в корзину» — товар купить нельзя.

Создание сайта интернет-магазина StarOptic.ru. Метка Продано

Нужно отметить, что у решения по вопросу представления актуальной информации о наличии товара, было 2 пути: либо снимать товар из интернет-магазина (при количестве «0» просто автоматически оградить из вывода товаров), либо обеспечить метку «продано». Исходя из соображений обзорности коллекций, был выбран 2й вариант. Этот выбор рационален тем, что некоторые покупатели, кто уже видел данную модель в других местах, могут находить определенный интерес в стоимости данной модели на сайте StarOptic.

Этот материал опубликован в Мои работы и тегирован , , , , , , , , , , , . Bookmark the permalink.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>