CDEK DC
1
р.
2
р.

Как вызвать карту доставки CDEK и передать адрес ПВЗ в корзину в Tilda

Данный пример выполнен из блоков корзина ST100 и HTML код popUp окне T868

Как выполнили данный пример:
1. Создали корзину и добавили Поле с вариантами доставки и именем Delivery
2. Добавили Поле для ввода в несколько строк
На 5 строк, с именем переменной deliverypoint
Сделали обязательным для заполнения
4. Добавили блок Т868 10 колонок и 550px
задали ссылку #popup:cdekmap
3. Добавили скрипт на страницу
1-ый в блок T868
2-ой в Т123

<div id="forpvz" style="width:100%; height:600px;"></div>
<script id="ISDEKscript" type="text/javascript" src="https://widget.cdek.ru/widget/widjet.js"></script>
<script type="text/javascript">
    var ourWidjet = new ISDEKWidjet ({
        defaultCity: 'auto', //какой город отображается по умолчанию
        cityFrom: 'Москва', // из какого города будет идти доставка
        country: 'Россия', // можно выбрать страну, для которой отображать список ПВЗ
        link: 'forpvz', // id элемента страницы, в который будет вписан виджет
        path: 'https://widget.cdek.ru/widget/scripts/'
       
    });
</script>

<style>
div#mCSB_3_container {display: none !important}
.CDEK-widget__sidebar-button-point, .CDEK-widget__sidebar-button_phone {
        display:none !important;
}
[name='deliverypoint'] {
    color: #888888 !important;
    border: 0px  !important;
    box-shadow: 0px 0px 10px 2px #efefef;
    background: #ffffff;
    resize: none;
}
.noeditline{pointer-events: none}
.map-wrapper {margin-top: 15px}
</style>

<script>
$( document ).ready(function() { 
let popupLink = '#popup:cdekmap';
let popupCdek = $('div[data-tooltip-hook="'+popupLink+'"]').closest('.t-rec');
let txtArea = $("[name='deliverypoint']");
let textCdek="";
txtArea.parents(".t-input-group_ta").addClass("cdektextarea");
$(".cdektextarea, .t-input-group_tx").hide();
$(document).on('click','.CDEK-widget__choose',function(e){
    let town = popupCdek.find('input[name="town"]').val();
    let adress = $('.CDEK-widget__panel-details__block-text:eq(0)').text();
    let time = $('.CDEK-widget__panel-details__block-text:eq(1)').text();
    let way = $('.CDEK-widget__way').text();
    textCdek= town + '\n' +adress + '\n' + time  + '\n' + way.replace(/\s+/g,' ');
    txtArea.val(textCdek);
    popupCdek.find(".t-popup__close-wrapper")[0].click();
});

let cdekLink = `<div class="map-wrapper">
                <div class="t-text cdeklink">
                    <a href="#popup:cdekmap">
                        <u>Открыть карту CDEK</u>
                    </a>
                </div>
                </div>`;

$('.t706 .t-input-group_dl').append(cdekLink);$('.cdeklink').hide();

$('.t706').on('input', 'input[name="Delivery"]', function() {      
    let getCh =  $(this).val();
    
    if(getCh=="Доставка ТК СДЭК"){
        txtArea.val(textCdek).attr({
                                'placeholder' : 'Выберите адрес ПВЗ СДЭК на карте',
                                'disabled': 'true'  });
        $(".cdektextarea , .cdeklink").show();
    }else{
        txtArea.val('').attr({'placeholder' : 'Введите адрес для доставки'});
        txtArea.removeAttr('disabled');
        $('.cdektextarea').show();$(".cdeklink").hide();
    };
   
});
});  
</script>
Click to order
Made on
Tilda