Сейчас узнаем, какой подарок выпадет именно Вам
Крутите колесо
Ура, вы выиграли!
Ваш приз:
Годовой доступ
к видео на mo-ti -20%
по промокоду T19RAY
Промокод действителен 3 дня

Оформить доступ с промокодом
100
Как найти по точному коду информацию в таблице CL46 и вывести её в popup окно в Tilda
Поиск
Найти ПВЗ по номеру
Введите номер ПВЗ и нажмите поиск. Так вы сможете узнать адрес, станцию метро и время работы отделения

Как найти по точному коду информацию в таблице CL46 и вывести её в popup окно в Tilda

1
Создали Zero и добавили в него форму с полем ввода в одну строку и задали этому полю имя warranty
2
Задали этой форме класс warranty-form
Удалили кнопку формы (очистили текст и фон, сделали размер 0 х 0)
3
Создали свою кнопку Button и задали ей класс warranty-btn
4
Создали и наполнили таблицу CL46 и задали ей класс uc-warranty-table
5
Создали блок BF503 и задали ему класс uc-warranty-popup
6
Добавили код в блок Другое - Т123
Mo-ti Level Up
Видео инструкции по добавлению кода и работе с Zero Block.
Создаём поиск по таблице CL46, выводим значения в информационный popup BF503
Фрагмент видео
Библиотека для примера

<script>
document.addEventListener("DOMContentLoaded", function(){
let warrantyPopup = document.querySelector('.uc-warranty-popup');

if(warrantyPopup){

let popupC = warrantyPopup.querySelector('.t390__descr');
popupC.innerHTML = '';
let popupH = warrantyPopup.querySelector('.t-popup').getAttribute('data-tooltip-hook');

let warrantyPopupLink = document.createElement('a');
warrantyPopupLink.href = popupH; warrantyPopupLink.className = "warranty-popup";
warrantyPopup.appendChild(warrantyPopupLink);

let wBtn = document.querySelector('.warranty-btn');
let wForm = document.querySelector('.warranty-form');

function findValue(){
    
    let code = document.querySelector('input[name="warranty"]').value;
    let tableNum = document.querySelectorAll('.uc-warranty-table').length;
    
    if(code.length && tableNum>0 ){
        let tableLine = document.querySelectorAll('.uc-warranty-table .t431__tbody tr');
        for (let i = 0; i < tableLine.length; i++) {
            let cont = tableLine[i].querySelectorAll('td');
            
            let trLine = cont;
            cont = cont[0].innerText;
            warrantyPopupLink.click();
            let txtPrint = '';
            if(code.toLowerCase()==cont.toLowerCase()){
                
                txtPrint = `Код ПВЗ: ${trLine[0].innerText}<br>
                            Адрес: ${trLine[1].innerText}<br>
                            Метро: ${trLine[2].innerText}<br>
                            Время работы: ${trLine[3].innerText}<br>
                            `;
                popupC.innerHTML = txtPrint;
                return false;
            }else{
                txtPrint =  `Данный код отсутствует в базе.<br>
                             Пожалуйста, проверьте правильность ввода и повторите попытку.
                            `;
                popupC.innerHTML = txtPrint;
            };
        };
    }; 
    
};


if(wBtn&&wForm) {
    wBtn.addEventListener('click', function() {  findValue() });

wForm.addEventListener('keydown', function(event) {
    if (event.key === "Enter") {
        event.preventDefault();
        findValue()
    };
});

};

};
});
</script>

<style>
.warranty-btn { cursor: pointer}  
/*div.uc-warranty-table {    display: none}*/
.uc-warranty-popup .t-popup__close {display: none}
.uc-warranty-popup .t-popup__container:after {
    content: "";
    background-image: url(https://static.tildacdn.com/tild6432-3463-4365-a337-363436633835/Group_9_1.svg);
    background-size: contain;
    background-repeat: no-repeat;
    width: 25px;
    height: 25px;
    position: absolute;
    top: -40px;
    right: 0px;
    z-index: 999;
    pointer-events: none;
}
</style>
Made on
Tilda