Skip to content

Настройка 2.0

Jump to bottom
Alex Vi edited this page May 3, 2024 · 1 revision

На данной странице описаны все возможные настройки 2 виджета для его адаптации под конкретный магазин.

Caution

2 версия виджета объявлена устаревшей 13.09.2023, в нее не будут вноситься изменения или улучшения, рекомендуется мигрировать на 3 версию

Процесс миграции описан на странице Миграция 3.0

Пример создания виджета с указанием всех настроек

<script type="text/javascript">
  var widjet = new ISDEKWidjet({
                                 showWarns: true,
                                 showErrors: true,
                                 showLogs: true,
                                 hideMessages: false,
                                 path: 'https://cdn.jsdelivr.net/gh/cdek-it/widget@2/widget/scripts/',
                                 servicepath: 'http://yoursite.net/service.php', //ссылка на файл service.php на вашем сайте
                                 templatepath: 'http://yoursite.net/template.php',
                                 choose: true,
                                 popup: true,
                                 country: 'Россия',
                                 defaultCity: 'Уфа',
                                 cityFrom: 'Омск',
                                 link: null,
                                 hidedress: true,
                                 hidecash: true,
                                 hidedelt: false,
                                 detailAddress: true,
                                 region: true,
                                 apikey: 'API-key Yandex.MAP’,
                                 goods: [
                                   {
                                     length: 10,
                                     width: 10,
                                     height: 10,
                                     weight: 1
                                   }],
                                 onReady: onReady,
                                 onChoose: onChoose,
                                 onChooseProfile: onChooseProfile,
                                 onChooseAddress: onChooseAddress,
                                 onCalculate: onCalculate
                               });

  function onReady() {
    alert('Виджет загружен');
  }

  function onChoose(wat) {
    alert(
      'Выбран пункт выдачи заказа ' + wat.id + "\n" +
      'цена ' + wat.price + "\n" +
      'срок ' + wat.term + " дн.\n" +
      'город ' + wat.cityName + ', код города ' + wat.city
    );
  }

  function onChooseProfile(wat) {
    alert(
      'Выбрана доставка курьером в город ' + wat.cityName + ', код города ' + wat.city + "\n" +
      'цена ' + wat.price + "\n" +
      'срок ' + wat.term + ' дн.'
    );
  }

  function onChooseAddress(wat) {
    alert(
      'Выбрана доставка курьером по адресу ‘ + wat.address + ”, \n “ + 
    'цена ' + wat.price + "\n" +
    'срок ' + wat.term + ' дн.'
  )

  }

  function onCalculate(wat) {
    alert('Расчет стоимости доставки произведен');
  }
</script>

Описание серверных настроек виджета

showWarns

Значения: true / false

Значение по умолчанию: true

Если установлено true – выводит в консоль браузера предупреждения о некритичных ошибках работы виджета.

showErrors

Значения: true / false

Значение по умолчанию: true

Если установлено true – выводит в консоль браузера предупреждения о критических ошибках работы виджета.

showLogs

Значения: true / false

Значение по умолчанию: true

Если установлено true – выводит в консоль браузера информацию обо всех стадиях работы виджета: запросы, ответы, подключение.

hideMessages

Значения: true / false

Значение по умолчанию: false

Единый ключ для отключения всех оповещений модуля. Выставление в true равносильно выставлению всех вышеуказанных настроек оповещения в false.

path

Значения: string

Значение по умолчанию: директория scripts относительно файла widjet.js. Таким образом, если у вас файл widjet.js расположен по адресу http://yoursite.net/scripts/widget/widjet.js, то переменная будет указывать на адрес http://yoursite.net/scripts/widget/scripts/

Путь к скриптам виджета, если они лежат отдельно от загрузчика (widjet.js).

templatepath

Значения: string

Значение по умолчанию: {path}/template.php

Путь к шаблону виджета, если он лежит отдельно от загрузчика (widjet.js).

servicepath

Значения: string

Значение по умолчанию: {path}/service.php

Путь к php файлу для расчетов виджета, если он лежит отдельно от загрузчика (widjet.js).

apikey

Значения: string

Значение по умолчанию: 9720c798-730b-4af9-898a-937b264afcdd

АПИ-ключ для сервиса Яндекс.Карт. По ссылке ниже рекомендуется сгенерировать новый ключ для вашего сайта. Иначе могут появиться ошибки 429 Too Many Requests. https://tech.yandex.ru/maps/jsapi/doc/2.1/quick-start/index-docpage/#get-api-key

Important

