Countdown Timer for Promotions in 1C-Bitrix: Development and Integration

We develop an efficient custom countdown timer for promotions in 1C-Bitrix that boosts conversion by 15–25%. A typical scenario: on a product card with a limited discount, you need to show the remaining time until the promotion ends. Bitrix's built-in discount mechanism sets a validity period, but a visual front-end countdown requires separate implementation via components and JavaScript. In one project, we integrated a timer for 250 products on a listing — without batch mode, the page took 15 seconds to load. After optimization — 0.3 seconds. This approach saves up to 40% of loading time. A properly implemented timer increases conversion due to the urgency effect and psychological pressure of limited product availability. We apply a comprehensive approach to server-client synchronization, performance optimization, and integration with the Bitrix system.

Data Source: Where to Get the End Date

The timer must show the actual promotion period, not decorative numbers. In Bitrix, promotion dates are stored in several places:

• Catalog discounts — table b_catalog_discount, fields ACTIVE_FROM and ACTIVE_TO. Retrieved via \Bitrix\Catalog\DiscountTable::getList() with filter ACTIVE = Y and ACTIVE_TO > NOW().
• Basket rules — table b_sale_discount, similar fields. API: \Bitrix\Sale\Internals\DiscountTable::getList().
• Product property — you can create an infoblock property PROMO_END_DATE of type "Date/Time" and fill it manually or automatically when a product is linked to a promotion.

In practice, we recommend combining all approaches: for simple discounts on one or two products in the catalog, use a product property; for systemic basket rules, use the b_sale_discount table. This ensures full flexibility and simplifies promotion management for administrators.

Choosing the source depends on your usage scenario and data structure. If the timer is displayed on a product card, a product property or catalog discount is convenient. If the timer is global (a banner on the main page), use a basket rule or a separate promotion infoblock.

Component Architecture

We create a custom component local:sale.countdown in /local/components/local/sale.countdown/ with full caching support. The standard structure:

• class.php — data selection logic.
• templates/.default/template.php — HTML markup.
• templates/.default/script.js — JavaScript countdown logic.
• .parameters.php — configurable component parameters.

Component parameters:

In class.php, the component retrieves the end date from the selected source and passes a timestamp to the template:

$this->arResult['TIMESTAMP_END'] = (new \Bitrix\Main\Type\DateTime($endDate))->getTimestamp(); 

Why the Timer Must Be Tied to Real Discounts?

If the date is hardcoded in the template, the timer won't update when the promotion changes in the admin panel. The component dynamically queries ACTIVE_TO from the database, uses tagged cache, and resets when the discount is modified via event handlers. A synchronization error can cost up to $900–1.3k in lost profit due to an incorrect promotion.

How to Synchronize Time on Client and Server?

Client clocks may differ from server clocks — this is critical for a timer. Solution: the server passes not only TIMESTAMP_END, but also TIMESTAMP_SERVER — the current server time. JavaScript calculates the delta and adjusts the countdown:

const serverNow = parseInt(container.dataset.serverTime); const clientNow = Math.floor(Date.now() / 1000); const drift = serverNow - clientNow; const remaining = endTime - (Math.floor(Date.now() / 1000) + drift); 

Updating the DOM every second via setInterval works. But for multiple timers on a page (a product listing with promotions), a single requestAnimationFrame loop that updates all timers in one pass is better. Practical advice: the drift often reaches 5-7 seconds on weak computers, so always apply correction, even if the server and client are usually synchronized.

Action on expiry. When remaining <= 0, the timer should not just stop. Options: hide the promotion block, replace the "Buy with discount" button with a normal one, display a "Promotion ended" message. For button change — an AJAX request to the server to check the discount's validity and re-render the price block.

Integration with Composite Cache

Bitrix's composite cache (autocomposite) caches the entire HTML page. A timer with a server timestamp in the HTML breaks the cache: each hit becomes unique.

Solution — place the timer block in a dynamic area. In template.php:

$frame = new \Bitrix\Main\Page\Frame('countdown_' . $this->arParams['DISCOUNT_ID']); $frame->begin(); // Timer HTML $frame->end(); 

Inside the dynamic area, the HTML updates on each request, while the rest of the page is served from cache.

Alternative — don't output the timestamp in HTML at all. Instead, store it in a separate endpoint (/ajax/countdown.php) that JavaScript requests once on page load. The page is fully cached; timer data is loaded separately.

\Bitrix\Main\EventManager::getInstance()->addEventHandler( 'catalog', 'OnAfterCatalogDiscountUpdate', function ($discountId) { \Bitrix\Main\Data\Cache::clearCacheByTag('catalog_discount_' . $discountId); } );