Countdown timer stopped working

Ask the community
,
1

I have recently created a series of workshop videos for our customer base that was spread over 4 days.

Each day had it’s own page for simplicity and I modified the code example here: https://www.wix.com/corvid/forum/community-discussion/countdown-timer-1?origin=auto_suggest
so that the video would display at a certain time and date.

Before the video was open, it showed a simple countdown timer (iframe, not the one in the code example) that said “This workshop opens in x time”.

As soon as the timer hit zero, the video would open and a different timer would start that said “This workshop expires in y time”.

When the variable y got to zero, the video stopped and a message is displayed to say “This workshop video has expired”.

The one most important part of the page was a button that popped up after people had watched a certain amount of the video to coincide with the offer we were making.

I tested this out for each day and it all worked perfectly on each page on different browsers and devices. So I launched it with confidence that it would continue to work.

On day 4 however, a few things stopped working. The second countdown timer stopped being displayed (it seemed like it wasn’t loading anymore) and the register your interest button stopped being displayed. It all still worked perfectly in the preview mode however when I checked in on the published site, it wasn’t being displayed and neither was the button.

As this workshop series is still live and I don’t want to mix in any non customers, I’ll post the URL’s and code base in a couple of days when it is complete.

In the meantime, I’m wondering, could this be something to do with the browser, or maybe a cache setting? I read on one of the comments on the example for this countdown timer that it might make the browser stop working.

If that is the case, is there another way to set something to expand/collapse at a specific time and date that doesn’t require the browser to run the code every second?

I’d be really happy for any insight anyone might be able to provide.

Here is the code snippet for reference:

import wixLocation from 'wix-location';
import wixWindow from 'wix-window'; 
import {post_addContactTag} from 'backend/activeCampaign';

let ActiveCampaignID = wixLocation.query.id; 

var countDownDate = Date.parse("Oct 22, 2020 08:00:00"); // Set the date you wish the video to be shown
var videoEndDate = Date.parse("Oct 24, 2020 16:00:00"); //Set the date you wish the video to stop showing 

$w.onReady(function (){

 if((countDownDate-new Date().getTime())>0){
        countDownTimerStart(countDownDate);        
    }
 else {
 if((videoEndDate-new Date().getTime())>0){
        countDownTimerEnd(videoEndDate);
 //console.log("timing works")
    }
 else {
 if((videoEndDate-new Date().getTime())<0){
            videoExpired();
    }
    }
    }    
});

function countDownTimerStart(date){
 var x = setInterval(function() {
 var now = new Date().getTime();
 var starting = date - now;
    $w('#countdown2').expand(); //The countdown timer that displays time until the workshop opens
 
 if (starting < 0) {
            clearInterval(x);
            $w("#countdown2").collapse();
            $w("#countDownTimer").collapse(); //Text to say the workshop has expired. Bad element naming I know. Also probably a redundant line. 

            countDownTimerEnd(videoEndDate)
        }
    }, 1000);
}

function countDownTimerEnd(date){
 
    $w('#videoPlayer1').expand(); //expand the video to show the content
    $w("#countDownTimer").collapse(); 
    $w('#countdown1').expand(); //Line 50 and 51 and 74 have errors because I deleted the element on the page as a soluton until the end of the workshop series.
    $w('#countdown1').show();
 var y = setInterval(function() {

 //console.log("Timer Should Display")
 let currentTime = $w("#videoPlayer1").currentTime //check if someone has watched to a certain point in the video
 //console.log(currentTime)
 if(currentTime>452){
        $w('#button9').expand(); //show special offer button
 

        }
 var now = new Date().getTime();
 var starting = date - now;

 if (starting < 0) {
            clearInterval(y);
            videoExpired();
        }
    }, 1000);
}

function videoExpired(){
        $w("#countDownTimer").expand();
        $w("#countdown1").collapse();
        $w("#countdown2").collapse();
        $w('#videoPlayer1').collapse();
        $w('#videoPlayer1').stop();
        $w('#button9').collapse();
        $w('#text158').collapse();
 
}

export function button9_click(event) {
 if(ActiveCampaignID !== undefined){//if the userid exists, add a tag to their contact in our CRM
    post_addContactTag(ActiveCampaignID);
    $w('#button9').label = "Thanks for Registering"
    $w('#button9').disable();
    wixLocation.to("/pl-reg-interest-thank-you");
 
    }
 else {  
    wixWindow.openLightbox("Customer ID Missing Workshop Opt In"); //if the userid doesn't exist, open a form to submit for the same effect.
    }
}

Thanks