Интернет-магазин на opencart для проекта r33team
![Интернет-магазин на opencart для проекта r33team](/uploads/posts/2019-05/1557418950_r33.jpg)
Дизайн:
Dezi
Вид работ:
Создание интернет-магазина с нуля. Отзывчивая верстка, посадка на CMS opencart, установка/настройка модулей, настройка платежных систем, реализация необходимого функционала
Все полноценные интернет-магазины на момент написания данной статьи я создаю на opencart. И не так давно я познакомился с opencart.pro разработкой которого занимаются наши отечественные разработчики. В основе лежит классический opencart, он совместим с большинством модулей под стандартный opencart и главное его отличие в том, что он из коробки наполнен необходимым функционалом, имеет русскую и английскую локализацию, так же имеет ряд важных фиксов. Ранее я работал с чистым opencart и с ocStore, но после создания интрнет-магазина кондитерских изделий на opencart.pro у меня не было сомнений в выборе CMS.
Почему я начал с разговора о CMS? Потому что эту информацию необходимо учитывать при верстке. У любой cms есть свои особенности, которые могут испортить вам настроение, если изначально не подготовится к этому.
Я не буду детально все описывать, а расскажу лишь о том что действительно достойно внимания.
Самое интересное в данном магазине это страница товара в которой одновременно предлагается 2 услуги, продажа игровой валюты и продажа аккаунтов:
![t33team переключатель товаров](/uploads/posts/2019-05/1558029432_t33team-product-tab.gif)
Был реализован переключатель между товарами, который открывал и скрывал необходимые поля. Кроме того, переходя из категории товаров можно сразу выбрать, какая именно услуга будет открыта:
![Категория товаров r33](/uploads/posts/2019-05/1558029677_r33-kategorija-tovarov.jpg)
Все элементы связаны и обрабатываются через jаvascript. При входе на страницу в первую очередь генерируется таблица цен для разных серверов с разными вариантами количества. Все происходить автоматически на основе цены за единицу и кол-ва для каждого сервера:
![Таблица цен](/uploads/posts/2019-05/1558031163_r33team-servers-tables.jpg)
Цена генерируется в соответствии с текущей выбранной валютой:
![Друга валюта](/uploads/posts/2019-05/1558031974_currency.jpg)
Кроме того генеруется переключатель серверов:
![Переключаталь серверов](/uploads/posts/2019-05/1558031368_r33team-servers.jpg)
Переключаясь между серверами изменяется минимальное кол-во в поле "amount" в соответствии с параметрами сервера, меняется цена за единицу и итоговая стоимость:
![r33team - выбор серверов](/uploads/posts/2019-05/1558031599_t33team-select-servers.gif)
И напоследок выбор платежной системы, которая так же может влиять на итоговую цену:
Если выбрана вкладка "Accounts", то в итоговую цену попадает только цена за аккаунт:
![Выбор аккаунтов](/uploads/posts/2019-05/1558032277_accounts.gif)
Если какое-либо из обязательных полей не заполнено или не выбран сервер, то появится окно с предупреждением:
![Не заполнены обязательные поля](/uploads/posts/2019-05/1558032678_charming-field.gif)
После нажатия на кнопку Next происходит переход к форме оплаты, которая автоматически собирает всю необходимую информацию указанную ранее. Все что остается это выбрать способ доставки и перейти к оплате:
Почему я начал с разговора о CMS? Потому что эту информацию необходимо учитывать при верстке. У любой cms есть свои особенности, которые могут испортить вам настроение, если изначально не подготовится к этому.
Я не буду детально все описывать, а расскажу лишь о том что действительно достойно внимания.
Самое интересное в данном магазине это страница товара в которой одновременно предлагается 2 услуги, продажа игровой валюты и продажа аккаунтов:
![t33team переключатель товаров](/uploads/posts/2019-05/1558029432_t33team-product-tab.gif)
Был реализован переключатель между товарами, который открывал и скрывал необходимые поля. Кроме того, переходя из категории товаров можно сразу выбрать, какая именно услуга будет открыта:
![Категория товаров r33](/uploads/posts/2019-05/1558029677_r33-kategorija-tovarov.jpg)
Все элементы связаны и обрабатываются через jаvascript. При входе на страницу в первую очередь генерируется таблица цен для разных серверов с разными вариантами количества. Все происходить автоматически на основе цены за единицу и кол-ва для каждого сервера:
![Таблица цен](/uploads/posts/2019-05/1558031163_r33team-servers-tables.jpg)
Цена генерируется в соответствии с текущей выбранной валютой:
![Друга валюта](/uploads/posts/2019-05/1558031974_currency.jpg)
Кроме того генеруется переключатель серверов:
![Переключаталь серверов](/uploads/posts/2019-05/1558031368_r33team-servers.jpg)
Переключаясь между серверами изменяется минимальное кол-во в поле "amount" в соответствии с параметрами сервера, меняется цена за единицу и итоговая стоимость:
![r33team - выбор серверов](/uploads/posts/2019-05/1558031599_t33team-select-servers.gif)
И напоследок выбор платежной системы, которая так же может влиять на итоговую цену:
![Платежная система](/uploads/posts/2019-05/1558032113_pay-system.jpg)
![Выбор аккаунтов](/uploads/posts/2019-05/1558032277_accounts.gif)
Если какое-либо из обязательных полей не заполнено или не выбран сервер, то появится окно с предупреждением:
![Не заполнены обязательные поля](/uploads/posts/2019-05/1558032678_charming-field.gif)
После нажатия на кнопку Next происходит переход к форме оплаты, которая автоматически собирает всю необходимую информацию указанную ранее. Все что остается это выбрать способ доставки и перейти к оплате:
![Форма оплаты r33team](/uploads/posts/2019-05/1558036217_r33team-forma-oplaty.gif)
Более детально элементы сайта и взаимодействие с пользователем можно увидеть на видео:
Категория: Игровые сайты / Интернет-магазины
Комментарии