Deal Of The Week
Add this markup to the "Data Source" section on the Developer tab on the page where the countdown should appear (usually the homepage).
Then from the content editor view click on the Edit button for this Promotion macro, and change the SoldPage setting to use the "deal-of-the-week-sold" node in the dealer's website.
<div class="umb-macro-holder mceNonEditable"><!-- <?UMBRACO_MACRO macroAlias="Promotion" PromotionTypeId="1" DataSourceOnly="1" SoldPage="28725" PerformRedirects="0" ItemTemplate="" /> --> <ins>
<div><button class="btn-mce btn-macro-edit-inline">Edit Promotion</button><button class="btn-mce btn-macro-delete-inline">Delete</button></div>
</ins></div>
<script>
$(function () {
var dateString = "/[#Promotion_0.EndDate/]"; //Remove forward slash escape characters when installing
if (dateString != "") {
var endDate = new Date(dateString);
$('#defaultCountdown').countdown({until: endDate});
$('#year').text(endDate.getFullYear());
}
else {
// add additional styling if needed to account for when the countdown doesn't load because there is no DOW promo active.
}
});
</script>
<a id="home-dow" href="/deal-of-the-week"> <img alt="deal of the week" src="https://assets-cdn.interactcp.com/leosrv/images/ban-deal-of-the-week.jpg?modified=0410201719190246" data-assetid="6388994" /> <span id="defaultCountdown"></span></a>
https://assets-cdn.interactcp.com/interactrv/js/common_netcore/countdown.js
CSS (adjust as needed)
/* ==========================================================================
DOW
========================================================================== */
.home-dow { position: relative; }
.home-dow a { display: block; text-align: center; position: relative; }
.home-dow a:hover { text-decoration: none; }
.home-dow .dow-banner { margin: 10px auto 30px auto; display: inline-block; }
.home-dow .feature-btn-title-wrapper {display: inline-block;position: relative;margin: 15px 0; height: 85px;}
.home-dow #defaultCountdown { position: absolute; top: 120px; margin: 0 auto; left: 0; right: 0; }
.home-dow .countdown_amount { min-width: 0;width: 60px;height: 60px;padding: 6px;font-size: 35px;text-align: center;border-radius: 3px;background: #fff;color: #000;font-weight: 700;margin-bottom: 3px; box-shadow: 2px 2px 0px rgba(0,0,0,.3); }
.home-dow .countdown_section { display: inline-block;color: #fff;font-size: 14px;font-weight: 400; }
.home-dow.no-current-dow #defaultCountdown { display: none; }
.home-dow .dow-wow { position: absolute; margin: 0 auto; left: 0; right: 0; top: 0; }
.home-dow .btn-dow-shop-now {position: relative;background: #fff;color: #000;z-index: 9999;margin-top: 70px;}
@media (min-width: 768px) {
.home-dow #defaultCountdown {top: 120px;}
.home-dow .dow-banner { position: relative; display: block;margin-bottom: 0;}
.home-dow:before { content: ''; display: block;/* background: #fff; */width: 100%; height: 50px; position: absolute; top: 0; left: 0; }
.home-dow #defaultCountdown { display: inline-block;}
}
@media (min-width: 992px) {
.home-dow #defaultCountdown {top: 90px;}
#defaultCountdown { width: auto; display: inline-block; vertical-align: middle; }
.countdown_show4 .countdown_section,
.countdown_show3 .countdown_section,
.countdown_show2 .countdown_section,
.countdown_show1 .countdown_section { margin: 0 2px; }
.countdown_amount { display: inline-block; min-width: 75px; font-size: 36px; color: #fff; padding: 10px; margin-bottom: 5px; }
.dow-click-text { top: 15px; }
}
@media (min-width: 1600px) {
.home-dow #defaultCountdown {top: 80px;}
.home-dow .countdown_amount { width: 80px; height: 100px; padding: 20px 6px; font-size: 45px; }
.home-dow .countdown_section { font-size: 14px; }
}
/* jQuery Countdown styles 1.6.3. */
#defaultCountdown {width: auto;margin: 0 auto;text-align:center;background: none;display: block;vertical-align: middle;}
.countdown_rtl { direction: rtl; }
.countdown_holding span { color: #888; }
.countdown_row { clear: both; width: 100%; padding: 0; text-align: center; }
.countdown_section { display: inline-block; font-size: 75%; text-align: center; color: #ddd; position: relative; }
.countdown_descr { display: block; width: 100%; }
.dow-countdown-large { display: block; margin: 10px auto 10px auto; }
.countdown_show4 .countdown_section,
.countdown_show3 .countdown_section,
.countdown_show2 .countdown_section,
.countdown_show1 .countdown_section { margin: 0 2px; }
.countdown_amount { display: inline-block; min-width: 50px; background: #000; border-radius: 5px; font-size: 24px; color: #fff; padding: 5px; margin-bottom: 5px; }
.dow-countdown-large .countdown_section { font-size: 14px; color: #fff; position: relative; }
.dow-unit-countdown { position: relative; background: none; display: block; }
.dow-unit .well { padding: 20px 0; }
.dow-unit .dow-unit-countdown { margin: 5px auto 20px auto; }
.dow-unit .dow-btn-cta { display: inline-block; margin: 0 auto 30px auto; font-size: 21px!important; font-weight: 600; padding: 15px; }
.dow-unit-social { display: block; margin: 0 auto; text-align: center; }
.dow-share-facebook, .dow-share-facebook:hover { color: #395C94; }
.dow-share-twitter, .dow-share-twitter:hover { color: #2EC4F9; }
.dow-share-gplus, .dow-share-gplus:hover { color: #F9442F; }
.dow-unit-social span { display: block; position: relative; top: -5px; margin-right: 10px; }
.dow-unit-social a { display: inline-block; font-size: 28px; }
.dow-unit-social a:hover { text-decoration: none; opacity: .8 }
.dow-unit .liftedCorners { padding: 0; }
.dow-unit { text-align: center; }
.dow-unit-title { margin-top: 30px; text-align: center; display: block; font-size: 28px; font-weight: 600; line-height: 1em; }
.dow-unit-price-container { text-align: center; margin: 10px 0; color: #990000; font-size: 35px; font-weight: 600; }
.dow-unit-timer-text { text-align: center; font-style: italic; }
.dow-btn-cta { display: inline-block; margin: 30px auto; }
.dow-unit-share-container { display: block; clear: both; }
.dow-signup { margin: 50px 0; }
.dow-signup p { font-size: 18px; margin-bottom: 20px; }
.dow-signup { text-align: center; }
.dow-signup .well { display: inline-block; }
.dow-signup .well p { display: none; }