Jump to content

How to put a button to a specific page on the category filtered page

Recommended Posts

Thanks for replying, Creedon!
I know there is an "EDIT" menu on the normal page, and I can add a button block.

01.thumb.png.955c5a8931cb023b785914a781aca111.png

But on the category filtered page, there is no "EDIT" menu, so I can't add any blocks.

02.thumb.png.051e13c9afda1e912d3e02c9d65fdba5.png

 

Is there any specific way to do that?
I wonder it depends on the template.
I'm using "Burke."

Link to comment

Ah I see where you are going now. Thank you for the clarification. The category pages themselves are not editable.

The only technique I know of would be to use Javascript and some custom code. This requires the business plan or above.

You only want to put one button on one category page? Or do you for-see the possibility of needing different buttons on different pages?

The pattern of needing to add something to a particular spot on a page but SS doesn't provide such functionality is fairly common and there are several techniques that could be adapted to your need, I think.

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

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 Blog Settings > Advanced > Page Header Code Injection for the blog page.

<script>

  $( ( ) => {
  
    /*
    
      begin add button to blog category
      
      SS Version : 7.0
      Template : Brine template family
      
      */
      
    const buttonLabel = '一覧に戻る';
    const buttonUrl = '/seminar';
    
    // do not change anything below, there be the borg here
    
    isCategoryPage = ( ) => {
    
      const c = 'category';
      
      if ( location.pathname.split ( '/' ) [ 2 ] == c ) return true;
      
      if ( location.search ) {
      
        const searchParams = new URLSearchParams ( location.search );
        
        if ( searchParams.get ( c ) !== null ) return true;
        
        }
        
      return false;
      
      }
      
    if ( ! isCategoryPage ( ) ) return;
    
    $( '<section id="tc-blog-nav-button">' +
    
      '<div class="sqs-block button-block sqs-block-button" data-block-type="53">' +
      
        '<div class="sqs-block-content">' +
        
          '<div class="sqs-block-button-container--center" data-animation-role="button" data-alignment="center" data-button-size="small">' +
          
            '<a class="sqs-block-button-element--small sqs-block-button-element" data-initialized="true">' +
            
              '</a>' +
              
            '</div>' +
            
          '</div>' +
          
        '</div>' +
        
      '</section>' )
      
      .find ( 'a' )
      
        .attr ( 'href', buttonUrl )
        
        .text ( buttonLabel )
        
        .end ( )
        
      .insertAfter ( '.BlogList' );
      
      // end add button to blog category
      
    } );
    
  </script>

This is for a v7.0 site using the Brine template family.

Let us know how it goes.

Edited by creedon
version 3

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

Link to comment

Hi, Creedon

Thank you for telling me the code.
It successfully showed the button, and I could change the label too!

Thank you very much!


Let me ask two more questions.

1. The button is displayed at the top, left of the post, but I want to display it at the bottom, center of the post.
How can I do that?

2. There are six categories besides "SNS." How can I show the button in the other categories' pages too?

All categories are here:

  • SNS
  • 人材採用
  • 人材育成 
  • つながり・交流
  • 離職防止 
  • 動画コンテンツ
  • Webサイト


 

スクリーンショット 2021-02-24 14.20.35.png

Edited by Kiyoko
Link to comment


Hi, Creedon

Thank you for updating the code.
It worked as I wanted, thank you so much!!!

But I found a strange behavior. Please see the screenshots I attached.
When I move to the category page from the blog top page by clicking the category button at the top, the new button successfully appears. 
But when I move by clicking the category text link in the post, the button doesn't appear. I want to show the button no matter where you transition from.
Could you fix the behavior? Thank you for your support.

スクリーンショット 2021-02-26 13.41.54.png

スクリーンショット 2021-02-26 13.42.00.png

Edited by Kiyoko
Link to comment
Quote

But I found a strange behavior.

Interesting and thank you for the report. I think I can extend the code to deal with the case you point out.

Apparently two forms of category filtering are supported. There is /category/ and ?category=.

I have updated my code post again.

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

Hi, Creedon

Thank you for updating the code.
It worked as I wanted, thank you!!

Let me ask one more question.
I also have a category page on the gallery page.

I want to add the button to return to the Video Gallery top page.
Can I add the button on that page as well?
I tried to add the code you told me into the Code Injection of the gallery page, but it doesn't work.

スクリーンショット 2021-03-01 10.36.01.png

Edited by Kiyoko
Link to comment

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

<script>

  $( ( ) => {
  
    /*
    
      begin add button to gallery category
      
      SS Version : 7.0
      
      Template   : Brine template family
      
      */
      
    const buttonLabel = '動画一覧';
    const buttonUrl = '/video';
    
    // do not change anything below, there be the borg here
    
    const isCategoryPage = ( ) => {
    
      const c = 'category';
      
      // if ( location.pathname.split ( '/' ) [ 2 ] == c ) return true;
      
      if ( location.search ) {
      
        const searchParams = new URLSearchParams ( location.search );
        
        if ( searchParams.get ( c ) !== null ) return true;
        
        }
        
      return false;
      
      }
      
    if ( ! isCategoryPage ( ) ) return;
    
    $( '<section id="tc-gallery-nav-button">' +
    
      '<div class="sqs-block button-block sqs-block-button" data-block-type="53">' +
      
        '<div class="sqs-block-content">' +
        
          '<div class="sqs-block-button-container--center" data-animation-role="button" data-alignment="center" data-button-size="small">' +
          
            '<a class="sqs-block-button-element--small sqs-block-button-element" data-initialized="true">' +
            
              '</a>' +
              
            '</div>' +
            
          '</div>' +
          
        '</div>' +
        
      '</section>' )
      
      .find ( 'a' )
      
        .attr ( 'href', buttonUrl )
        
        .text ( buttonLabel )
        
        .end ( )
        
      .insertAfter ( '.Main-content' );
      
      // end add button to gallery category
      
    } );
    
  </script>

This is for a v7.0 site using the Brine template family.

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

Create an account or sign in to comment

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

×
×
  • 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.