Виджеты расчета доставки для сайтов на Opencart

Виджеты расчета стоимости и срока доставки для Opencart. Простое подключение. Техподдержка.

Основные возможности виджетов расчёта доставки для Opencart

  • Расчет стоимости доставки по всем нужным вам службам доставки
  • Вывод пунктов самовывоза / постаматов для всех транспортных компаний на одной карте
  • Возможность оформления и онлайн оплаты заказа, с получением заявки на электронную почту или в вашу систему ведения заказов
  • Собственная корзина с расчётом доставки и онлайн оплатой заказов, работающая без включения функционала корзины OpenCart

Демонстрационный сайт: opencart.eshoplogistic.ru

Установка виджетов на сайт, созданный в OpenCart

Порядок подключения

1 Выберите нужный виджет

Доступно 5 вариантов виджетов:

2 Зарегистрируйтесь в личном кабинете eShopLogistic

3 Создайте ключ доступа и добавьте нужные транспортные компании

4 Установите виджет на сайт OpenCart

Для этого дайте вашему техническому специалисту доступ к личному кабинету и ссылку на документацию по установке виджетов. При наличии технических вопросов он сможет написать нам в поддержку (создать обращение из вашего личного кабинета).

Для установки виджета на страницу OpenCart добавьте html-код в нужное место шаблона:

Вставка виджета на страницу OpenCart
  • Для виджета №1
    <div id="eShopLogisticWidgetForm" data-lazy-load="false" data-key="000000-0-0"></div>
    <script src="https://api.esplc.ru/widgets/form/app.js"></script>
  • Для виджета №2
    <div id="eShopLogisticWidgetFormOrder" data-key="000000-0-0" data-lazy-load="false" data-weight="1"></div>
    <script src="https://api.esplc.ru/widgets/form-order/app.js"></script>
  • Для виджета №3
    <button data-esl-widget data-title="Быстрый заказ с доставкой">Стоимость и срок доставки</button>
    <div id="eShopLogisticWidgetModal" data-lazy-load="true" data-weight="1"></div>
    <script src="https://api.esplc.ru/widgets/modal/app.js"></script>
  • Для виджета №4
    <div id="eShopLogisticWidgetBlock" data-lazy-load="false" data-key="000000-0-0" data-weight="1"></div>
    <script src="https://api.esplc.ru/widgets/block/app.js"></script>
  • Для виджета №5
    <button data-esl-widget-cart
        data-offers='[{ "article":"001","name":"Наушники","count":1,"price":6500,"weight":1,"image":"https://eshoplogistic.ru/files/demo/headphones.jpg" }]'>
        Заказать с доставкой
    </button>
    <div id="eShopLogisticWidgetCartModule" data-lazy-load="false" data-key="000000-0-0"></div>
    <script src="https://api.esplc.ru/widgets/cart-module/app.js"></script>
  • Для виджета №6
    
    <div id="eShopLogisticWidgetTerminals" data-lazy-load="false" data-key="000000-0-0"></div>
    <script src="https://api.esplc.ru/widgets/terminals/app.js"></script>
    <script>document.addEventListener('DOMContentLoaded', () => {
        document.getElementById('eShopLogisticWidgetTerminals').dispatchEvent(new CustomEvent('eShopLogisticWidgetTerminals:loadApp'))
    })</script>

Описание атрибутов:

Параметр Описание
data-key Ключ виджета. Указывается на вкладке «Подключение на сайте».
data-lazy-load Включение или отключение автозагрузки виджета.
Если значение data-lazy-load="true", то виджет не будет автоматически загружен при открытии страницы в браузере. Для запуска виджета необходимо будет использовать какое-то событие, например клик по кнопке.
Рекомендуется устанавливать значение true, если страница имеет высокую посещаемость (особенно ботами), чтобы не создавать лишние запросы к сервису.
Подробнее смотрите в документации к выбранному виджету.
data-weight Вес груза в килограммах
data-dimensions Габариты в формате Д*Ш*В, в сантиметрах
data-price Стоимость груза в рублях.
Важно указывать, если в расчёт тосимости включена страховка или настроены корректирующие правила в зависимости от стоимости.

Атрибуты, отмеченные , - обязательны.

Расчёт доставки для нескольких товаров

Для включения в расчёт доставки нескольких товаров, используйте атрибут data-offers.
Этот атрибут представляет собой строку в формате JSON и заменяет атрибуты data-weight, data-price, data-dimensions. Пример:

<div id="eShopLogisticWidgetBlock"
    data-lazy-load="false"
    data-key="000000-0-0"
    data-offers='[{ "article":91,"name":"Радиотелефон Siemens","count":1,"price":3450,"weight":1 }, { "article":92,"name":"Наушники Sony","count":1,"price":8600,"weight":0.8 }]'>
</div>
<script src="https://api.esplc.ru/widgets/block/app.js"></script>