Jump to content

Change Button Link URL based on time

Recommended Posts

Site URL: https://www.willkonitzer.com

Hi,

I have a button on my website "Listen now" where I'd like the target url to change pending on the time of day. Every Friday from 6pm-7pm CST I want it to point to website B, while at all other times I want it to point to website A.

What is the best way to achieve this? I was thinking some javascript code, but I'm not sure how to apply it within the squarespace design framework.

If someone is able to provide some pointers, that would be much appreciated.

-Will

Link to comment
  • Replies 5
  • Views 1.3k
  • Created
  • Last Reply

Add the following to Settings > Advanced > Code Injection > HEADER.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Add the following to Page Settings > Advanced > Page Header Code Injection for the page.

<script>

  $( ( ) => {
  
    /*
    
      change button block url on Fridays 6 - 7 PM CST & CDT
      
      Version      : 0.2d0
      
      SS Versions  : v7.0, 7.1
      
      Dependancies : jQuery
      
      Note         : this code assumes there is only one button block on the
                     page
      
      By           : Thomas Creedon < http://www.tomsWeb.consulting/ >
      
      */
      
    const url = '[enter alternate button block url here between quotes]';
    
    // do not change anything below, there be the borg here
    
    const d = new Date ( );
    
    // first friday after time change to CDT 2021 various times
    
      // d = Date.parse ( '19 Mar 2021 17:59:59 CDT' ); d = new Date ( d );
      
      // d = Date.parse ( '19 Mar 2021 18:00:00 CDT' ); d = new Date ( d );
      
      // d = Date.parse ( '19 Mar 2021 18:59:59 CDT' ); d = new Date ( d );
      
      // d = Date.parse ( '19 Mar 2021 19:00:00 CDT' ); d = new Date ( d );
      
    // first friday after time change to CST 2021 various times
    
      // d = Date.parse ( '05 Nov 2021 17:59:59 CST' ); d = new Date ( d );
      
      // d = Date.parse ( '05 Nov 2021 18:00:00 CST' ); d = new Date ( d );
      
      // d = Date.parse ( '05 Nov 2021 18:59:59 CST' ); d = new Date ( d );
      
      // d = Date.parse ( '05 Nov 2021 19:00:00 CST' ); d = new Date ( d );
      
    const dayOfWeekNumber = d.getUTCDay ( ) + 1;
    
    const hour = d.getUTCHours ( );
    
    let utcData = {
    
      false : { // standard time
      
        dayOfWeek : 7,
        
        hour : 0
        
        },
        
      true : { // daylight savings time
      
        dayOfWeek : 6,
        
        hour : 23
        
        }
      }
      
    utcData = utcData [ d.isDST ( ) ];
    
    if ( dayOfWeekNumber != utcData.dayOfWeek ) return;
    
    if ( hour != utcData.hour ) return;
    
    $( '.sqs-block-button a' )
    
      .attr ( 'href', url );
      
    } );
    
  </script>

Let us know how it goes.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

I think you are right! My bad.

I have updated my code.

It is no fun working with time in code! 😀

This updated code should work OK for CDT until November when we fall back. To make it work then you'd change 23 to 0. Better yet a new version of the code would take care of the time change itself. Not sure when/if that will happen but I have some time! 🙂

There is one more improvement that comes to mind. Currently the code runs when the page is loaded. Which will probably work for a majority of the cases. But what happens if someone loads the page, walks away, and then come back to it sometime later? Well they might have a stale button. It might be better to run the code when the button is clicked.

I also left in some commented code for testing in case anyone is using the console and debugging. You can put a breakpoint after the date is first gotten, then override with the commented code to test the date/time.

How did your test go?

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
  • 2 weeks later...

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.