Мини код для Тильды - эффекты, скрипты, помощники, стили

Оглавление:

1. Анимация увеличения изображения фона при наведении на шейп в нулевом блоке

<script>
  var animEasingCheck = setInterval(function () {
    var styleTag = document.querySelector('.sbs-anim-keyframes');
    
    if (styleTag && styleTag.innerHTML.includes('linear')) {
      var updatedCSS = styleTag.innerHTML.replace(/linear/g, 'cubic-bezier(0.34, 1, 0.68, 1)');
      
      styleTag.innerHTML = ''; // Очистка перед вставкой
      setTimeout(function () {
        styleTag.innerHTML = updatedCSS;
      }, 0); // Микрозадержка для триггера перерисовки (можно убрать)
      
      clearInterval(animEasingCheck);
    }
  }, 200);
</script>

<style>
  .anim {
    overflow: hidden;
    border-radius: 10px;
}
</style>

2. Текст на всю ширину своего контейнера в нулевом блоке

<style>.shirina {
       text-align: justify;
   }
   </style>

3. Меню МЕ610 на всю ширину

<style>
    
/* Стили для блока с ID rec1072896326 при ширине экрана от 961px и больше */
@media (min-width: 961px) {
    /* Стили для элементов с классом t395 */
    #rec1072896326 .t395 .t-container {
        max-width: 100%; /* Контейнер занимает всю доступную ширину */
    }
    
    #rec1072896326 .t395__col {
        max-width: calc(100% - 80px); /* Ширина колонки: 100% минус 80px */
        margin-left: 40px;            /* Отступ слева 40px */
        margin-right: 40px;           /* Отступ справа 40px */
    }

    /* Стили для элементов с классом t397 (дублирующая структура) */
    #rec1072896326 .t397 .t-container {
        max-width: 100%; /* Контейнер занимает всю доступную ширину */
    }
    
    #rec1072896326 .t397__col {
        max-width: calc(100% - 80px); /* Ширина колонки: 100% минус 80px */
        margin-left: 40px;            /* Отступ слева 40px */
        margin-right: 40px;           /* Отступ справа 40px */
    }
}
</style>

4. Иконка для кнопки подробнее в товарах (справа)

<style>
    
.js-store-prod-btn2.t-store__card__btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    padding-right: 20px !important; /* Место под иконку */
    text-align: center !important;
}

.js-store-prod-btn2.t-store__card__btn::after {
    content: url('https://static.tildacdn.com/tild6365-6263-4730-b661-336531383163/Exclude.svg') !important;
    position: absolute !important;
    right: 10px !important;
    top: 50% !important;
    transform: translateY(-50%) rotate(0deg) !important;
    width: 20px !important;
    height: 20px !important;
    display: inline-block !important;
    transition: transform 0.2s ease-in-out !important; /* Анимация */
}

.js-store-prod-btn2.t-store__card__btn:hover::after {
    transform: translateY(-50%) rotate(45deg) !important; /* Поворот при наведении */
}
</style>

5. Кнопка в потоках чтобы при нажатии копировался текст кода в буферк обмена

Как использовать:

<!-- Кнопка копирования -->
<button id="copyButton" class="custom-copy-button">Скопировать код избранного</button>

<!-- Сообщение об успехе -->
<div id="copyFeedback" class="copy-feedback">✅ Код скопирован!</div>

<!-- Стили кнопки -->
<style>
.custom-copy-button {
    width: 260px;
    height: 50px;
    background-color: #2e2e2e; /* Темно-серый фон */
    color: white;              /* Белый текст */
    border: 1px solid #3d3d3d; /* Легкий бордер */
    border-radius: 0;          /* Без закруглений */
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.custom-copy-button:hover {
    background-color: #83A73F; /* Зелёный при наведении */
    border-color: #749637;     /* Чуть темнее зелёный для бордера */
    color: #fff;               /* Гарантируем белый текст при hover */
}

.copy-feedback {
    margin-top: 10px;
    padding: 10px 15px;
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
    border-radius: 4px;
    display: none;
    font-size: 14px;
}
</style>

<!-- Скрипт копирования -->
<script>
function copyTextToClipboard(text) {
    navigator.clipboard.writeText(text).then(function () {
        document.getElementById('copyFeedback').style.display = 'block';
        setTimeout(function () {
            document.getElementById('copyFeedback').style.display = 'none';
        }, 2000);
    }).catch(function (err) {
        alert('Ошибка при копировании: ', err);
    });
}

document.getElementById('copyButton').addEventListener('click', function () {
    const textToCopy = `<!-- Иконка избранного в Zero Block (нулевом блоке) для Тильды av-five.ru -->
<script>
document.addEventListener("DOMContentLoaded", function () {
    // Внутренний IIFE-блок для изоляции переменных и функций
    (function () {

        // Режим отображения:
        // true - скрывать элементы, если избранное пусто
        // false - показывать всегда
        const emptyFavorites = false;

        // Находим элементы избранного по новым классам
        const fIcon = document.querySelectorAll('.my_favorites_icon');     // Иконка избранного
        const fTotal = document.querySelectorAll('.my_favorites_count');   // Количество товаров в избранном


        // Функция показывает элементы избранного
        function showWishIcon() {
            fIcon.forEach(el => el.classList.add('show-fav'));
            fTotal.forEach(el => el.classList.add('show-fav'));
        }

        // Функция скрывает элементы избранного
        function hideWishIcon() {
            fIcon.forEach(el => el.classList.remove('show-fav'));
            fTotal.forEach(el => el.classList.remove('show-fav'));
        }


        // Основная функция проверяет состояние избранного и обновляет интерфейс
        function checkTotalWishList() {
            if (window.twishlist !== undefined) {

                if (!emptyFavorites) showWishIcon();

                const nTot = twishlist.total; // Получаем количество товаров в избранном

                // Обновляем цифру количества
                fTotal.forEach(el => {
                    const atom = el.querySelector('.tn-atom');
                    if (atom) atom.innerText = nTot;
                });

                // Анимация при добавлении товара
                fIcon.forEach(el => el.classList.add('favorites_icon_anim'));
                setTimeout(function () {
                    fIcon.forEach(el => el.classList.remove('favorites_icon_anim'));
                }, 700);


                if (nTot === 0) {
                    if (emptyFavorites) {
                        hideWishIcon(); // Скрываем всё, если избранное пустое и режим активен
                    } else {
                        showWishIcon(); // Показываем, даже если пустое
                    }
                } else {
                    // Разрешаем клик по иконке, если есть товары
                    fIcon.forEach(el => el.classList.remove('blkFav'));
                    if (emptyFavorites) showWishIcon();
                }
            }
        }


        // Запускаем первую проверку после загрузки страницы
        setTimeout(function () {
            checkTotalWishList();
        }, 1000);


        // Наблюдатель за изменениями в стандартном счётчике избранного Tilda
        const observer = new MutationObserver(() => {
            setTimeout(function () {
                checkTotalWishList();
            }, 300);
        });

        const wishiconCounter = document.querySelector('.t1002__wishlisticon-counter');
        if (wishiconCounter) {
            observer.observe(wishiconCounter, {
                childList: true,
                subtree: true,
                characterDataOldValue: true
            });
        } else {
            console.log('wishlist counter option not active');
        }


        // Добавляем обработчик клика — открывает модальное окно "Избранное"
        fIcon.forEach(function (el) {
            el.addEventListener('click', function (e) {
                e.preventDefault();
                twishlist__openWishlist(); // Открытие списка избранного Tilda
            });
        });


    })(); // Конец IIFE
});
<\/script>

<style>
/* Блокировка взаимодействия, если список пуст */
.blkFav {
    pointer-events: none;
}

/* Скрытие элементов до их активации */
.my_favorites_icon,
.my_favorites_count {
    opacity: 0;
    pointer-events: none;
}

/* Активный режим отображения */
.r .show-fav {
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* Стилизация иконки избранного */
.my_favorites_icon {
    cursor: pointer;
    transition: transform 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out;
}

/* Скрываем стандартную иконку избранного Tilda */
.t1002__wishlisticon {
    display: none !important;
}
<\/style>`;

    copyTextToClipboard(textToCopy);
});
</script>

6. Показ скрытых блоков тильды при нажатии на кнопку

<script>
document.addEventListener("DOMContentLoaded", function() {
  // Конфигурация для всех кнопок
  const buttonsConfig = [
    { id: '#button1', class: 'uc-block1' },
    { id: '#button2', class: 'uc-block3' }, 
    { id: '#button3', class: 'uc-block3' }
  ];

  const anchor = true;
  const hideBtn = false;
  const hideBlk = false;

  buttonsConfig.forEach(config => {
    const buttons = document.querySelectorAll(`[href="${config.id}"]`);
    const blocks = document.querySelectorAll(`.${config.class}`);

    // Инициализация - скрываем блоки
    blocks.forEach(block => {
      block.style.display = 'none';
      block.style.opacity = '0';
      block.style.transform = 'translateY(-20px)';
      block.style.transition = 'all 0.4s ease-out';
      block.style.overflow = 'hidden';
    });

    buttons.forEach(btn => {
      btn.addEventListener('click', function(e) {
        if (!anchor) e.preventDefault();
        
        blocks.forEach(block => {
          if (block.style.display === 'none') {
            // Анимация появления
            block.style.display = 'block';
            setTimeout(() => {
              block.style.opacity = '1';
              block.style.transform = 'translateY(0)';
            }, 10);
          } else {
            // Анимация скрытия
            block.style.opacity = '0';
            block.style.transform = 'translateY(-20px)';
            setTimeout(() => {
              block.style.display = 'none';
              btn.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
            }, 400);
          }
        });

        if (hideBtn) btn.style.display = 'none';
        if (hideBlk && btn.closest('.r')) {
          btn.closest('.r').style.display = 'none';
        }
      });
    });
  });
});
</script>

Карта Яндекс через iframe в нулевой блок со 100% покрытием шейпа и закруглениями

<iframe 
  src="https://yandex.ru/map-widget/v1/?z=12&ol=biz&oid=67824188750" 
  width="100%" 
  height="100%" 
  frameborder="0"
  style="border-radius: 20px;">
</iframe>

Подкрашивание пункта в мобильном меню

<style>
    [data-menu-item-number="2"] {
    background: #c8a4cd;
    padding: 7px 18px 7px 18px;
    font-size: 20px;
    border-radius: 10px;
    color: #ffffff !important;
}
</style>

Кнопки для выбора способов оплаты в стандартную корзину Тильды

<style>
/* === Способы оплаты — кнопки с иконками (без наезда на текст) === */

/* Скрыть стандартные радиокнопки и индикатор */
#rec703579280 .t-radio__wrapper-payment .t-radio__control input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
#rec703579280 .t-radio__wrapper-payment .t-radio__indicator {
  display: none;
}

/* Общий стиль "кнопки" */
#rec703579280 .t-radio__wrapper-payment .t-radio__control {
  display: flex;
  align-items: center;
  padding: 18px 20px 18px 80px; /* увеличен отступ слева под иконку 48px + зазор */
  margin-bottom: 16px;
  background-color: #f9f9f9;
  border: 1px solid #e0e0e0;
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: 'Mulish', Arial, sans-serif;
  font-size: 16px;
  color: #141515;
  width: 100%;
  box-sizing: border-box;
  position: relative;
  background-repeat: no-repeat;
  background-position: 20px center; /* отступ иконки от левого края */
  background-size: 48px auto;      /* иконка 48px по ширине, высота — пропорционально */
}

/* При наведении */
#rec703579280 .t-radio__wrapper-payment .t-radio__control:hover {
  background-color: #f0eaf2;
  border-color: #c8a4cd;
}

/* Иконка для Tinkoff */
#rec703579280 .t-radio__wrapper-payment .t-radio__control:has(input[value="tinkoff"]) {
  background-image: url("https://static.tildacdn.com/tild6130-3033-4633-a237-363462633032/1.png");
}

/* Иконка для Доли */
#rec703579280 .t-radio__wrapper-payment .t-radio__control:has(input[value="custom.dolyame"]) {
  background-image: url("https://static.tildacdn.com/tild6663-3931-4530-a536-333166356561/Frame_2.png");
}

/* Стиль для ВЫБРАННОГО способа оплаты */
#rec703579280 .t-radio__wrapper-payment .t-radio__control:has(input[type="radio"]:checked) {
  background-color: #f0eaf2;
  border-color: #c8a4cd;
  color: #c8a4cd;
  font-weight: 600;
}

</style>

Скрываем блок по времени и дням недели

<script>
  (function() {
    // 👇 ЗАМЕНИ ЭТОТ ID НА СВОЙ (без #, только rec...)
    const blockId = 'rec765432109';
    
    const block = document.getElementById(blockId);
    if (!block) return;

    const now = new Date();
    const currentHour = now.getHours(); // 0–23
    const currentDay = now.getDay();    // 0 = воскресенье, ..., 3 = среда

    const isWednesday = (currentDay === 3); // Среда

    // Скрываем, если:
    // - среда (весь день), ИЛИ
    // - время с 23:00 до 09:59
    const shouldHide = isWednesday || currentHour >= 23 || currentHour < 10;

    if (shouldHide) {
      block.style.display = 'none';
    }
  })();
</script>