Рекомендуем зарегистрировать ваш АПИ-ключ для Яндекс.Карт, чтобы виджет на вашем сайте работал только с вашими ключами и ограничения бесплатных ключей распространялось только на ваш сайт.

Описание настроек отображения виджета

choose

Значения: true / false

Значение по умолчанию: true

Управление кнопкой «Выбрать» в описании ПВЗ. Если выставлено в false – кнопка не будет отображаться, что подходит для инфовиджета в разделе «Доставка». Если true – кнопка показывается с возможностью подписаться на выбор ПВЗ с помощью события onChoose.

link

Значения: id элемента

Значение по умолчанию: false

Если опция задана (не false) – то виджет считается статичным (всегда располагается на странице). Значением опции должен быть id того тега, в который будет помещен виджет. Если опция не задана – виджет автоматически открывается на весь экран (если не указана опция popup).

popup

Значения: true/false

Значение по умолчанию: false Если опция задана (true) – виджет считается всплывающим, и отображается только через метод open.

hidedress

Значения: true/false

Значение по умолчанию: false

Если опция задана (true) – скрывает фильтр пунктов выдачи заказов с опцией примерки. Т.е. убирает кнопку с этим фильтром и отображаются все пункты выдачи для указанного города.

hidecash

Значения: true/false

Значение по умолчанию: false

Если опция задана (true) – скрывает фильтр ПВЗ с возможностью расчета картой. Виджет ПВЗ будет отображен без кнопки оплата картой.

hidedelt

Значения: true/false

Значение по умолчанию: false

Если опция задана (true) – то скрывается панель, на которой отображены варианты доставки.

region

Значения: true/false

Значение по умолчанию: false

Если опция задана (true) – то отображаются пункты выдачи заказов для всего региона. Для Москвы и Московской области, а также для Санкт-Петербурга и Ленинградской области отображаются пункты выдачи из города и области. Таким образом, если выбрать город Гатчина (Ленинградская область), то отобразится ПВЗ в городе Гатчина, а также на карте будут отображены пункты выдачи из всей Ленинградской области и Санкт-Петербурга. При этом если выбрать ПВЗ другого города ( Санкт-Петербург, например), то стоимость доставки будет пересчитана.

detailAddress

Значения: true/false

Значение по умолчанию: false Если опция задана (true) – то после выбора курьерской доставки имеется возможность указать точный адрес доставки.

Настройки доставки

defaultCity

Значения: название города, также разрешено использование параметра ‘auto’, чтобы автоматически определить город клиента средствами Яндекса и отобразить его на карте. Можно использовать внутренний идентификатор города в СДЭК, число.

Значение по умолчанию: Москва

Город, который будет отображен на карте при старте виджета и на котором будут загружены пункты выдачи заказов. Важно. При использовании параметра country город должен быть в этой стране. Важно. При использовании параметра lang название города должно быть указано на том языке, который указан в параметре lang. Так для английского перевода необходимо указывать Moscow, Astana и т.д..

lang

Значения: "rus" или "eng".

Значение по умолчанию: "rus"

Какой язык перевода использовать в виджете, сейчас можно выбирать только русский и ангийский.

currency

Значения: код валюты ISO 4217 из списка RUB, KZT, USD, EUR, GBP, CNY, BYN, UAH, KGS, AMD, TRY, THB, KRW, AED, UZS, MNT

Значение по умолчанию: ‘RUB’

country

Значения: название страны (Россия, Китай (КНР), Казахстан и т.д.)

Значение по умолчанию: all Страна, для которой выбираются города и ПВЗ. Важно. При использовании параметра lang название страны должно быть указано на том языке, который указан в параметре lang. Так для английского перевода необходимо указывать Russia, Kazakhstan и т.д..

cityFrom

Значения: название города

Значение по умолчанию: Москва

Город, откуда будет совершаться доставка. Важно. При использовании параметра country город должен быть в этой стране.

goods

Значения: [{length:<длина груза >, width: <ширина груза >, height: <высота груза >, weight: <вес груза>}]

Массив отсылаемых грузов. Размеры задаются в сантиметрах (см), вес – в килограммах (кг).

Пример указания габаритов посылки со следующими характеристиками: длина 25 см, ширина 17 см, высота 7 см, вес 6 килограмм.

goods: [
    {
        length: 25,
        width: 17,
        height: 7,
        weight: 6
    }]

События виджета

В процессе работы виджета возникает 4 типа событий, на которые можно подписать функцию-обработчик, чтобы позволить получать данные из виджета: загрузка виджета, расчет доставки и выбор ПВЗ.

