Redirect user to catalog after the timer runs out

[Loftop]

Hi! I need to redirect a user from home page (page with countdown) to a catalog when the timer runs out. I already got the timer working and it redirects the user but the page refreshes again and again, but when I redirect user to a google.com it doesn't do that.

js

   <script>
    const countDown = () => {
	const countDate = new Date('December 2, 2021 11:25:00').getTime(); // CHANGE THE TIME TO A DROP COUNTDOWN
	const now = new Date().getTime();
	const gap = countDate - now;

    // Calculations for Time
    const second = 1000;
    const minute = second * 60;
    const hour = minute * 60;
    const day = hour * 24;
    
    // Calculate missing days
    const finalDay = Math.floor(gap / day);
    const finalHour = Math.floor((gap % day) / hour);
    const finalMinute = Math.floor((gap % hour) / minute);
    const finalSecond = Math.floor((gap % minute) / second);
    
    document.querySelector('.day').innerText = finalDay;
    document.querySelector('.hour').innerText = finalHour;
    document.querySelector('.minute').innerText = finalMinute;
    document.querySelector('.second').innerText = finalSecond;

      if(gap < 10000){
         window.location.replace("/products"); //PRODUCT SITE (site you want to redirect user when countdown hits 0)
        }
    };
      setInterval(countDown, 1000)
    </script>

[Junaid-Ahmed]

Hey, I can think of two solutions here

you want the user to be redirected from homepage only once

To accomplish this, you'll need to add a flag in the browser once a redirect happens.

you have put the Javascript code on all pages and now your catalog page is getting redirected to itself?

To overcome this, you just need to include the Javascript code on the homepage which will fix your catalog page getting redirected to itself.

Let me know if you want the first solution, I'll revise the code to accomplish the solution.

[Loftop]

Oh, I think that could be it, the code is on the theme.liquid, so I need to delete this code and paste it into index.json to work only on the home page?

[Junaid-Ahmed · Accepted solution]

That's correct. But you can't add custom code inside index.json. But you can put it inside the section file that displays the countdown.

Another solution to keep the code inside theme.liquid is to wrap the code in a conditional statement. Here's how:

{% if template.name == 'index' %} 
... your JS code here ...
{% endif %}

This will limit your JS code to the homepage only. 

[Loftop]

Thank you very much, you are a lifesaver