Overview
This article details the implementation of a configurable countdown timer in the header banner area of the website. The timer dynamically adjusts based on configuration records and displays different background images for desktop and mobile devices.
Requirements Addressed
- Dynamic Configuration
- Start date, end date, button text, colors, and links are dynamically configurable via a NetSuite configuration record.
- Countdown Functionality
- The timer displays the remaining time until the specified end date dynamically.
- Functionality aligns with the design provided in the mockup.
- Design and Styling
- Adheres to the visual specifications, with styles and colors configurable via the configuration record.
- Integration
- Timer is prominently displayed in the header banner and ensures responsiveness for desktop and mobile views.
Solution
This solution utilizes a template to separate desktop and mobile views, combined with CSS media queries to dynamically adjust the background images based on device screen size.
Implementation Details
1. Updated Template Code
Add the following code to the relevant template file:
HTML
<div class=”header-top-content3″>
<!– Desktop Background –>
<div class=”desktop-background”
style=”background-image: url(‘{{HomepageBannerCountdownTimersectionBackgroundImage}}’);
background-size: cover;
background-position: center;
background-color: {{HomepageBannerCountdownTimersectionBackgroundcolor}};”>
<div id=”countdown-container” class=”header-top-inline”>
<span id=”countdown-timetext” class=”header-top-message”></span>
<div id=”countdown-timer” class=”countdown-timer”>
<div class=”countdown-item”
style=”background-color: {{HomepageBannerCountdownTimerBackgroundColor}};”>
<span id=”countdown-hours” class=”count-value”>0</span>
<span class=”count-label”>H</span>
</div>
<div class=”countdown-item”
style=”background-color: {{HomepageBannerCountdownTimerBackgroundColor}};”>
<span id=”countdown-minutes” class=”count-value”>0</span>
<span class=”count-label”>M</span>
</div>
<div class=”countdown-item”
style=”background-color: {{HomepageBannerCountdownTimerBackgroundColor}};”>
<span id=”countdown-seconds” class=”count-value”>0</span>
<span class=”count-label”>S</span>
</div>
</div>
</div>
</div>
<!– Mobile Background –>
<div class=”mobile-background”
style=”background-image: url(‘{{HomepageBannerCountdownTimersectionBackgroundImagemobile}}’);
background-size: cover;
background-position: center;
background-color: {{HomepageBannerCountdownTimersectionBackgroundcolor}};”>
<div id=”countdown-container” class=”header-top-inline”>
<span id=”countdown-timetext” class=”header-top-message”></span>
<div id=”countdown-timer” class=”countdown-timer”>
<div class=”countdown-item”
style=”background-color: {{HomepageBannerCountdownTimerBackgroundColor}};”>
<span id=”countdown-hours” class=”count-value”>0</span>
<span class=”count-label”>H</span>
</div>
<div class=”countdown-item”
style=”background-color: {{HomepageBannerCountdownTimerBackgroundColor}};”>
<span id=”countdown-minutes” class=”count-value”>0</span>
<span class=”count-label”>M</span>
</div>
<div class=”countdown-item”
style=”background-color: {{HomepageBannerCountdownTimerBackgroundColor}};”>
<span id=”countdown-seconds” class=”count-value”>0</span>
<span class=”count-label”>S</span>
</div>
</div>
</div>
</div>
</div>
2. CSS Styling
Add the following CSS code to handle the visibility of the desktop-background and mobile-background sections based on screen size:
/* Default: Desktop view */
.desktop-background {
display: block;
}
.mobile-background {
display: none;
}
/* Mobile View: screen width less than 992px */
@media screen and (max-width: 992px) {
.desktop-background {
display: none;
}
.mobile-background {
display: block;
}
}
3. JavaScript Countdown Functionality
Add the following JavaScript code to calculate and display the countdown timer dynamically:
javascript Copy code
document.addEventListener(‘DOMContentLoaded’, function () {
const endDate = new Date(‘{{HomepageBannerCountdownTimerEndDate}}’);
const timerContainer = document.getElementById(‘countdown-timer’);
function updateCountdown() {
const now = new Date();
const timeDiff = endDate – now;
if (timeDiff > 0) {
const hours = Math.floor((timeDiff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const minutes = Math.floor((timeDiff % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((timeDiff % (1000 * 60)) / 1000);
document.getElementById(‘countdown-hours’).innerText = hours;
document.getElementById(‘countdown-minutes’).innerText = minutes;
document.getElementById(‘countdown-seconds’).innerText = seconds;
} else {
timerContainer.innerHTML = ‘<span>Countdown Ended!</span>’;
}
}
setInterval(updateCountdown, 1000);
});
Testing and Validation
- Configuration Record Testing:
- Test the dynamic configuration record to verify that start date, end date, colors, and button text are correctly applied.
- Validate that mobile and desktop background images load as configured.
- Responsive Testing:
- Check the behavior on devices with varying screen sizes to ensure the correct background image is displayed.
- Cross-Browser Testing:
- Test the countdown timer functionality on major browsers (Chrome, Safari, Firefox, Edge).
- Edge Cases:
- Ensure the countdown timer handles cases when the end date has passed gracefully by displaying “Countdown Ended!” or hiding the timer.
Conclusion
This solution ensures a highly customizable and responsive countdown timer that meets the requirements for dynamic configuration, styling, and device-specific behavior. The provided implementation can be adapted for similar banner-based functionality on other sections of the website.