Карточный виджет

Виджет устанавливается на странице с описанием товара и показывает самый быстрый и дешевый вариант доставки товара курьером, в пункт самовывоза и Почтой России (если указан почтовый индекс). Так покупатели видят, какой способ доставки подходит им больше.

Данные виджетов формируются на основе:

  • габаритов товара (задаются в коде виджета);

  • условий доставки (настраиваются в личном кабинете);

  • города и почтового индекса (указывает покупатель).

Как разместить виджет

Вставьте код виджета на страницу сайта.

<head>
  ...
  <!-- Чтобы виджет загружался быстрее, рекомендуем размещать скрипт для подключения к API 
       виджетов и код виджета в элементе head. -->
  
  <!-- Подключение к API виджетов -->
  <script async src="https://widgets.delivery.yandex.ru/script/api"></script>

  <!-- Код виджета -->
  <script>
    (function(w) {
      function startWidget() {
        document.removeEventListener('YaDeliveryLoad', startWidget);
        w.YaDelivery.createWidget({
          containerId: 'myWidget', // Идентификатор HTML-элемента (контейнера), 
                                   // в котором будет отображаться виджет 
          type: 'deliveryCard', // Тип виджета — всегда deliveryCard
          params: {
            apiKey: '01234567-89ab-cdef-f0f0-fedc-ba9876543210', // Авторизационный ключ
            senderId: 456, // Идентификатор магазина в системе Яндекс.Доставки
            dimensions: {
              width: 10, // Ширина упаковки с товаром в см
              height: 10, // Высота упаковки с товаром в см
              length: 10,  // Длина упаковки с товаром в см
              weight: 1,  // Вес упаковки с товаром в кг
            },
            postalCode: 123456,  // Почтовый индекс, чтобы отобразились условия доставки почтой
            themeId: 1,  // Вид отображения виджета — всегда 1
            deliveryTypes: ['COURIER', 'PICKUP', 'POST'] // Доступные способы доставки заказа
                                                         // (курьером, в пункт выдачи, на почту)
          },
        });
      }
      w.YaDelivery
          ? startWidget()
          : document.addEventListener('YaDeliveryLoad', startWidget);
    })(window);
  </script>
  ...
</head>
<body>
  ...
  <!-- Контейнер, в котором будет отображаться виджет -->
  <div id="myWidget"></div>
  ...
</body>