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

Введение

В документе описан процесс установки и настройки модуля Мокка для 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 %}

И перед {{ 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>