Интернет-магазин компании Totem by Vasilisa Taro

Ссылка на сайт

Один из самых необычных проектов в моей практике. Vasilisa-handmade.ru это интернет-магазин, который продает "особенные" изделия ручной работы. Бренд Totem — это бренд с лицом, его основательница Василиса, особенный и неординарный человек, поэтому и сайт у нее должен был быть таким же.

vasilisa-handmade.ru главная страница

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

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

Макет сайта был сделан мною в Adobe XD и одобрен заказчиком. За идею и основу макета сайта была взята модель фиксированного по высоте сайта. Вся навигация по категориям и товарам идет через слайдер, который находиться в нижней части. Слайдер можно использовать как нативно, свайпами или перетаскиванием мышкой, либо кнопками, расположенными рядом.

vasilisa-handmade.ru на мобильных экранах

Вид на мобильных устройствах

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

vasilisa-handmade.ru страница категории

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

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

vasilisa-handmade.ru страница товара

Страница товара

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

vasilisa-handmade.ru страница товара, подробнее

Подробнее о товаре

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

vasilisa-handmade.ru онлайн-календарь

Онлайн-календарь

Еще одной интересной задачей было создание онлайн-календаря, который будет доступен по подписке. Внешне, календарь похож на категорию товара: если месяц активен — картинка цветная, если же месяц не оплачен, то картинка месяца будет черно-белой.

vasilisa-handmade.ru онлайн-календарь, месяц

Онлайн-календарь, месяц

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

vasilisa-handmade.ru онлайн-календарь, день

Онлайн-календарь, день

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

vasilisa-handmade.ru оформление заказа

Оформление заказа

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

На этом сайте в качестве CMS был выбран Opencart 2.3. Весь функционал был написан на php, js, jquery. Все было написано мною вручную, сторонние модули были использованы по минимуму. В качестве сборки проекта был использован Gulp с использованием Sass, Autoprefixer, Babel и др. Все изменения фиксировались в Git.