Таймер обратного отсчёта

Как работает расширение

Таймер можно настроить двумя способами:

• Фиксированный таймер — отсчитывает время до конкретной даты и времени с учетом выбранного часового пояса. Подходит для акций с фиксированным сроком.

• Индивидуальный (вечнозеленый) таймер — запускается при первом визите каждого пользователя и отсчитывает указанную длительность (например, 3 дня или 1 час). Подходит для персональных предложений.

Расширение добавляет на сайт таймер, который отображает обратный отсчет: показывает оставшееся время в указанном вами элементе на странице Taptop.

По окончании отсчета таймер может:

• скрыть заданные блоки

• показать ранее скрытые блоки

• скрыть сам элемент с цифрами таймера

• заменить цифры таймера на указанный вами текст (например, вместо "00:00:00" — "Акция завершена!")

• перенаправить пользователя на указанную вами страницу

Как работать с инструкцией?

Для настройки расширения вам нужно:

1. На платформе Taptop — подготовить все элементы, с которыми будет работать таймер (таймер, блоки для показа/скрытия), и назначить им CSS-классы, а также вставить полученный код в настройках страницы.

2. В генераторе кода (в правой части страницы) — настроить параметры таймера и поведение по завершении и сгенерировать код.

Установка расширения на сайт

Шаг 1: Подготовьте элементы в Taptop

Для начала нужно создать необходимые элементы и блоки и присвоить им уникальные CSS-классы.

1. Элемент таймера.

• Добавьте текстовый блок, в котором будут отображаться цифры (например, 00:00:00).

• Назначьте элементу CSS-класс (например, timer-text).

📌 Чтобы присвоить класс элементу:

1. Выберите элемент, а затем на панели стилей в поле Источники стилей введите нужное название класса и нажмите Enter.

   

   Введите название класса

2. Класс будет присвоен элементу и отобразится в поле Источники стилей.

   

   Класс присвоен элементу

2. Блоки, которые нужно скрыть (опционально).

• Определите, какие блоки должны быть скрыты после окончания работы таймера.

• Назначьте этим блокам CSS-классы. Если блоков несколько, можно дать им разные классы или один общий (например, block-to-hide).

  

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

3. Блоки, которые нужно показать (опционально).

• Определите, какие блоки должны появиться после окончания работы таймера.

• Добавьте этим блокам CSS-класcы. Если блоков несколько, можно дать им разные классы или один общий (например, offer-block-show).

• Для каждого CSS-класса настройте стили, чтобы скрыть блоки до окончания работы таймера. Для этого выберите только что добавленный класс в поле Источники стилей. Затем в настройках Авто-лейаут → Отображение нажмите иконку "Скрыть элемент". Блоки в этим классом не будут отображаться на странице, пока не сработает таймер.

Классу offer-block-show установлено отображение Скрыть элемент

⚠️ ВАЖНО! Стили нужно настраивать именно для добавленного CSS-класса, а не для локального класса элемента. Иначе показ блока после окончания таймера работать не будет. Убедитесь, что вы выбрали этот класс в поле Источники стилей — активный класс будет выделен синей плашкой. Если выбран другой класс, кликните мышкой на нужный класс — он станет активным.

Активен класс offer-block-show

Шаг 2: Настройте параметры в генераторе и сгенерируйте код

1. Перейдите к генератору (в правой части страницы с данной инструкцией).

2. Выберите тип таймера:

• Фиксированный — до определенной даты и времени

• Индивидуальный (вечнозеленый) — для каждого посетителя

3. Настройте время работы:

• Для фиксированного таймера — дату и время окончания и часовой пояс.

• Для вечнозеленого таймера — длительность (дни, часы, минуты, секунды). Время окончания сохранится в браузере посетителя (в localStorage).

4. Укажите CSS-классы — для элемента таймера, блоков для скрытия и блоков для показа.
Запишите их в поля через запятую, без точки в начале.

5. Установите Дополнительные опции (Опционально):

• Отметьте "Скрыть элемент таймера", если он больше не нужен после завершения таймера.

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

• Укажите, на какую страницу сайта перенаправить пользователя после завершения отсчета таймера (редирект) — укажите путь на вашем сайте (начиная с / — например, /catalog).

6. Нажмите кнопку “Сгенерировать код”. Код будет автоматически скопирован в буфер обмена, и вы увидите уведомление.

Шаг 3: Вставьте код на сайт

1. Перейдите в Taptop и откройте настройки страницы: на вкладке Страницы нажмите иконку шестеренки рядом с названием нужной страницы.
   

   

