Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

Making a folder clickable in Squarespace 7.1


Recommended Posts

@JuleeBode

Menus on desktop and mobile work fundamentally different ways.

By default on desktop the folder itself is not an active link. It is there to hover over with a mouse which activates the folder menu.

On mobile there is no concept of hovering with a mouse. So the folder is an active link that you touch and that is how you dive deeper into the folder menu.

Could the folder url on mobile be changed? Yes. But that would make inaccessible all the menu items in the folder.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment

@tuanphan 

My URL is www.joeystephensmusic.com.  

I added your code to make the "Booking" folder clickable in desktop view.  So, now I would like the "Booking Info" link under that folder to ONLY appear in the Mobile View, as it is repetitive on the desktop view("booking" goes to booking page and "booking info" also goes to booking page).

I'd like my Desktop View to look like...

Booking

- Client List

- Bio

...the mobile view is fine as is...

Booking Info

Client List

Bio

Link to comment
On 5/3/2021 at 11:35 PM, joeystephensmusic said:

@tuanphan 

My URL is www.joeystephensmusic.com.  

I added your code to make the "Booking" folder clickable in desktop view.  So, now I would like the "Booking Info" link under that folder to ONLY appear in the Mobile View, as it is repetitive on the desktop view("booking" goes to booking page and "booking info" also goes to booking page).

I'd like my Desktop View to look like...

Booking

- Client List

- Bio

...the mobile view is fine as is...

Booking Info

Client List

Bio

Add to Design > custom CSS