Загрузка виджета (onReady)

Событие срабатывает, когда виджет загрузил все стили, скрипты, карты, а также – информацию о городах и пунктах выдачи заказов. Оно означает, что уже можно пользоваться методами виджета. Учтите, что html и разметка карт на этом моменте еще могут не подгрузиться.

В событии нет никаких передаваемых параметров.

Для работы с этим событием необходимо в параметре указать название функции-обработчика и описать выполнение этой функции:

<script type="text/javascript">
  var widjet = new ISDEKWidjet({
                                 defaultCity: 'Омск',
                                 cityFrom: 'Уфа',
                                 country: 'Россия',
                                 link: 'forpvz',
                                 onReady: startWidget
                               });

  function startWidget() {
    alert('Виджет загружен');
  }
</script>

Расчет доставки (onCalculate)

Событие срабатывает, когда виджет получает данные о стоимости и сроках доставки. Событие передает в функцию-обработчик объект вида: { profiles: <объект профилей>, city: <код города из базы СДЭК>, cityName: <текущий город>}.

Объект профилей: <профиль (courier/pickup)> :{price: <цена>, currency: <валюта>, term: <срок>, tariff: <рассчитанный тариф>}.

Вот пример для такого объекта в формате JSON:

{
  "city": "270",
  "cityName": "Новосибирск",
  "profiles": {
    "courier": {
      "price": "1150",
      "currency": "RUB",
      "term": "2-3",
      "tarif": 11
    },
    "pickup": {
      "price": "600",
      "currency": "RUB",
      "term": "3-4",
      "tarif": 62
    }
  }
}

Для создания обработчика можно использовать следующий код:

<script type="text/javascript">
  var widjet = new ISDEKWidjet({
                                 defaultCity: 'auto',
                                 cityFrom: 'Уфа',
                                 country: 'Россия',
                                 link: 'forpvz',
                                 onCalculate: function(wat) {
                                   alert('Доставка в город ' + wat.cityName +
                                           "\nкурьером: " + wat.profiles.courier.price + ' (тариф ' +
                                           wat.profiles.courier.tarif +
                                           ")\nдо ПВЗ: " + wat.profiles.pickup.price + ' (тариф ' +
                                           wat.profiles.pickup.tarif + ')'
                                   );
                                   console.log('Расчет доставки ', wat);
                                 }
                               });
</script>

В данном примере при каждом расчете доставки будет выводиться сообщение о стоимости доставки в выбранный город с указанием выбранного тарифа, а также в консоль браузера будет выводиться текст “Расчет доставки” и содержимое объекта с параметрами доставки.

Выбор ПВЗ (onChoose)

Событие возникает, когда покупатель выбирает ПВЗ кнопкой «Выбрать» в подробном описании ПВЗ.

Событие передает в функцию-обработчик массив вида {id: <id выбранного ПВЗ>, PVZ: <информация о ПВЗ>, price: <стоимость доставки>, currency: <валюта стоимости доставки>, term: <срок доставки>, tariff: <рассчитанный тариф>, city: <выбранный город>}

Пример объекта в формате JSON:

{
  "id": "NSK41",
  "city": "270",
  "cityName": "Новосибирск",
  "price": "1150",
  "currency": "RUB",
  "term": "3-4",
  "tarif": 62,
  "PVZ": {
    "Name": "Кольцово",
    "WorkTime": "Пн-Пт 10:00-19:00, Сб 10:00-16:00",
    "Address": "р.п. Кольцово, 18А",
    "Phone": "+79639494987, +79833160261",
    "Note": "",
    "cX": "83.1851620",
    "cY": "54.9422560"
  }
}

Для формирования обработчика этого события можно использовать следующий код:

<script type="text/javascript">
  var widjet = new ISDEKWidjet({
                                 defaultCity: 'auto',
                                 cityFrom: 'Уфа',
                                 country: 'Россия',
                                 link: 'forpvz'
                               });

  widjet.binders.add(choosePVZ, 'onChoose');

  function choosePVZ(wat) {
    alert('Доставка в город ' + wat.cityName +
            "\nдо ПВЗ с кодом: " + wat.id + ', цена ' + wat.price + ' руб.'
    );
    console.log('Выбран ПВЗ ', wat);
  }
</script>

В данном примере при выборе ПВЗ (кнопка выбора ПВЗ должна отображаться, т.е. параметр choose=true) выводится сообщение, в котором указан город, код пункта выдачи заказов и стоимость доставки, а также в консоли браузера отобразится сообщение с текстом и объектом с параметрами доставки.

