OpenCart – Справочный центр

Введение

В документе описан процесс установки и настройки плагина Мокка для CMS OpenCart, который значительно упрощает для партнёра процесс интеграции с сервисом Мокка.

Модуль предназначен для установки OpenCart v.3 без значительных изменений.

Установка

Плагин можно установить через панель администратора вручную, с помощью переноса файлов модуля на сервер. Загрузите модуль Мокка для OpenCart, перед началом выполнения инструкции.

Скачайте файл с модулем Мокка для OpenCart.
Зайдите в административный раздел вашего сайта, раздел "Модули/Расширения" –> "Установка расширений".
Нажимите "Загрузить" и выберите ранее скаченный файл.
*После загрузки вы сможете увидеть ваш архив модуля в списке:
Перейдите в раздел "Модули/Расширения" –> "Модификаторы".
Найдите в списке модификаторов "Мокка – оплата аванса" и поставьте галочку напротив модуля.
Нажмите кнопку обновить в правом верхнем углу.
Далее перейдите во вкладку "Система" -> "Пользователи" -> "Группы пользователей".
Выберите пользователя "Администратор" и нажмите "Редактировать".
В появившемся окне выберите "Выделить все" и нажмите "Сохранить".
Откройте во вкладку "Модули/Расширения" –> "Установка расширений". В фильтре выберите "Оплата", список модулей обновится.
В списке модулей найдите "Мокка – оплата авансом" и нажмите "Активировать" в столбце "Действия" напротив модуля.

Настройка

Откройте страницу "Модули/Расширения"
В фильтре выберите "Оплата"
Найдите в списке Мокка – оплата авансом", затем нажмите редактировать напротив модуля.
У вас откроется вкладка "Основное"
Значения проставляются в соответствии с вашим договором:
- Минимальная цена товара для отображения оплаты.
- Максимальная цена товара для отображения оплаты.
- Максимальное кол-во месяцев займа.
- Минимальное кол-во месяцев займа.
Остальные поля:
- Страница заказов - ссылка на страницу заказов в панели администрирования. Генерируется автоматически и не предполагает редактирования.
- Статус при котором отправлять отмену заказа - статус заказа, который отправляет в сервис Мокка информацию об отмене заказа.
- Статус при котором отправлять финализацию заказа – статус заказа, при котором в сервис Мокка будет передана информация о финализации заказа. Обычно это статус, который проставляется после отгрузки или доставки заказа клиенту.
- Статус после оформления заказа - статус заказа, применяемый к заказу после оформления, по которому еще не пришло решение Мокка, или клиент не закончил оформление.
- Возврат финализированного займа - статус заказа, который отправляет в сервис Мокка информацию о возврате заказа.
- Порядок сортировки – указывается числовое значение, обозначающее порядковый номер отображения типа оплаты Mokka. По умолчанию необходимо ставить 0.
- Cтатус – состояние модуля.
- Максимальная доля заказа для оплаты частями, % – процент суммы, которую клиент сможет оплатить с помощью Мокка (по умолчанию, 100%).
Перейдите во вкладку "API"
- Тестовый режим - активировать только на период тестирования и отладки. При боевом запуске снять.
- ID магазина и Секретный ключ (тестовый режим) - выдаётся сотрудником Мокка для проведения предварительных тестов. Требуется, если активирован тестовый режим.
- ID магазина и Секретный ключ - выдаётся сотрудником Мокка.
Перейдите во вкладку "Виджет"
- Статус виджета на странице товара - состояние модуля.
- Цветовая схема - позволяет выбрать шаблон отображения виджета сервиса Mokka.
Перейдите во вкладку "Ошибки"
- По умолчанию рекомендуется активировать запись ошибок в лог. В случае возникновения проблем они помогут быстро локализовать и исправить проблему.
- Укажите email адрес, на который вы хотите получать отчеты об ошибках.
После произведения настроек кликните "Сохранить" чтобы применить настройки.
После установки и активации модуля на страницах товара должны появиться виджет "Битой цены" и добавиться способ оплаты "Мокка – оплата авансом" в корзине.

