Show filtered category name at the top of the filtered content page

Site URL: https://www.thedaring.co/blog/category/Art

Hi everyone,

In Squarespace 7.1, when a reader clicks a category link (screenshot attached), I'd like them to see that category text at the top of the filtered list of content they're served. Right now, they are seeing the general blog header (screenshot attached), which can be disorienting.

Has anyone figured out a way to do this?

Many thanks,

Ioana

Hi. Do you use Personal or Business Plan?

On 2/3/2021 at 2:15 AM, tuanphan said:

Hi. Do you use Personal or Business Plan?

Hello, we're on a business plan.

Please see Blog Page Section Text Replace With Category or Tag, or Both.

Let us know how it goes.

Hi @creedon & @tuanphan

How are you?

Question for you:

1. I tried using the above code (Thanks Creedon!) with an updated block-id, but it did not work for me. Did I do something wrong? I added the script to my Blog Settings > Page Header Code Injection. I am on SS 7.1

2. Once I get it to work, If I duplicate this script and use the word 'Tag' in replacement of category , will this script also work for Tagged Entries?

Blog Example where I am trying to add the category:
https://www.nicholaskonert.com/library/category/Artist

*Visual example attached below

Thanks for all of your help!
Nicholas

@studio_slp

The OP had jQuery installed which my script depends on. You do not have it installed.

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>

I believe that if you change 'category' to 'tag' in the script it should work equally well for tags. Just replicate the script, make that change and add it below the other script and you should be good to go.

Let us know how it goes.

54 minutes ago, creedon said:

@studio_slp

The OP had jQuery installed which my script depends on. You do not have it installed.

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>

I believe that if you change 'category' to 'tag' it the script it should work equally well for tags. Just replicate the script, make that change and add it below the other script and you should be good to go.

Let us know how it goes.

Do you know how/where I can add the phrase 'Category:' before where the category appears? Thank you.

12 minutes ago, tuanphan said:

Thanks @creedon for your help (the code works for both categories and tags!) and @tuanphan for asking about this question regarding adding text before the Category name.

Example 'Category: Artist'

@tuanphan @studio_slp

I have updated my previous code post.

The code now covers both category and tag pages. Use the boolean switches to turn on or off for each.

You can set prefix and suffix text to surround the category or tag.

Let us know how it goes.

@creedon Thanks so much! This worked perfectly! I really appreciate it! Thanks again!

On 2/12/2021 at 11:37 PM, creedon said:

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

<script>

  $( ( ) => {
  
    /*
    
      begin replace blog "header" text with category and/or tag
      
      the blog "header" in this case is a page section added above a normal blog
      page with single text block
      
      SS Version : 7.1
      
      */
      
      const replaceWithCategory = true;
      
      const replaceWithTag = false;
      
      // do not inlcude # at the beginning
      
      const textBlockId = 'block-7ee69d4a0268ec23d3ed';
      
      const categoryPrefixText = '';
      
      const categorySuffixText = '';
      
      const tagPrefixText = '';
      
      const tagSuffixText = '';
      
      // do not change anything below, there be the borg here
      
      const c = 'category';
      const pathname = location.pathname;
      const t = 'tag';
      
      const textBlockSelector = '#' + textBlockId +
      
        ' > .sqs-block-content > *:first';
        
      let conditions = [ ];
      
      if ( replaceWithCategory ) conditions.push ( c );
      
      if ( replaceWithTag ) conditions.push ( t );
      
      if ( ! conditions.some ( e => pathname.includes ( '/' + e + '/' ) ) )
      
        return;
        
      const ct = pathname
      
        .split ( '/' ) [ 2 ]
        
        .replaceAll ( '/', '' );
        
      let prefixText, suffixText;
      
      switch ( ct ) {
      
        case c :
        
          prefixText = categoryPrefixText;
          
          suffixText = categorySuffixText;
          
          break;
          
        case t :
        
          prefixText = tagPrefixText;
          
          suffixText = tagSuffixText;
          
          break;
          
        }
        
      const text = prefixText +
      
        pathname
        
          .split ( '/' ) [ 3 ]
          
          .replaceAll ( '+', ' ' ) +
          
        suffixText;
        
      $( textBlockSelector ).text ( text );
      
      } );
      
      // end replace blog "header" text with category and/or tag
      
  </script>

This is for a v7.1 site and specific to the OP's needs.

Let us know how it goes.

A million thank yous! This works 🙂

The general blog header shows us for a split second, then gets replaced with the filtered category. Do you know why that may be happening?

