Счетчики обратного отсчета

Счетчик обратного отсчета показывает на странице, сколько времени осталось до заданной даты: до конца акции, старта вебинара или закрытия предзаказа. Значения пересчитываются в браузере посетителя, без запросов к Битрикс24.

Сценарий подходит блокам с ограниченным по времени предложением. Если дата не фиксирована или отсчет должен идти от действия посетителя, счетчик не подойдет: он умеет считать только до конкретного момента.

Поведение включает расширение landing_countdown: его подключают в манифесте блока.

Как настроить счетчикКак настроить счетчик

Минимальный вариант:

'assets' => [
    'ext' => ['landing_countdown'],
],

Остальные ключи манифеста у такого блока обычные, они описаны в статье Файл манифеста.

Что делает расширение Что делает расширение landing_countdown

Расширение находит на странице элементы с классом js-countdown, рассчитывает оставшееся до data-end-date время и обновляет значения служебных элементов внутри контейнера. Значения перерисовываются раз в секунду.

Когда до даты окончания не остается времени, отсчет останавливается на нулях: в минус он не уходит.

Отдельно расширение следит за последними сутками отсчета: этим управляет атрибут data-days-expired-classes из таблицы ниже.

Как описать дату окончания в манифестеКак описать дату окончания в манифесте

Для ноды-контейнера таймера добавьте атрибут даты завершения:

'attrs' => [
    '.landing-block-node-date' => [
        [
            'name' => 'Дата окончания',
            'type' => 'date',
            'time' => true,
            'format' => 'ms',
            'attribute' => 'data-end-date',
        ],
    ],
],

Разметка таймераРазметка таймера

Контейнер таймера должен иметь класс js-countdown. Внутри контейнера размещают элементы для единиц времени — нужны только те, которые выводятся на странице:

• js-cd-years — годы
• js-cd-month — месяцы
• js-cd-days — дни
• js-cd-hours — часы
• js-cd-minutes — минуты
• js-cd-seconds — секунды

HTML-атрибуты контейнераHTML-атрибуты контейнера

Атрибуты задают на контейнере js-countdown.

В шаблоне формата буква обозначает единицу времени. Регистр важен: %m — это месяцы, а %M — минуты.

По умолчанию значение дополняется нулем слева до двух знаков: 03. Дефис после процента убирает этот нуль: %-S выведет 3. Восклицательный знак включает склонение подписи: %!d:день,дня; подставит нужную форму слова.

Форматы %I и %-I выводят полное количество часов, поэтому вместе с ними обычно убирают data-days-format и элемент js-cd-days.

ПримерПример

<section class="landing_block g-pt-30 g-pb-30 g-bg-orange g-color-white">
    <div class="landing-block-node-date mx-auto js-countdown text-center g-font-weight-300 g-line-height-1-2"
        data-end-date="1798761600000"
        data-days-format="%D"
        data-hours-format="%H"
        data-minutes-format="%M"
        data-seconds-format="%S"
        data-days-expired-classes="u-countdown--days-expiried">

        <div class="landing-block-node-number u-countdown--days-hide d-inline-block g-mx-20">
            <div class="landing-block-node-number-number g-font-size-36 mb-0">
                <span class="js-cd-days">12</span>
            </div>
        </div>

        <div class="landing-block-node-number-delimiter u-countdown--days-hide d-inline-block g-font-size-36">:</div>

        <div class="landing-block-node-number d-inline-block g-mx-20">
            <div class="landing-block-node-number-number g-font-size-36 mb-0">
                <span class="js-cd-hours">01</span>
            </div>
        </div>

        <div class="landing-block-node-number-delimiter d-inline-block g-font-size-36">:</div>

        <div class="landing-block-node-number d-inline-block g-mx-20">
            <div class="landing-block-node-number-number g-font-size-36 mb-0">
                <span class="js-cd-minutes">52</span>
            </div>
        </div>

        <div class="landing-block-node-number-delimiter d-inline-block g-font-size-36">:</div>

        <div class="landing-block-node-number d-inline-block g-mx-20">
            <div class="landing-block-node-number-number g-font-size-36 mb-0">
                <span class="js-cd-seconds">52</span>
            </div>
        </div>
    </div>
</section>

Примеры штатных блоковПримеры штатных блоков

Коды некоторых штатных блоков:

• 51.1.countdown_01
• 51.2.countdown_04
• 51.3.countdown_08
• 51.3.countdown_08_wo_bg
• 51.4.countdown_music
• 51.5.countdown_event
• 51.7.countdown_13

Как изменить дату завершения через RESTКак изменить дату завершения через REST

Дата хранится в HTML-атрибуте data-end-date ноды счетчика, поэтому ее меняет метод landing.block.updateattrs. Атрибут должен быть описан в ключе attrs манифеста блока: селектор ноды и имя атрибута метод берет оттуда.

Проверить текущее значение можно методом landing.block.getcontent с параметром editMode = true: без него метод вернет опубликованную версию блока, где новая дата еще не появится.

Права и ограниченияПрава и ограничения

Scope: landing

Кто может выполнять метод: в зависимости от метода

Ограничения:

• свой класс контейнера задать нельзя: расширение ищет js-countdown
• при сбитых часах на устройстве посетителя отсчет будет неточным
• счетчик инициализируется заново после добавления карточки блока. На изменение и удаление карточек расширение не подписано
• атрибут data-start-date на вывод не влияет: расчет всегда идет от текущего времени до data-end-date

Продолжите изучениеПродолжите изучение

• Интерактивные блоки: обзор сценариев
• Слайдеры
• Галереи
• Файл манифеста
• Типы нод