Редактор шаблонов

Для пользователей, использующих редактор шаблона (Дизайн / редактор шаблона), а именно изменяют файл 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 %}

И перед {{ footer }} добавить

<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>

Маркетинговые коммуникации

Баннер Мокка на главной странице

Выбрать из доступных шаблонов баннер с максимальным сроком выплаты аванса по вашему тарифу. Например, если ваш тариф подразумевает авансы на 3 и 6 месяцев, то нужно выбрать баннер со значением 6 месяцев (максимальный срок можно уточнить у вашего менеджера).
Выделить выбранный баннер и нажать кнопку "Export" в правом верхнем углу экрана;
В открывшемся окне выбрать подходящий формат и размер баннера;
Нажать кнопку "Export".
Баннер должен быть размещен на главной странице вашего сайта. При щелчке на баннер необходимо реализовать переход по ссылке на лендинг.

Размещение логотипа Мокка в платежных системах

Скачать логотип Мокка по ссылке;
Выбрать подходящий шаблон отображения логотипов платежных систем;
Вставить в шаблон следующий код (может быть изменен в зависимости от реализации верстки):
```
<img class="mokka" src="ПУТЬ К ЛОГОТИПУ">
```
В результате логотип Мокка будет отображен среди доступных платежных систем.

Размещение описания Мокка в Способах оплаты

Описание сервиса Мокка должно присутствовать в разделе "Доставка и оплата" и "FAQ" (если такие разделы есть) для того, чтобы посетители сайта имели возможность ознакомиться с сервисом. Текст описания должен быть взят из прототипа.

Тестирование

Оформления заказа

Соберите корзину на минимальную сумму.
Перейдите в корзину.
В способах оплаты выберите "Мокка – оплата авансом".
Нажмите "Оформить заказ".
На экране откроется форма ввода данных. Заполните все поля формы. Номер телефона для одобрения на тестовой среде должен соответствовать маске +7 8881xxxxxx.
Нажмите "Оформить" и введите код подтверждения (на тестовой среде всегда 1111).
Выберите интересующий вас график платежей и нажмите кнопку “Оплатить авансом”.

Выполнен

Перейдите в раздел "Заказы" в административной панели OpenCart.
Откройте оформленный ранее заказ нажатием на его ID.
Переведите заказ в статус "Выполнен".
Нажмите "Сохранить"

В результате заказ будет выполнен.

Отмена/Возврат

Перейдите в раздел "Заказы" в административной панели OpenCart.
Откройте оформленный ранее заказ нажатием на его ID.
Переведите заказ в статус "Возврат".

В результате возврат будет осуществлен.

Активация

После успешной установки модуля и отладки на тестовых данных, активируйте плагин, чтобы команда Мокка могла протестировать работоспособность и активировать сервис. Для активации следуйте инструкции:

Откройте страницу "Модули/Расширения"
В фильтре выберите "Оплата"
Найдите в списке Мокка – оплата авансом", затем нажмите редактировать напротив модуля.
Замените значения "боевые ID Магазина" и "Секретный ключ" на те, которые сообщит вам команда Мокка.
Затем уберите галочку "Тестовый режим".
Нажмите "Сохранить".

В результате способ оплаты "Мокка – оплата авансом" станет доступен для посетителей вашего сайта.

Свяжитесь с командой интеграции Мокка в integration@mokka.ru или с вашим менеджером. Для активации мы проверим все функции и размещенную коммуникацию на соответствие стандартам сервиса.

Обновление

Откройте страницу "Модули/Расширения" - "Установка расширений".
Нажмите загрузить и выберите архив с новой версией.
После загрузки архива нужно обновить модификатор на странице "Модули/Расширения" –> "Модификаторы".

Удаление