Особенность проекта заключается в том, что структура услуг достаточно сложная, многоуровневая, разветвлённая.

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

Целевая аудитория магазина Европа и США, требуется оплата в различных валютах.

Необходимо было разработать индивидуальный дизайн, отражающий атмосферу игр, преимущественно World of Warcraft.

Сервис по продаже игровых услуг - фото

Разработка сайта по продаже игровых услуг

Этапы работ

Разработка и обсуждение ТЗ.

Заказчик подготовил референсы и хотел сделать что-то похожее, но тем не менее свое индивидуальное. Этому этапу мы посвятили большое время, так как желаемый функционал работы магазина не был понятен в полном объеме заказчику.

Прототипирование. 

На этом этапе наш дизайнер разработала ч/б прототипы всех основных страниц сайта: главная, страница товарной категории, карточка услуги (товара), статические страницы (о нас, гарантии, контакты), блог, корзина и оформление заказа.

Отрисовка дизайна. 

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

Верстка. 

В качестве каркаса фронт-энда мы использовали фремворк UIkit + наша индивидуальная верстка по дизайн-макетам. На сайте использовано большое количество кастомного Javascript кода, реализующего выбор опций игры и калькуляцию цены.

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

Web-разработка сайта для продажи игровых услуг

Бэкэнд и админка. 

Интернет-магазин разработан на CMS WordPress + Woocommerce. “Из коробки” владельцу сайта доступен удобный, интуитивно-понятный инструмент для работы с заказами и покупателями, а также аналитика продаж.

Для этого проекта Веб-Студия Б77 значительно переработала админ-панель для работы с дополнительными опциями услуг (игр). Контент-менеджер сайта может гибко, в удобном интерфейсе выбрать все необходимые опции, установить их цену и коэффициенты расчета (подробнее ниже).

В админ-панели нами создан удобный инструмент для добавления отзывов, преимуществ сервиса, этапов его работы. Для этого мы разработали многократно-используемые блоки (reusable-block) для использования их в различных разделах сайта.

Все цены и калькуляция конечной стоимости проверяются в бэкэнде, добавляются в корзину, заказ и уведомления о заказах (письмах, отправляемых клиенту).Так как основные клиенты сайта находятся в странах Европы и США, мы реализовали возможность расчета цены в двух валютах: евро и доллар.

Курс EUR/USD обновляется несколько раз в день, считается автоматически и пересчитывается в опциях товара при выборе клиентом.

Сервис по продаже игровых услуг - фото

Еще одна интересная особенность проекта — кастомный слайдер выбора уровня “прокачки” персонажа и изменение цены в соответствии с уровнем.

Слайдер, по требованиям бизнес-логики магазина, реализован в двух вариантах, плавный и пошаговый для различных видов услуг (игр).

В админ-панели менеджер сайта может выбрать один или другой вариант и установить цену шага.

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

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

Помимо всего этого, на сайте установлен онлайн-чат для связи клиент-оператор, подключены различные системы статистики, сайт подготовлен к SEO-оптимизации.

Перейти в категорию: Разработка индивидуальных сайтов

Проект получился сложный и интересный, как мы и любим. :ослепительная_улыбка:

Перейти на сайт: https://overcap.store/