Виджет для выбора пункта выдачи по РФ

Виджет служит для выбора покупателем интернет-магазина удобного для него пункта выдачи.
Можно также показывать стоимость выдачи заказа в ПВЗ.

Пример выбора способа доставки и пункта выдачи

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

Ваш заказ:

МАГРИТТ РЕНЕ "16 сентября"
1 х 899,00 руб.

ВЕТТРИАНО ДЖЕК "301.1.129"
1 х 1381,00 руб.

Шаг 1. Контактные данные
Шаг 2. Адрес доставки
Шаг 3. Способ доставки




Шаг 4. Способ оплаты

Инструкция для вставки виджета на свой сайт

// 1. Вставьте код и ссылку для открытия виджета:
<script src="//glavpunkt.ru/js/punkts-widget/glavpunkt.js"></script>

<a href="#" onclick="glavpunkt.openMap(selectPunkt); return false;">
  Выбрать пункт выдачи на карте
</a>

// 2. Определите свою функцию для обработки выбранного пункта:
<script>
  function selectPunkt(punktInfo) {
    console.log("Город: " + punktInfo.city);
    console.log("ID пункта выдачи: " + punktInfo.id);
    console.log("Название (метро или адрес): " + punktInfo.name);
    console.log("Адрес: " + punktInfo.address);
    console.log("Телефон: " + punktInfo.phone);
    console.log("Email (только для Санкт-Петербурга): " + punktInfo.email);
    console.log("График работы: " + punktInfo.work_time);
  }
</script>

Еще примеры подключения виджета вы найдете внизу страницы.

Параметры инициализации виджета

Без дополнительных параметров виджет откроется с пунктами Санкт-Петербурга. Вы можете настроить город по-умолчанию, а также другие параметры виджета в соответствие со своими пожеланиями. Для этого, в функцию glavpunkt.openMap вторым параметром необходимо передать объект с настройками:

glavpunkt.openMap(selectPunkt, { ... });

Список городов в формате xlsx

Список всех доступных параметров представлен в таблице ниже. Внизу страницы вы найдете готовые рецепты по использованию виджета.

Имя параметра Тип Пример Описание
onlyCity String
'Воронеж' или 'VRN'
В виджете будут отображены ПВЗ только одного города.
onlyCities Array
['Воронеж', 'Санкт-Петербург'] или ['VRN', 'SPB']
В виджете будут отображены ПВЗ только указанных городов
defaultCity String
'Воронеж' или 'VRN'
В виджете будет открыт Воронеж по-умолчанию
excludeCities Array
['Воронеж'] или ['VRN']
В виджете не будет возможности выбрать ПВЗ Воронежа
excludePvzs Array
['Akademicheskaya-N17k2']
Позволяет исключить определенный ПВЗ из списка. Указывать город для использования этого параметра не требуется. Список пунктов в формате xlsx.
calcParams Object
{
  cityFrom: 'SPB',     // Город отправки
  weight: 1,           // Вес заказа
  price: 1000,         // Стоимость
  paymentType: 'cash', // Способ оплаты
  // Ф-ция обратного вызова для управления
  // стоимостью доставки (см рецепт №3)
  onCalcCallback : updateTarifInfo,
  // Пользовательские параметры расчета,
  // для использования в ф-ции обратного вызова
  extraParams: {}
}
Рассчитать и показать стоимость доставки в окне с информацией о пункте. Все поля, кроме onCalcCallback, обязательны для заполнения.
Подробнее о параметрах расчета см. документацию API.
Подробнее о колбэке и extraParams для управления тарифом в рецепте №3.
showTarif Boolean
true
Отображать тариф за доставку по РФ в окне с информацией о пункте. Не имеет смысла, если используется опция calcParams
disableDperiod Boolean
true
Не отображать интервал доставки в окне с информацией о пункте
disableSelectBtn Boolean
true
Не отображать кнопку "Выбрать" в окне с информацией о пункте. Внимание! С этим параметром выбрать пункт станет невозможно.
addToDperiod Number
1
Увеличить интервал доставки на указанное кол-во дней

Функции, вызываемые после инициализации виджета

Удалить объект виджета, чтобы проинициализировать его с другими параметрами:

glavpunkt.destroy();


Рецепт №1

Задача: открыть карту с отображением Москвы по-умолчанию, без города "Воронеж" и с увеличением базового срока доставки на 2 дня.