2. В блоке "Перед тегом <body>" вставьте сгенерированный код.
   

   

3. Сохраните изменения на странице и опубликуйте ее (Ctrl+Shift+S).

Примеры использования расширения

Ниже приведены несколько сценариев, показывающих, как можно использовать таймер.

Пример 1: Акция "Успей купить!"

1. Подготовка в Taptop:

• Создали текстовый блок для таймера, задали ему класс flash-sale-timer.

• Создали блок с акционным предложением, задали ему класс flash-sale-offer.

• Создали текстовый блок "Увы, предложение закончилось!", задали ему класс flash-sale-over. Этому классу (flash-sale-over) через панель стилей Taptop установили Отображение: Скрыть.

2. Настройки генератора:

• Тип таймера: До конкретной даты и времени

• Дата/Время/Пояс: (Установить ближайшую пятницу, 18:00:00, ваш часовой пояс)

• Класс элемента таймера: flash-sale-timer

• Классы блоков для СКРЫТИЯ: flash-sale-offer

• Классы блоков для ПОКАЗА: flash-sale-over

• Скрыть элемент таймера: ✔️ (отмечено)

• Текст по завершении: (пусто)

• Перенаправить на путь: (пусто)

Пример 2: Персональная скидка 3 часа

Задача: Показать новому посетителю персональную скидку на 3 часа. По истечении времени скрыть блок скидки, показать в таймере текст "Ваше время вышло" и перенаправить на страницу каталога.

1. Подготовка в Taptop:

• Текстовый блок для таймера, класс personal-timer-3hr.

• Блок со скидкой, класс personal-discount-3hr.

2. Настройки генератора:

• Тип таймера: Для каждого посетителя (Вечнозеленый)

• Длительность: Дни: 0, Часы: 3, Мин: 0, Сек: 0

• Класс элемента таймера: personal-timer-3hr

• Классы блоков для СКРЫТИЯ: personal-discount-3hr

• Классы блоков для ПОКАЗА: (пусто)

• Скрыть элемент таймера: (не отмечено)

• Текст по завершении: Ваше время вышло

• Перенаправить на путь: /catalog

Результат: При первом заходе у посетителя запускается 3-часовой таймер. По истечении этого времени блок скидки (personal-discount-3hr) исчезнет, в элементе таймера появится текст "Ваше время вышло", и пользователя перенаправит на страницу /catalog. При повторных заходах до истечения 3 часов таймер будет продолжать отсчет.

Пример 3: Обратный отсчет до старта вебинара

Задача: Показать таймер до начала вебинара. Когда время выйдет, показать кнопку "Присоединиться" и изменить текст таймера на "Вебинар начался!".

1. Подготовка в Taptop:

• Текстовый блок для таймера, класс webinar-countdown.

• Кнопка "Присоединиться" (или целый блок с ней), класс webinar-join-button. Этому классу (webinar-join-button) через панель стилей Taptop установлено Отображение: Скрыть.

2. Настройки генератора:

• Тип таймера: До конкретной даты и времени

• Дата/Время/Пояс: (Установить дату/время начала вебинара)

• Класс элемента таймера: webinar-countdown

• Классы блоков для СКРЫТИЯ: (пусто)

• Классы блоков для ПОКАЗА: webinar-join-button

• Скрыть элемент таймера: (не отмечено)

• Текст по завершении: Вебинар начался!

• Перенаправить на путь: (пусто)

Результат: Таймер отсчитывает время до вебинара. По его окончании в элементе таймера появится текст "Вебинар начался!", а у кнопки "Присоединиться" будет удален класс webinar-join-button, и она станет видимой.

Решение возможных проблем

❗️ Не работает таймер или отображение/скрытие блоков

• Проверьте классы: Убедитесь, что CSS-класс(ы), введенные в генераторе в поле классов таймера/скрытия/показа, в точности совпадают с классами, назначенными соответствующим блокам в Taptop (без точек, регистр важен). Проверьте на опечатки.

• Проверьте стили: Убедитесь, что стили для блока, который нужно показать, заданы в нужном классе, а не в локальном классе элемента.

• Наличие блоков: Убедитесь, что на странице действительно есть блоки с указанными классами. Проверьте консоль браузера (F12) на наличие предупреждений [Countdown Timer] Блоки для скрытия (...) не найдены.

❗️ Вечнозеленый таймер всегда запускается заново

• Посетитель может использовать режим Инкогнито или очищать localStorage (например, при очистке куков в браузере).