Интернет-магазин BDSM-Toys

22 Июн 2016

Бэкенд Дизайн Фронтенд Инфарх

http://bdsm-toys.ru/
Интернет-магазин BDSM-Toys

Задача проекта

Задача: Разработать интернет-магазин в качестве расширения группы в социальной сети ВКонтакте. Движок сайта должен позволять разместить номенклатуру (товар), и управлять ценообразованием, регулировать количество товара в остатке и управлять модификациями.

Движок для сайта

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

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

Решение дизайна сайта

На момент планирования разработки предполагалось использовать большое меню навигации по каталогу первого уровня. Чтобы вместить все пункты меню на одном экране мы использовали разделение экрана на 2 части по вертикали. Слева расположилась «шапка» сайта с расположением элементов сверху вниз, а справа в классическом исполнении полотно контента.

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

Верстка и программирование сайта

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

В качестве основы мы взяли дефолтный шаблон OpenCart и модифицировали его под дизайн-решения. Так можно добится максимальной совместимости с самим движком.

Шапка сайта

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

Чтобы реализовать переключение между этими «экранами» мы использовали решение на селекторах CSS, добавив немного Javascript. Притом последний нужен исключительно для выключение флагов полей типа input, посредством которых как раз и осуществляется переключение.

Кнопка «Купить»

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

И для того, чтобы не шокировать пользователей громким звуком мы ограничили его использование по времени. Проверка времени происходит на клиенте, т.е. в браузере пользователя, что позволяет легко отлавливать время его часового пояса. Конечно, такой способ может «дать сбой», если у покупателя настроено время не в соответствии с его текущим. Но за такую настройку мы не можем нести ответственности.

Каталог сайта

На главной странице мы вывели полный каталог сайта в 2 уровня. В нем видны категории и подкатегории. Что позволяет сразу вывести все актуальные категории товаров. Категории, в которых товар отсутствует, не выводятся.

Данное решение заставило нас модифицировать движок.

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

Система оплаты

В качестве системы оплаты по просьбе клиенты был выбран Яндекс.Кошелек. Он позволяет оплачивать товары как дебетовой\кредитной картой системы Visa и Maestro, так и непосредственно из Яндекс.Кошелька.

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

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

В проекте принимали участие

АрсенийАрсений
АлександрАлександр