Услуги

  • Сайты
  • Контент
  • Продвижение
  • Битрикс24
  • Приложения
Все услуги Оплата
Все услуги Оплата

Поиск

  • Разработка интернет-магазина под ключ
  • Разработка сайтов
  • Разработка леднигов
  • Разработка на битрикс24
  • Разработка на Вордпресс

Интернет-магазин стрел для подводной охоты

О проекте и задаче

Сайт Super Spear Shaft посвящён стрелам для подводной охоты и ориентирован на западный рынок. Клиент пришёл к нам с готовыми макетами за разработкой функционального, адаптивного и мультиязычного интернет-магазина. Получил ли он то, что хотел? Давайте посмотрим.

Технологическое решение

CMS WordPress

Итак, этап разработки дизайна клиент прошёл самостоятельно. От нас зависела техническая реализация проекта: вёрстка и настройка функциональности. А той силой, которая привела сайт «в движение», стала CMS WordPress. Это платформа, на основе которой работает 43% всех существующих в интернете сайтов. И этому есть множество объяснений:

  • высокая безопасность и производительность,
  • настраиваемый дизайн и адаптивность,
  • удобное управление контентом,
  • мультиязычность и мультивалютность,
  • SEO-оптимизация и другие возможности для расширения функциональности сайта.

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

Дизайн и навигация

Главная страница в динамике

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

Стрела в нижней части экрана играет также и роль разделителя, под чертой которого видим 3 главных раздела сайта: «FAQ», «Order now» и «Super Tips & Parts». Эти и все остальные разделы скрыты в бургер-меню, рядом с которым находится ссылка на личный кабинет и корзину. Как видим, запутаться на главной странице довольно сложно.

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

На один из слайдов мы поместили логотипы Европейского фонда регионального развития и EAS, обозначающие, что проект Super Spear Shaft получил грант на международную патентную защиту спортивного инвентаря. При наведении курсора на логотипы слева появляется расшифровка и более подробная информация о гранте:

FAQ

Блок часто задаваемых вопросов достаточно прост: он помещается в один экран и реализован в виде раскрывающегося списка с ненавязчивыми эффектами подъёма. Пользователи могут легко найти нужный вопрос и, кликнув по нему, получить ответ:

Раздел с товарами Order now

Собственно, это основная «витрина» интернет-магазина с главными товарами — стрелами для подводной охоты. Ввиду того, что позиций на сайте немного, данный раздел поместился в один экран. Это стало возможным ещё и благодаря удобной навигации, позволяющей пользователям сразу отфильтровать товары по категориям. На выходе покупатель получает окончательную цену и переходит в корзину для оформления заказа:

Раздел Super tips & parts с комплектующими деталями

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

Адаптивность

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

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

Это объясняется небольшим дисплеем мобильного устройства. Отсюда и главное правило адаптивного дизайна — читабельность и удобство прежде всего:

Функциональность

Личный кабинет

Ссылка на личный кабинет («Log in») находится в шапке сайта, и при её нажатии пользователю предлагается 2 лаконичных формы: для авторизации или регистрации. Формы содержат 1-2 текстовых поля (в том числе поле проверки подлинности учётных данных) и кнопку входа, а также флажок «Запомнить меня» и пункт «Забыли пароль?»

Попадая в личный кабинет, клиент видит перед собой минималистичный интерфейс в виде панели управления («Dashboard»), где он может легко управлять своими заказами («Orders») и адресами доставки («Addresses»), а также редактировать личные данные («Account details») и покинуть учётную запись («Logout»):

01

/ 04

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

Логично, что оформление заказа начинается с основной витрины товаров Order now. Мы уже затрагивали эту страницу и рассмотрели удобную навигацию с фильтрами в виде конструктора стрел. Однако чтобы реализовать простую на первый взгляд панель, нам пришлось постараться и учесть много различных переменных (класс, тип наконечников, длина, диаметр и стоимость). После того, как пользователь отфильтровал товары и сделал свой выбор, он кликает на кнопку и тем самым добавляет покупки в корзину.

Корзина и калькулятор доставки

Чтобы довести шоппинг до логического завершения, пользователь кликает на ссылку «View cart» или на кнопку корзины в правом углу меню сайта. На экране пользователь видит интерфейс с перечнем, количеством, ценой и общей стоимостью товаров. И не просто товаров, а вместе с суммой доставки.

Это стало возможным благодаря встроенному калькулятору («Сalculate shipping»), который предлагает заполнить пару полей, а затем автоматически определяет ориентировочную сумму доставки исходя из страны получателя. В итоге клиент получает общую стоимость заказа, состоящую из суммы товаров и доставки:

Корзину можно обновить (кнопка «Update cart»), а можно оформить добавленные товары с помощью кнопки «Proceed to checkout» и перейти на страницу заказа.

Страница заказа Billing & Shipping

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

Страница содержит развёрнутую форму для заполнения данных, информацию о заказе, а также пункты способов оплаты в виде виджета radio buttons, предполагающий выбор одного из 3-х возможных пунктов. После заполнения всех полей пользователь кликает на кнопку «Proceed to checkout» и переходит к оплате заказа:

Интеграция с платёжной системой

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

01

/ 03

Мультиязычность сайта

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

Итоги

Благодаря эффективному сотрудничеству ожидания клиента по разработке интернет-магазина аксессуаров для подводной охоты оправдались с лихвой. Мы сверстали дизайн в полном соответствии с макетам и дали сайту жизнь с помощью движка WordPress. Интернет-магазин адаптивен и удобен не только в совершении покупок для пользователей, но и в управлении для клиента благодаря простой и понятной админ-панели.

Планируете вывести свои товары в интернет?

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

Над проектом работали