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

Site URL: https://kaigohr.com/

Hi, everyone
I want to put a button to a specific page on the category filtered page.
Does anyone know how to do that?

Here is the filtered page by the "SNS" category.
https://kaigohr.com/seminar-post/category/SNS

I want to place a button to return to the top of the blog here.
Blog top is this page:
https://kaigohr.com/seminar

Add a button block and then type in the URL.

Let us know how it goes.

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

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

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

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.

@creedon

Thank you for responding!

I only want to put one button on one category page.
I'm subscribing to a Business plan so that I can use Javascript and custom code.
I'm not familiar with using Javascript and custom code.
Could you tell me some code I can try with copy & paste?

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.

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サイト

I think this could be done. I'll look into it.

I have updated my code post. Let us know how it goes.

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.

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.

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.

The code as is won't work on non blog pages.

I'll have to look into how it might be adapted to work for a gallery.

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.

Hi, Creedon

Thank you for sharing the code.
It worked as I wanted!

Thank you so much for responding many questions!!!

I would close this topic.

No need to close this topic. Others may find the code of use.

I'm glad I was able to help.