<a href="#" onclick="glavpunkt.openMap(selectPunkt1, {
  defaultCity: 'MSK',
  excludeCities: ['VRN'],
  addToDperiod: 2
}); return false;">
  Выбрать пункт выдачи на карте
</a>

Результат: Выбрать пункт выдачи на карте

Рецепт №2

Задача: открыть карту только с пунктами Нижнего Новгорода и показать в окне с информацией о пункте стоимость доставки.

<a href="#" onclick="glavpunkt.openMap(selectPunkt2, {
  onlyCities: ['NN'],
  calcParams: {
    cityFrom: 'SPB',
    weight: 1,
    price: 1000,
    paymentType: 'cash'
  }
}); return false;">
  Выбрать пункт выдачи на карте
</a>

Результат: Выбрать пункт выдачи на карте

Рецепт №3

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

<script>
  jQuery(document).ready(function () {
    jQuery('#d3OpenWidgetLink').on('click', function (e) {
      var form = jQuery("#d3Form");
      var price = parseFloat(form.find('input[name=d3_price]').val());
      var weight = parseFloat(form.find('input[name=d3_weight]').val());
      var paymentType = form.find('select[name=d3_isPrepaid]').val();
      var cityFrom = form.find('input[name=d3_cityFrom]').val();

      if (!price || !weight || !paymentType) {
        alert("Укажите все параметры стоимости заказа");
        return false;
      }

      // Если виджет уже был открыт с другими параметрами, их надо сбросить
      glavpunkt.destroy();

      glavpunkt.openMap(selectPunkt3, {calcParams: {
        cityFrom: cityFrom,
        weight: weight,
        price: price,
        paymentType: paymentType,
        onCalcCallback : updateTarifInfo,
        extraParams: {
          myParam: 10
        }
      }});

      return false;
    })
  });

  /**
   * Обработчик onCalcCallback: вызывается после выполнения расчета стоимости, перед
   * отображением тарифа. С его помощью можно повлиять на тариф, добавить скидку или наценку.
   * ОСОБЕННОСТЬ: данный обработчик выполняется внутри страницы iframe, содержащей карту
   * и список пунктов, а не в контексте страницы оформления заказа.
   *
   * @param {object} tarifInfo - Параметры рассчитанного тарифа. Пример:
   *    cityFrom: "Санкт-Петербург" // Исходный город
   *    cityTo: "Санкт-Петербург"   // Город ПВЗ
   *    paymentType: "cash"         // Способ оплаты
   *    period: 1      // Срок доставки до ПВЗ
   *    price: 1000    // Стоимость заказа
   *    result: "ok"   // Результат операции
   *    serv: "выдача" // Услуга Главпункт
   *    tarif: 109     // Стоимость доставки
   *    weight: 1.5    // Вес заказа
   * @param {object} extraParams - Пользовательские параметры. Передаются полем extraParams объекта calcParams
   */
  function updateTarifInfo(tarifInfo, extraParams) {
    if (tarifInfo.price > 5000 && 'Санкт-Петербург' == tarifInfo.cityTo) {
      // Для заказов дороже 5000, выдаваемых в Спб, скидка 50р с тарифа на доставку до ПВЗ
      tarifInfo.tarif -= 50;
    }

    if (extraParams.myParam == 10) {
      // Демонстрация использования пользовательских параметров
      tarifInfo.tarif += 10;
    }

    return tarifInfo;
  }

  function selectPunkt(punktInfo) {
    console.log("Город: " + punktInfo.city);
    console.log("ID пункта выдачи: " + punktInfo.id);
    console.log("Название (метро или адрес): " + punktInfo.name);
    console.log("ID пункта выдачи: " + punktInfo.address);
    console.log("Телефон: " + punktInfo.phone);
    console.log("Email (только для Санкт-Петербурга): " + punktInfo.email);
    console.log("График работы: " + punktInfo.work_time);
    console.log("Стоимость доставки: " + punktInfo.tarif_info.tarif + ' р');

    var form = jQuery("#d3Form");
    form.find('input[name=d3_punkt]').val(punktInfo.id);
    form.find('input[name=d3_delivery_cost]').val(punktInfo.tarif_info.tarif + ' руб.');
  }
</script>

Результат:

Стоимость заказа (руб.)
Способ оплаты
Вес заказа (кг.)

Выбрать пункт выдачи на карте

Выбранный ПВЗ
Стоимость доставки

по вопросам сотрудничества

Любовь Артман

Руководитель направления
info@glavpunkt.ru
СПб: (812) 324-33-44
Мск: (499) 110-56-94