Введение
В документе описан процесс установки и настройки модуля Мокка для CMS OpenCart, который значительно упрощает для партнёра процесс интеграции с сервисом Мокка
Модуль предназначен для установки OpenCart v.3 без значительных изменений.
Установка модуля
- Для того чтобы установить модуль необходимо закачать его архив на ваш сайт. Для этого загрузи модуль Мокка для OpenCart.
-
Заходим в административный развел вашего сайта, раздел «Модули/Расширения –> Установка расширений» (1 на картинке) – нажимаем кнопку «Загрузить» (2 на картинке). Выбираем скачанный предварительно на компьютер файл расширения (модуля) и загружаем его.
После загрузки вы сможете увидеть ваш архив модуля в списке, как тут:
- Далее необходимо обновить модификаторы для добавления изменений, необходимых для работы модуля. Если не обновить модификаторы, то на странице товара пропадёт представление Мокка. Для этого перейдите в раздел «Модули/Расширения –> Модификаторы», находим в списке модификаторов «Мокка – оплата аванса», отмечаем галочку напротив модуля и кликаем кнопку обновить в правом верхнем углу.
- Далее переходим во вкладку «Система» (1) => «Пользователи» (2) => «Группы пользователей» (3)
Выбираем пользователя «Администратор», нажимаем «Редактировать».
В появившемся окне выбираем «Выделить все» (1) - «Выделить все» (1) и «Сохранить» (2)
- Следующий шаг - установка модуля. Для этого переходим на страницу «Модули / Расширения –> Модули / Расширения». В фильтре выбираем «Оплата», список модулей обновится.
В списке модулей находим «Мокка – оплата авансом» и кликаем «Активировать» в столбце «Действия» напротив модуля.
- Готово. Модуль установлен. Далее модуль должен быть корректно настроен.
Настройка модуля
На странице «Модули / Расширения –> Модули / Расширения». В фильтре выбираем «Оплата», список модулей обновится. В списке модулей находим «Мокка – оплата авансом» и кликаем «редактировать» в столбце «Действия» напротив модуля.
* отмечены обязательные поля для заполнения
- Вкладка «Основное»
Значения ниже проставляются исходя из договора:
- минимальная цена товара для отображения оплаты;
- максимальная цена товара для отображения оплаты;
- максимальное кол-во месяцев займа;
- минимальное кол-во месяцев займа.
Остальные поля:
- статус после оформления заказа – укажите статус, в который должен перейти заказ, после успешной оплаты Мокка;
- статус при котором отправлять финализацию заказа – укажите статус вашего магазина, в который переводятся выполненный заказа (товар выдан клиенту)
- статус при котором отправлять отмену заказа – укажите статус, в который должен перейти заказ в случае, если вы получили заказ, но он не может быть выполнен и должен быть отменен до выдачи заказа клиенту;
- возврат финализированного займа – укажите статус вашего магазина, при котором заказ возвращается в полном объеме после выдали клиенту (например в случае гарантийного случая);
- страница с заказами – указать ссылку на страницу «Спасибо за покупку»;
- порядок сортировки – указывается числовое значение, обозначающее порядковый номер отображения типа оплаты Mokka. По умолчанию необходимо ставить 0
- статус – включение/выключение модуля. Переключите значение во «Выключено», что позволить активировать модуль на вашем сайте.
- Вкладка «API»
При установке модуля по умолчанию установлен тестовый режим с тестовыми данными магазина.
Для проведения тестирования и отладки установите значения полей ID Магазина и Секретный ключ. Тестовые данные вам пришлёт проектный менеджер Mokka.
Перед боевым запуском проектный менеджер Mokka пришлёт вам боевые ID Магазина и Секретный ключ
- Вкладка «Виджет»
Здесь находятся настройки виджета на странице товара.
Выберите «Включено» в поле «Статус виджета на странице товара», чтобы активировать отображение битой цены на карточке товара.
В настройке «Цветовая схема», можно выбрать формат отображения «Битой цены» на карточке товара.
-
Вкладка «Ошибки»
По умолчанию рекомендуется активировать запись ошибки в лог. В случае возникновения проблем они помогут быстро локализовать и исправить проблему. Укажите email адрес, на который вы хотите получать отчеты об ошибке.
После произведения настроек кликните «Сохранить» чтобы применить настройки.
После установки и активации модуля на страницах товара должны появиться модуль «Битой цены» и добавиться способ оплаты «Мокка – оплата авансом» в корзине.
Пример «Битой цены» в карточке товара.
Тестирование модуля
Тестирование оформления заказа
- Соберите корзину на минимальную сумму (минимальная сумма заказа зависит от вашего тарифа);
- Перейдите в корзину;
- В способах оплаты выберите "Мокка – оплата авансом";
- Нажмите "Оформить заказ".
- На экране откроется форма ввода данных. Заполните все поля формы. Номер телефона для одобрения на тестовой среде должен соответствовать маске +7 8881xxxxxx;
- Нажмите "Оформить" и введите код подтверждения (на тестовой среде всегда 1111);
- Выберите интересующий вас график платежей и нажмите кнопку “Оплатить авансом”;
- Перейдите в раздел "Заказы" в административной панели OpenCart
- Откройте оформленный ранее заказ нажатием на его ID. Переведите заказ в статус "Выполнен" и нажмите кнопку "Сохранить".
В результате аванс будет выдан. Статус заказа должен измениться на «Оплачен».
- Перейдите в раздел "Заказы" в административной панели OpenCart
- Откройте оформленный ранее заказ нажатием на его ID;
- Переведите заказ в статус «Возврат»;
В результате возврат будет осуществлен.
Активация модуля
После успешной установки модуля и проведения тестирования и отладки на тестовых данных, активируйте модуль, чтобы команда Мокка могла протестировать работоспособность и активировать сервис. Для активации следуйте инструкции:
На странице «Модули / Расширения –> Модули / Расширения». В фильтре выбираем «Оплата», список модулей обновится. В списке модулей находим «Мокка – оплата авансом» и кликаем «редактировать» в столбце «Действия» напротив модуля.
Переходим во вкладку «API» Убираем галочку «Тестовый режим», заменяем значение боевые ID Магазина и Секретный ключ на те, которые сообщит вам команда Мокка. Жмем «Сохранить».
В результате способ оплаты "Мокка – оплата авансом" станет доступен для посетителей вашего сайта.
Свяжитесь с командой интеграции Мокка в integration@mokka.ru или с вашим менджером. Для активации мы проверим все функции и размещенную коммуникацию на соответствие стандартам сервиса.
Обновление модуля
Для обновления модуля переходим на страницу «Модули/Расширения» - «Установка расширений». Жмем загрузить, выбираем нужный архив на компьютере и загружаем.
После загрузки архива нужно обновить модификатор на странице «Модули/Расширения» - «Модификаторы».
Изменения в редакторе шаблона
Для пользователей, использующих редактор шаблона (Дизайн / редактор шаблона), а именно изменяют файл product/product.twig. Необходимо вставить перед кнопкой “Купить” (в коде она может выглядеть так)
<button
type="button"
id="button-cart"
data-loading-text="{{ text_loading }}"
class="btn btn-primary btn-lg btn-block"
>
{{ button_cart }}
</button>
либо там где нужно отобразить кнопку (обычно рядом со стоимостью товара) добавить следующий код:
{% if mokka_status == "1" %}
<br />
{% if mokka_color_scheme == "Mokka_price1" %}
<div class="mokka-price">
<div class="mokka-price__container">
<div class="mokka-price__wrp">
<div class="mokka-price__price reg_mokka">
<p>{{ mokka_left_text }} <strong>{{min_price}}</strong> <span>{{ mokka_right_text }}</span></p>
</div>
<div class="mokka-price__logo reg_mokka">
<svg xmlns="http://www.w3.org/2000/svg" width="88" height="25" viewBox="0 0 88 25">
<use xlink:href="catalog/view/theme/default/image/mokka.svg#title"></use>
</svg>
</div>
<div class="mokka-price__payment">
<span class="reg_mokka">{{mokka_right_text_widget}}</span>
<div class="mokka-price__tooltip">
<button class="mokka-price__tooltip-icon" id="mokka-payment">
<svg class="mokka-price__svg-tooltip" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 29 29">
<use xlink:href="catalog/view/theme/default/image/mokka.svg#tooltip"></use>
</svg>
</button>
</div>
</div>
</div>
</div>
</div>
{% elseif mokka_color_scheme == "Mokka_price2" %}
<div class="mokka-price mokka-price--orange">
<div class="mokka-price__container">
<div class="mokka-price__wrp">
<div class="mokka-price__price reg_mokka">
<p>{{ mokka_left_text }} <strong>{{min_price}}</strong> <span>{{ mokka_right_text }}</span></p>
</div>
<div class="mokka-price__logo reg_mokka">
<svg xmlns="http://www.w3.org/2000/svg" width="88" height="25" viewBox="0 0 88 25">
<use xlink:href="catalog/view/theme/default/image/mokka.svg#title-white"></use>
</svg>
</div>
<div class="mokka-price__payment">
<span class="reg_mokka">{{mokka_right_text_widget}}</span>
<div class="mokka-price__tooltip">
<button class="mokka-price__tooltip-icon" id="mokka-payment">
<svg class="mokka-price__svg-tooltip" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 29 29">
<use xlink:href="catalog/view/theme/default/image/mokka.svg#tooltip-white"></use>
</svg>
</button>
</div>
</div>
</div>
</div>
</div>
{% elseif mokka_color_scheme == "Mokka_price3" %}
<div class="mokka-price mokka-price--black-no-bg">
<div class="mokka-price__container">
<div class="mokka-price__wrp">
<div class="mokka-price__price reg_mokka">
<p>{{ mokka_left_text }} <strong>{{min_price}}</strong> <span>{{ mokka_right_text }}</span></p>
</div>
<div class="mokka-price__logo reg_mokka">
<svg xmlns="http://www.w3.org/2000/svg" width="88" height="25" viewBox="0 0 88 25">
<use xlink:href="catalog/view/theme/default/image/mokka.svg#title-black"></use>
</svg>
</div>
<div class="mokka-price__payment">
<span class="reg_mokka">{{mokka_right_text_widget}}</span>
<div class="mokka-price__tooltip">
<button class="mokka-price__tooltip-icon" id="mokka-payment">
<svg class="mokka-price__svg-tooltip" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 29 29">
<use xlink:href="catalog/view/theme/default/image/mokka.svg#tooltip-black"></use>
</svg>
</button>
</div>
</div>
</div>
</div>
</div>
{% elseif mokka_color_scheme == "Mokka_price4" %}
<div class="mokka-price mokka-price--black">
<div class="mokka-price__container">
<div class="mokka-price__wrp">
<div class="mokka-price__price reg_mokka">
<p>{{ mokka_left_text }} <strong>{{min_price}}</strong> <span>{{ mokka_right_text }}</span></p>
</div>
<div class="mokka-price__logo reg_mokka">
<svg xmlns="http://www.w3.org/2000/svg" width="88" height="25" viewBox="0 0 88 25">
<use xlink:href="catalog/view/theme/default/image/mokka.svg#title-black"></use>
</svg>
</div>
<div class="mokka-price__payment">
<span class="reg_mokka">{{mokka_right_text_widget}}</span>
<div class="mokka-price__tooltip">
<button class="mokka-price__tooltip-icon" id="mokka-payment">
<svg class="mokka-price__svg-tooltip" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 29 29">
<use xlink:href="catalog/view/theme/default/image/mokka.svg#tooltip-black"></use>
</svg>
</button>
</div>
</div>
</div>
</div>
</div>
{% endif %}
{% endif %}
<div class="mokka-popup">
<div class="mokka-payment mokka-popup__popup">
<div class="mokka-payment__container">
<div class="mokka-payment__title">{{title}}</div>
<div class="mokka-payment__description">
<p>{{ mokka_description }}</p>
</div>
<div class="mokka-payment__features">
<div class="mokka-payment__item">
<div class="mokka-payment__item-img">
<img alt="img" src="{{image_1}}">
</div>
<div class="mokka-payment__item-text">
<p>{{text_1}}</p>
</div>
</div>
<div class="mokka-payment__item">
<div class="mokka-payment__item-img">
<img alt="img" src="{{image_2}}">
</div>
<div class="mokka-payment__item-text">
<p>{{text_2}}</p>
</div>
</div>
<div class="mokka-payment__item">
<div class="mokka-payment__item-img">
<img alt="img" src="{{image_3}}">
</div>
<div class="mokka-payment__item-text">
<p>{{text_3}}</p>
</div>
</div>
</div>
<div class="mokka-popup__btn-wrp">
<button class="mokka-popup__btn-close" id="payment-close"></button>
</div>
</div>
</div>
</div>
<script>
$('.reg_mokka').on('click', function() {
$.ajax({
url: 'index.php?route=extension/payment/mokka/registration',
type: 'post',
dataType: 'json',
data: {'link' : window.location.href},
success: function(json) {
if (json['iframe_url']) {
REVO.Form.showPopup(json['iframe_url']);
} else {
$('#Modal_mokka_error').modal();
$('#mokka_error').html(json['message']);
}
}
});
});
</script>
<div class="modal fade" id="Modal_mokka_error" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div id="mokka_error"><div>
</div>
</div>
</div>