Выбор профиля доставки (Курьер) (onChooseProfile)

Событие возникает, когда покупатель выбирает доставку курьером для определённого города

Событие передает в функцию-обработчик массив вида {id: <courier>, price: <стоимость доставки>, currency: <валюта доставки>, term: <срок доставки>, tariff: <рассчитанный тариф>, city: <выбранный город>, cityName: <название выбранного города>}

Пример объекта, который передается в функцию, в формате JSON:

{
  "id": "courier",
  "city": "270",
  "cityName": "Новосибирск",
  "price": "1150",
  "currency": "RUB",
  "term": "2-3",
  "tarif": 11
}

Ниже указан пример создания обработчика для этого события. В примере выводится сообщение, в котором указан город, срок доставки заказов и стоимость доставки, а также в консоли браузера отобразится сообщение с текстом и объектом с параметрами доставки.

<script type="text/javascript">
  var widjet = new ISDEKWidjet({
                                 defaultCity: 'auto',
                                 cityFrom: 'Уфа',
                                 country: 'Россия',
                                 link: 'forpvz',
                                 hidedress: true,
                                 hidecash: true,
                                 onChooseProfile: onChooseProfile
                               });

  function onChooseProfile(wat) {
    alert('Выбрана доставка курьером в город ' + wat.cityName + "\n" +
            'цена ' + wat.price + "\n" +
            'срок ' + wat.term + ' дн.'
    );
    console.log('Выбрана доставка курьером ', wat);
  }
</script>

Выбор точного адреса доставки (Курьер) (onChooseAddress)

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

Событие передает в функцию-обработчик массив вида {id: <courier>, price: <стоимость доставки>, currency: <валюта доставки>, term: <срок доставки>, tariff: <рассчитанный тариф>, city: <выбранный город>, cityName: <название выбранного города>, address: <выбранный адрес доставки>}

Пример объекта, который передается в функцию, в формате JSON:

{
  "id": "courier",
  "city": "270",
  "cityName": "Новосибирск",
  "price": "1150",
  "currency": "RUB",
  "term": "2-3",
  "tarif": 11,
  "address": "Россия, Новосибирск, Большевистская улица, 101"
}

Ниже указан пример создания обработчика для этого события. В примере выводится сообщение, в котором указан адрес, срок доставки заказов и стоимость доставки, а также в консоли браузера отобразится сообщение с текстом и объектом с параметрами доставки.

<script type="text/javascript">
  var widjet = new ISDEKWidjet({
                                 defaultCity: 'auto',
                                 cityFrom: 'Уфа',
                                 country: 'Россия',
                                 link: 'forpvz',
                                 hidedress: true,
                                 hidecash: true,
                                 detailAddress: true,
                                 onChooseAddress: onChooseAddress
                               });

  function onChooseAddress(wat) {
    alert('Выбрана доставка курьером по адресу ' + wat.address + "\n" +
            'цена ' + wat.price + "\n" +
            'срок ' + wat.term + ' дн.'
    );
    console.log('Выбрана доставка курьером по точному адресу ', wat);
  }
</script>

Методы виджета

Операции с городами

city.get()

Возвращает идентификатор текущего города, который отображен на карте.

city.set(city)

Устанавливает текущим город city. В качестве параметра может принимать как название города, так и идентификатор.

city.check(city)

Проверяет, доступен ли город city и возвращает его идентификатор в случае успеха.

Операции с посылками

Для установки товара / посылки требование к передаваемому объекту (params) едины:

  • length – длина груза (см),
  • width – ширина груза (см),
  • height – высота груза (см),
  • weight – вес груза (кг)

сargo.add (params)

Добавляет к посылке груз с указанными параметрами (params), не обнуляя ее. Автоматически будет выполнен перерасчет стоимости.

cargo.get()

Возвращает данные о грузах (все имеющиеся поля) в виде объекта, описание формата которого в JSON выглядит следующим образом:

{
  "0": {
    "length": "15",
    "width": "10",
    "height": "10",
    "weight": "0.4"
  },
  "1": {
    "length": "25",
    "width": "7",
    "height": "17",
    "weight": "2.4"
  }
}

cargo.reset()

Сбрасывает все данных о грузах.

Визуальная часть

open()

Отображает виджет, если он находится во «всплывающем» режиме (не задана опция link и опция popup=true).

close()

Закрывает виджет, если он находится во «всплывающем» режиме (не задана опция link и опция popup=true).

Виджет доставки CDEK • Пример работы • Заключить договор • Рассчитать стоимость отправления

Clone this wiki locally