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

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

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

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

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


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



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


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




Кроме того генеруется переключатель серверов:

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


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


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




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