Solved

Redirect user to catalog after the timer runs out

Loftop
Shopify Partner
12 0 1

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>
Accepted Solution (1)
Junaid-Ahmed
Shopify Partner
79 17 16

This is an 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. 

- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.

View solution in original post

Replies 4 (4)

Junaid-Ahmed
Shopify Partner
79 17 16

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.

- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
Loftop
Shopify Partner
12 0 1

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
Shopify Partner
79 17 16

This is an 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. 

- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
Loftop
Shopify Partner
12 0 1

Thank you very much, you are a lifesaver