Игровые сайты

Интернет-магазин на opencart для проекта r33team

Интернет-магазин на opencart для проекта r33team
Дизайн:
Dezi
Вид работ:
Создание интернет-магазина с нуля. Отзывчивая верстка, посадка на CMS opencart, установка/настройка модулей, настройка платежных систем, реализация необходимого функционала
Все полноценные интернет-магазины на момент написания данной статьи я создаю на opencart. И не так давно я познакомился с opencart.pro разработкой которого занимаются наши отечественные разработчики. В основе лежит классический opencart, он совместим с большинством модулей под стандартный opencart и главное его отличие в том, что он из коробки наполнен необходимым функционалом, имеет русскую и английскую локализацию, так же имеет ряд важных фиксов. Ранее я работал с чистым opencart и с ocStore, но после создания интрнет-магазина кондитерских изделий на opencart.pro у меня не было сомнений в выборе CMS.

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

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

Самое интересное в данном магазине это страница товара в которой одновременно предлагается 2 услуги, продажа игровой валюты и продажа аккаунтов:

t33team переключатель товаров
Был реализован переключатель между товарами, который открывал и скрывал необходимые поля. Кроме того, переходя из категории товаров можно сразу выбрать, какая именно услуга будет открыта:
Категория товаров r33


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

Таблица цен
Цена генерируется в соответствии с текущей выбранной валютой:

Друга валюта


Кроме того генеруется переключатель серверов:
Переключаталь серверов
Переключаясь между серверами изменяется минимальное кол-во в поле "amount" в соответствии с параметрами сервера, меняется цена за единицу и итоговая стоимость:
r33team - выбор серверов

И напоследок выбор платежной системы, которая так же может влиять на итоговую цену:
Платежная системаЕсли выбрана вкладка "Accounts", то в итоговую цену попадает только цена за аккаунт:

Выбор аккаунтов
Если какое-либо из обязательных полей не заполнено или не выбран сервер, то появится окно с предупреждением:

Не заполнены обязательные поля


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

Форма оплаты r33team
Более детально элементы сайта и взаимодействие с пользователем можно увидеть на видео: