Лайки для подблоков Тильда

Модификация Tilda, которая позволяет нажимать лайки, считает и запоминает их количество в браузере.

Кейсы использования модификации

Продвижение карточки компании на Яндекс Картах один из недооцененных инструментов маркетинга, способный давать быстрый рост продаж.

Стилизация

Когда хотите сделать страницу похожей на социальную сеть или делаете портфолио.
Триггерная анимация

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

Отслеживайте событие нажатие и показывайте попапы и другие действия.

Пример работающей модификации

На примере ниже показан блок с кнопкои лайка и подсчетом лайков. Кнопка реагирует на клик, а значение сохраняется у пользователя и не сбрасывается при обновлении страницы.
Это один из вариантов кастомнои модификации стандартных блоков на Тильде.

Куршская коса, Калининградская область

Узкая полоса земли рядом с Балтийским морем и местными. На косе отдыхают на пляжах, любуются дюнами и морским берегом, гуляют по Танцующему лесу. Последняя достопримечательность выделяется изогнутой формой растущих там сосен. Кто-то объясняет это климатом, кто-то — нашествием гусениц, кто-то — колдовством.

Разгадывать загадку Танцующего леса — это не единственное, чем можно заниматься на Куршской косе. Здесь есть сотни видов других растений и животных, а территория относится к национальному парку, по которому проложены пешеходные маршруты.

10

Долина Гейзеров, Камчатка

Одно из самых больших гейзерных полей на всей планете. Рядовому туристу это красивое место может показаться небольшим (всего 4 км²), но в нем сконцентрированы десятки гейзеров и горячих источников.

Картины перед глазами по-настоящему удивительные: вверх постоянно вздымаются водяные и паровые струи, которые нарушают окрестную тишину. Единственный минус — добираться в Долину Гейзеров довольно трудно и дороговато.

10

Телецкое озеро, Алтай

Одно из самых красивых мест России для путешествий. Средняя глубина озера — внушительные 174 метра. Летом в Телецком озере можно купаться — правда, только у южных границ, где вода прогревается до более-менее приемлемых отметок.

Водоем окружен красивыми зелеными холмами, здесь много гостевых домов и баз отдыха. Активностей на Телецком озере хоть отбавляй: сплавы, рыбалка, пляжный отдых, велосипедные и конные прогулки.

10

Инструкция по внедрению модификации

Создаем кнопку

Добавляем ей необходимые иконки для статичного состояния и при наведении.

Добавляем кнопке ссылку

Ссылка должна быть #like .

Добавляем код на страницу

Скопируйте код ниже и добавьте в блок T123.

Настраиваем поведение модификации

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

включение или отключение автоприроста
источник стартового значения (из HTML или кастомныи)
максимальное значение счетчика

Изменения применяются ко всем кнопкам лайка на странице.

Опубликуйте страницу

Скопировать код

<!-- Samand.studio | лайки для подблоков -->
<script>
document.addEventListener("DOMContentLoaded", function () {

  /* ================= НАСТРОЙКИ ================= */

  // Включает / выключает автоматический рост лайков
  const AUTO_INCREMENT_ENABLED = true;

  // true  – использовать кастомный старт (рандом)
  // false – брать число из HTML кнопки
  const USE_CUSTOM_START_VALUE = true;

  const MAX = 999;
  const MIN_START = 120;
  const MAX_START = 250;

  /* ============================================= */

  //const buttons = document.querySelectorAll(".t-btntext_has_icon");
  const buttons = document.querySelectorAll('a[href="#like"]');


  buttons.forEach((btn, index) => {
    const counter = btn.querySelector(".t-btntext__text");
    if (!counter) return;

    // уникальные ключи для каждой кнопки
    const STORAGE_KEY_VALUE = "like_value_" + index;
    const STORAGE_KEY_LIKED = "like_liked_" + index;

    // восстановление значения
    let value = localStorage.getItem(STORAGE_KEY_VALUE);

    if (value === null) {

      if (USE_CUSTOM_START_VALUE) {
        value = Math.floor(Math.random() * (MAX_START - MIN_START + 1)) + MIN_START;
      } else {
        const htmlValue = parseInt(counter.textContent, 10);
        value = isNaN(htmlValue) ? 0 : htmlValue;
      }

      localStorage.setItem(STORAGE_KEY_VALUE, value);

    } else {
      value = parseInt(value, 10);
    }

    counter.textContent = value;

    // восстановление лайка
    let liked = localStorage.getItem(STORAGE_KEY_LIKED) === "1";
    if (liked) {
      btn.classList.add("is-liked");
    }

    btn.style.position = "relative";

    function saveState() {
      localStorage.setItem(STORAGE_KEY_VALUE, value);
      localStorage.setItem(STORAGE_KEY_LIKED, liked ? "1" : "0");
    }

    function updateCounter(newValue) {
      value = Math.max(0, Math.min(MAX, newValue));
      counter.textContent = value;
      saveState();
    }

    function randomDelay() {
      return Math.floor(Math.random() * (10000 - 3000 + 1)) + 3000;
    }

    // +1 анимация
    function showPlusOne() {
      const plus = document.createElement("span");
      plus.className = "like-plus";
      plus.textContent = "+1";
      btn.appendChild(plus);

      setTimeout(() => {
        plus.remove();
      }, 800);
    }

    // авто-рост
    function autoIncrement() {
      if (!AUTO_INCREMENT_ENABLED) return;

      if (value < MAX) {
        updateCounter(value + 1);
      }

      setTimeout(autoIncrement, randomDelay());
    }

    if (AUTO_INCREMENT_ENABLED) {
      setTimeout(autoIncrement, randomDelay());
    }

    // клик пользователя
    btn.addEventListener("click", function () {

      if (!liked) {
        liked = true;
        btn.classList.add("is-liked", "pulse");

        if (value < MAX) {
          updateCounter(value + 1);
          showPlusOne();
        }

        setTimeout(() => {
          btn.classList.remove("pulse");
        }, 300);

      } else {
        liked = false;
        btn.classList.remove("is-liked");
        updateCounter(value - 1);
      }

      saveState();
    });

  });

});
</script>


<style>
/* Зафиксированное красное сердечко */
.t-btntext.is-liked .t-btntext__icon {
  background-image: url("https://static.tildacdn.com/tild3965-3862-4364-b562-303639343665/icon.svg");
}

/* Цвет цифры */
.t-btntext.is-liked .t-btntext__text {
  color: #e53935;
}

/* Убираем стандартное черное сердечко */
.t-btntext.is-liked .t-btntext__icon::before {
  opacity: 0;
}

/* Всплывающий +1 */
.like-plus {
  position: absolute;
  right: -6px;
  top: 0;
  font-size: 12px;
  font-weight: 500;
  color: #e53935;
  opacity: 0;
  pointer-events: none;
  animation: likeFloat 0.8s ease-out forwards;
}

@keyframes likeFloat {
  0% {
    transform: translateY(0);
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  100% {
    transform: translateY(-14px);
    opacity: 0;
  }
}

/* Пульс кнопки */
.t-btntext.pulse {
  animation: likePulse 0.3s ease;
}

@keyframes likePulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.15); }
  100% { transform: scale(1); }
}
</style>

Как вам модификация?

Лайки для подблоков Тильда

Кейсы использования модификации

Стилизация

Триггерная анимация

Отслеживание событий

Пример работающей модификации

Инструкция по внедрению модификации

Заказать внедрение модификации