Decrementing counters

And the extension landing_countdown in the manifest block.

'assets' => array(
   'ext' => array('landing_countdown'),
),

And the following key in the manifest section block:

'version' => '18.5.0'

The 'version' parameter is optional. It limits adding of this block in the version older that the indicated one, when the required assets were not yet available.

And attributes of the counter container node to the node that match the required description and must act as counter. See details in the example.

'attrs' => array(
   '.landing-block-node-date' => array(
      'name' => Loc::getMessage('LANDING_BLOCK_51_2_COUNTDOWN_04--DATE'),
      'time' => true,
      'type' => 'date',
      'format' => 'ms',
      'attribute' => 'data-end-date',
   ),
),

Layout

Timer must contain 4 digital items, marked by corresponding classes:

js-cd-days - days
js-cd-hours - hours
js-cd-minutes - minutes
js-cd-seconds - seconds

The option adding a year is unavailable; its unpractical to create such long timers on a site.

Wrap the digits into general container, marked by the class js-countdown. Pass the settings to the same container via data attributes.

data-end-date="1586690955000" - time end date in Unix-time format in milliseconds. I. e. the received unix-date must be multiplied by 1000.
data-days-format="%D" - days view format
data-hours-format="%H" - hours view format
data-minutes-format="%M" - minutes view format
data-seconds-format="%S" - seconds view format

Two format variants are available:

"%S" - shows number with zeros in front: "03", but "18",
"%-S" - shows significant characters only: "3" or "18".

Instead of "%H", use "%I" or "%-I". It is the value of total number of hours till the finish (i. e., 1 day 6 hours are converted to 30 hours). In this case, data-days-format and the node .js-cd-days must be deleted.

Optional parameter:

data-days-expired-classes="u-countdown--days-expiried"

When the number of says becomes zero, the time can add a class. It helps to hide zero number of says, or to highlight them specifically. It is done via the class .u-countdown--days-hide.

Example

See examples of blocks of this type in our repository, by using the methods landing.block.getmanifestfile and landing.block.getrepository. Their codes:

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
51.1.countdown_01

Example of simple timer

<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="1555249081000"
       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>