/* remove booking info on desktop */
a.header-nav-folder-title[href="/booking"] + div>div:first-child {
    display: none;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
On 5/3/2021 at 11:35 PM, joeystephensmusic said:

@tuanphan 

My URL is www.joeystephensmusic.com.  

I added your code to make the "Booking" folder clickable in desktop view.  So, now I would like the "Booking Info" link under that folder to ONLY appear in the Mobile View, as it is repetitive on the desktop view("booking" goes to booking page and "booking info" also goes to booking page).

I'd like my Desktop View to look like...

Booking

- Client List

- Bio

...the mobile view is fine as is...

Booking Info

Client List

Bio

Also, do you want to improve these? If yes, you can create new question.

Site URL – https://www.joeystephensmusic.com/

1. (Mobile-Products) Show breadcrumb on top?

joeystephensmusic.com-01-min.png

2. (Mobile-Support Joey) Payment icons look big. Want to reduce size a bit?

joeystephensmusic.com-02-min.png

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 4 weeks later...
  • 4 weeks later...

@epete22

Please post the URL for your site.

If your site is not public please set up a site-wide password, if you've not already done so.

Post the password here.

Adding a site-wide password is not a security breach. Please read the documentation at the link provided to understand how it works.

We can then take a look at your issue.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
1 hour ago, creedon said:

@epete22

Please post the URL for your site.

If your site is not public please set up a site-wide password, if you've not already done so.

Post the password here.

Adding a site-wide password is not a security breach. Please read the documentation at the link provided to understand how it works.

We can then take a look at your issue.

wearegenerous.agency

I tried the 7.0 script but don't think I did it correctly.

The folder page title is 'How We Help' with the url 'services' and the page it needs to link to is 'services overview' with the url 'services-overview'

 

<script>

 

  $( ( ) => {

  

    /*

    

      begin make navigation folders clickable

      

      SS Version : 7.0

      Template   : Marquee template family

      

      */

      

      const folderNavigationTitleUrlMappings = {

      

        /*

 

          the format of each line is the folder page Navigation Title and the

          URL for the folder

 

          for each folder page copy value from Folder Settings > General >

          NAVIGATION TITLE field. you only need exactly what can be selected

          from the field

          */

        // '[enter folder page navigation title here]' : '[enter url here]',

        ‘How We Help : ‘/services,

 

        // last or only item doesn't get a comma at end of line

        ‘Services overview’ : '/services-‘overview

        }

      // do not change anything below, there be the borg here

      $( '.main-nav .folder-parent > a' ).each ( function ( ) {

        let $this = $( this );

        const folderNavigationTitle = $this.text ( );

        const url = folderNavigationTitleUrlMappings [ folderNavigationTitle ];

        if ( url == undefined ) return true;

        $this.attr ( 'href', url );

        } );

      // end make navigation folders clickable 

    } );    

  </script>

Link to comment
On 4/8/2021 at 12:42 AM, creedon said:

I have updated my Feb. 12th code post. If your current code for a v7.1 is working there is no need to update. The main change to the code is the option to not specify any mappings and the code will automatically make the folder link point to the first page in the folder.

Hi @creedon!

Its very kind of you to help us all with this! I appreciate your time.

 

I'm having some trouble...I'm not specifying URLS, just hoping the folder title links to the first page within it.

 

Heres my Header code:

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


<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<link href="https://assets.codepen.io/3198845/WMSlider121520v3.2.14.min.css" rel="stylesheet">

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

 

Heres the footer (minus the Squarekicker code):

 

<script>


  
    /*
    
      begin make navigation folder URL Slugs clickable
      
      Version      : 0.5d2
      
      SS Version   : 7.1
      
      Dependancies : jQuery
      
      By           : Thomas Creedon < http://www.tomsWeb.consulting/ >
      
      */
      
      $( ( ) => {  const folderToPageUrlSlugMap = {
              
       
         
        
        }
        
      // do not change anything below, there be the borg here
      
      if ( ! Object.keys ( folderToPageUrlSlugMap ).length ) {
      
        $( '.header-nav-folder-title' ).each ( function ( ) {
        
          const $this = $( this );
          
          const key = $this
          
            .attr ( 'href' )
            
            .slice ( 1 );
            
          let url = $this
          
            .next ( )
            
            .find ( '.header-nav-folder-item:first a' )
            
            .attr ( 'href' );
            
          if ( url === undefined ) return true;
          
          url = url.slice ( 1 );
          
          folderToPageUrlSlugMap [ key ] = url;
          
          } );
          
        }
        
      const keys = Object.keys ( folderToPageUrlSlugMap );
      
      $.each ( keys, function ( i, key ) {
      
        let url = folderToPageUrlSlugMap [ key ];
        
        if ( ! url.includes ( '://' ) ) url = '/' + url;
        
        $( '.header-nav-folder-title[href="/' + key + '"]' ).each ( function ( ) {
        
          $( this )
          
            .attr ( 'href', url )
            
            .click ( function ( ) {
            
              location.href = $( this ).attr ( 'href' );
              
              } );
              
          } );
          
        } );
        
      // end make navigation folder URL Slugs clickable
      
    } );
    
  </script>


<script src="https://assets.codepen.io/3198845/WMSlider121520v3.2.14.min.js"></script>


<!-- Summary Block Autoplay -->
<script>
      setInterval(click, 10000);
      function click()
      {
        $(".summary-carousel-pager-next").click();
      }
</script>


<!-- SquareKicker.com | Extension | START --><script>
  if (window.self !== window.top &&
      window.top.Static.SQUARESPACE_CONTEXT.authenticatedAccount) {
    var sk = document.createElement('script');
    sk.type = 'text/javascript';
    sk.id = "squarekicker";
    sk.src = "https://extension.squarekicker.com/kicker.js";
    sk.dataset.sktoken = "923961ec9ccde33aed8916d305991915";
    document.querySelector('head').appendChild(sk);
  }

 

 

Link to comment

@nicolettely

I don't think this is an issue with the code working but you may want to remove the following lines from code injection header.

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

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

In general you only need 1 copy of jQuery loaded.

As to your issue.

Please post the URL for your site.

If your site is not public please set up a site-wide password, if you've not already done so.

Post the password here.

Adding a site-wide password is not a security breach. Please read the documentation at the link provided to understand how it works.

We can then take a look at your issue.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
48 minutes ago, creedon said:

@nicolettely

I don't think this is an issue with the code working but you may want to remove the following lines from code injection header.

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

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

In general you only need 1 copy of jQuery loaded.

As to your issue.

Please post the URL for your site.

If your site is not public please set up a site-wide password, if you've not already done so.

Post the password here.

Adding a site-wide password is not a security breach. Please read the documentation at the link provided to understand how it works.

We can then take a look at your issue.

https://genderfck.squarespace.com/

pw: gf21

 

Thanks! I deleted those- I checked in an incognito window and it actually loads correctly on the front side. However the line is missing from just the first two folders when those pages are selected. 

Also the original issue (which may have just been on the editor side all along) still exists. When I click a folder link in the editor, it loads twice or loads then jumps back to the prior page. 

Thanks for any help. 

 

Link to comment
5 hours ago, nicolettely said:

However the line is missing from just the first two folders when those pages are selected. 

My code doesn't have anything to do with the styling of the links. That is all SS.

I took a look and I don't have an idea why some are getting the line and some not. The ones that are getting the line are having the class header-nav-item--active applied. The only thing I can think of off the top is that there is a difference in how the menu are assembled?

Quote

When I click a folder link in the editor, it loads twice or loads then jumps back to the prior page. 

I'm not seeing double loading from here.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
  • 1 month later...

I added this code to the header

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

along with the code you gave that i customized and it still doesn't work. what am I doing wrong?

Link to comment
20 hours ago, sabrine said:

I added this code to the header along with the code you gave that i customized and it still doesn't work. what am I doing wrong?

I don't know I can't see your site.

Please post the URL for your site.

If your site is not public please set up a site-wide password, if you've not already done so.

Post the password here.

Adding a site-wide password is not a security breach. Please read the documentation at the link provided to understand how it works.

We can then take a look at your issue.

Edited by creedon

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment

@sabrine

You need to follow the second Quick Install instruction.

Quote

Add code from file make navigation folders clickable.html to Settings > Advanced > Code Injection > FOOTER.

After that code is added it needs to be modified as mentioned earlier in this thread.

After the following line...

// '[enter folder page url slug here]' : '[enter page url slug here]',

...add the following.

'/roster' : 'rosterfr',

Then remove the following from Settings > Advanced > Code Injection > HEADER.

<script>// ‘/roster’ : ‘rosterfr',
        
        ‘/roster' : ‘rosterfr’, </script>

A note. If you use a word processor to edit the code you'll want to turn off smart quotes. Smart single and double quotes may cause problems with the code.

Dumb quotes are ' "

Smart quotes are ‘ ”

I updated the README to link directly to the code file to make it easier to find.

Let us know how it goes.

Edited by creedon

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment

@sabrine

The first is my bad. Change the line...

// '/roster' : 'rosterfr',

...to...

'/roster' : 'rosterfr',

I left the // in my explanation to you by mistake!

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>

Let us know how it goes.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment

@creedon still no luck...

here's what i have pasted into the header section:
 

Quote

 

<script>

  $( ( ) => {
 
    /*
    
      begin make navigation folder URL Slugs clickable
      
      Version      : 0.5d2
      
      SS Version   : 7.1
      
      Dependancies : jQuery
      
      By           : Thomas Creedon < http://www.tomsWeb.consulting/ >
      
      */
      
      const folderToPageUrlSlugMap = {
      
        /*
        
          adding lines here is optional, when no lines are added the folder will
          link to the first page in the folder
          
          the format of each line is a folder page URL Slug and a destination
          page URL Slug
          
          for each folder page copy value from Folder Settings > General >
          URL SLUG field. you only need exactly what can be selected from the
          field
          
          for each destination page copy value from page Settings > General >
          URL SLUG field. you only need exactly what can be selected from the
          field
          
          duplicate the line below and remove the "// " at the beginning of the
          line
          
          */
          
        // '[enter folder page url slug here]' : '[enter page url slug here]',
        '/roster' : 'rosterfr',
        
        }
        
      // do not change anything below, there be the borg here
      
      if ( ! Object.keys ( folderToPageUrlSlugMap ).length ) {
      
        $( '.header-nav-folder-title' ).each ( function ( ) {
        
          const $this = $( this );
          
          const key = $this
          
            .attr ( 'href' )
            
            .slice ( 1 );
            
          let url = $this
          
            .next ( )
            
            .find ( '.header-nav-folder-item:first a' )
            
            .attr ( 'href' );
            
          if ( url === undefined ) return true;
          
          url = url.slice ( 1 );
          
          folderToPageUrlSlugMap [ key ] = url;
          
          } ); // end each
          
        }
        
      const keys = Object.keys ( folderToPageUrlSlugMap );
      
      $.each ( keys, function ( i, key ) {
      
        let url = folderToPageUrlSlugMap [ key ];
        
        if ( ! url.includes ( '://' ) ) url = '/' + url;
        
        $( '.header-nav-folder-title[href="/' + key + '"]' )
        
          .each ( function ( ) {
          
            $( this )
            
              .attr ( 'href', url )
              
              .click ( function ( ) {
              
                location.href = $( this ).attr ( 'href' );
                
                } );
                
            } ); // end each
            
        } ); // end each
        
      // end make navigation folder URL Slugs clickable
      
    } );
    
  </script>

 

and the footer:

Quote

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

perhaps it is another piece of code that is preventing this from working?

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...