Thank you again,

Ioana

38 minutes ago, IoanaFriedman said:

The general blog header shows us for a split second, then gets replaced with the filtered category. Do you know why that may be happening?

I have an idea. The code does take a bit of time to run. So the "header" shows first then the code replaces it. I should be able to address the issue with some CSS that initially hides the "header" and then after the code replaces the text, it will show the "header". It may take a second for the "header" to pop but at least it won't show the "header" text before it has been replaced.

7 minutes ago, creedon said:

I have an idea. The code does take a bit of time to run. So the "header" shows first then the code replaces it. I should be able to address the issue with some CSS that initially hides the "header" and then after the code replaces the text, it will show the "header". It may take a second for the "header" to pop but at least it won't show the "header" text before it has been replaced.

Thanks Tom, that makes total sense. I really appreciate all your help. If it's easy and quick enough on your end to adjust the code, I'll happily accept it. But I wouldn't want to cause you too much work.

I've updated my code post.

One thing to note is that you no longer need to provide a text block id. The code targets the first Paragraph Style of the first text block of the first page section of a page.

Let us know how it goes.

cc: @tuanphan @studio_slp

15 hours ago, creedon said:

I've updated my code post.

One thing to note is that you no longer need to provide a text block id. The code targets the first Paragraph Style of the first text block of the first page section of a page.

Let us know how it goes.

cc: @tuanphan @studio_slp

Thank you much 🙏🏼

I just wanted to say a big thanks to @creedon for this. It has lifted my Category and Tag pages, and will really help the site's SEO too!

https://www.firstep.co.uk/work/category/Web+Design

One problem I had with the latest version is that it caused the first blocks of text on the main article pages to disappear. I fixed this by pasting the code into a Code block at the bottom of the Category page, rather than the Header Code Injection that is applied to all blog pages.

8 hours ago, Firstep said:

One problem I had with the latest version is that it caused the first blocks of text on the main article pages to disappear.

Thank you for reporting this issue.

I have updated my code cited in my February 12th post.

@creedon - I got this to work on my site (sdrretail.com), but I have some header text that I want to keep for navigational purposes. Is it possible to slightly change the code to instead replace a section at the end of the page (i.e., instead of replacing the first text block in the first section, replace the last text block in the last section)?

10 hours ago, stephenreed said:

Is it possible to slightly change the code to instead replace a section at the end of the page (i.e., instead of replacing the first text block in the first section, replace the last text block in the last section)?

I have updated my code cited in my February 12th 2021 post.

The code now looks for certain text that will be replaced with a category or tag.

Let us know how it goes.

@creedon that worked like a charm. Thank you so much!!

Can anybody help me with this please? I'm trying to recreate the same effect with a category title and category description. I've followed the latest code from @creedon but my [[bpstrwcotob]] tags are returning blank data. I'm using the Brower blog template.

I should also add that I have multiple categories and would like to map different descriptions to each category, excluding the blog homepage.

@dbailey

Please post the URL for a page on your site where we can see your issue.

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 does not allow anyone to alter your site. It only allows those with the password to see your site. Please read the documentation at the link provided to understand how it works.

Please read the documentation at the link provided on how to share a link to your site to understand how it works. A link to the backend of the your site won’t work for us, i.e. a url that contains /config/.

We can then take a look at your issue.

Thank you so much @creedon.

The work in progress site is https://crow-crimson-r85z.squarespace.com/ and the password is yappy

I think I have all the correct files in place from your git repo and I have the [[bpstrwcotob]] tag in place for the title replace but it's displaying empty in preview.

Ideally, I'd really like to have a custom title and custom description for each Category, excluding the homepage. i.e unique titles and descriptions for Care, Play, Eats, Walk, Gifts, Sleep, as per the attached visual. Is this possible?

Thanks again!

9 hours ago, dbailey said:

but it's displaying empty in preview.

Ah ha!

From the code file.

  Notes         : this effect is not active in SS Preview to test it use private
                  browsing < https://bit.ly/3f6lhq2 >

9 hours ago, creedon said:

Ah ha!

From the code file.

  Notes         : this effect is not active in SS Preview to test it use private
                  browsing < https://bit.ly/3f6lhq2 >

 

Sorry, I think my wording confused my post. I mean I can't get the tag to preview the data on the front-end - including on the live site or private browsing. I've set the site to public for you to see https://crow-crimson-r85z.squarespace.com/.

I have the [[bpstrwcotob]] tag in place for the title below the nav, but you will see it is not displaying any data.