Jump to content

Category bar doesn't work when "top" but works fine on "sidebar"

Recommended Posts

Hey guys,

I have a problem with category titles, I've attached a couple pictures. When it's on "sidebar" it shows up perfect and even shows the current category viewing as bold. I'd love to keep it as is, but when viewed on mobile it doesn't show so I have to use top, I think. But when I click it to "top" it just disappears and isn't visible unless in the "all" section. Please help!

 

www.thehometownhaunts.com

Screen Shot 2023-07-25 at 12.16.31 PM.png

Screen Shot 2023-07-25 at 12.16.21 PM.png

Link to comment
  • Replies 21
  • Views 2.7k
  • Created
  • Last Reply

Top Posters In This Topic

The top and sidebar behave in two fundamentally different ways.

Top

Presents the categories in a drilldown like fashion. So at the All level you see the top level categories. When you category click you drill down into that specific area of the hierarchy.

Sidebar

Presents the categories in drilldown/outline fashion. You see path of the outline you are drilling into.

Display Behaviour

When the viewport reaches 575px and below the sidebar is hidden and the top is shown, because there isn't enough room to keep the sidebar around.

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
9 minutes ago, creedon said:

The top and sidebar behave in two fundamentally different ways.

Top

Presents the categories in a drilldown like fashion. So at the All level you see the top level categories. When you category click you drill down into that specific area of the hierarchy.

Sidebar

Presents the categories in drilldown/outline fashion. You see path of the outline you are drilling into.

Display Behaviour

When the viewport reaches 575px and below the sidebar is hidden and the top is shown, because there isn't enough room to keep the sidebar around.

So is there a way to get the Top to function more like the Sidebar where it's always visible to navigate through no matter what category you're in? It seems like it would be a pretty common thing for people to be looking for.

Link to comment
Quote

So is there a way to get the Top to function more like the Sidebar where it's always visible to navigate through no matter what category you're in?

Not natively but with custom code it is possible to get closer.

Please see Store Page List Categories Mega. You'll have to decide if you like they way the categories are presented.

I can tell you after working on the code I can see why, from a technical standpoint, SS decided on the top design that they use. It's relatively easy to present just a few categories at a time instead of them all. My code is by no means perfect!

Edited by creedon

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
14 hours ago, creedon said:

Not natively but with custom code it is possible to get closer.

Please see Store Categories Mega. You'll have to decide if you like they way the categories are presented.

I can tell you after working on the code I can see why, from a technical standpoint, SS decided on the top design that they use. It's relatively easy to present just a few categories at a time instead of them all. My code is by no means perfect!

Ok so I installed and linked the twcsl file under "not linked", then I added the "store categories cache" into the main store page header, then above that I added the "store categories mega" code but it still doesn't show categories. Did I miss a step? I don't mind donating after all said and done if this works.

Screen Shot 2023-07-26 at 8.26.33 AM.png

Screen Shot 2023-07-26 at 8.28.47 AM.png

Screen Shot 2023-07-26 at 8.29.17 AM.png

Link to comment

In the store categories cache code change the following...

callback : undefined

...to...

callback : twcSplcm

Enable Filter Visibility.

image.png.e6122c085efff2ae9729dc8386c56ef5.png

Let me know how it goes.

Edited by creedon

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
  • 5 months later...

@creedon - Hopefully you're still providing support on these forums...

I'm trying to do the same thing as HometownHaunts is/was. I've followed the steps exactly as they were laid out, but am not having any luck.

I replaced the callback from undefined to twcSplcm. I assume this goes for all instances of 'undefined', right? I found 4 and replaced them all (a fifth instances is present, but is a comment).

My website is spacerover.com/shop. Im just trying to add it to the left-side navigation, so all the subcategories are permanently showing under 'Shop by Department'.

Thanks.

Link to comment
16 hours ago, rockfusion said:

I replaced the callback from undefined to twcSplcm. I assume this goes for all instances of 'undefined', right?

No. Just this one instance in the store categories cache code.

      /*
      
        callback is a custom function that is called after the categories data
        has been loaded. replace undefined with the name of your custom function
        
        your callback must accept a JavaScript object
        
        */
        
      callback : undefined
   

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
1 hour ago, rockfusion said:

Still cannot get it to work.

The steps for installing the twcSplcm callback code have not been done.

From the read me.

  • After you install Store Categories Cache be sure to continue on with the rest of the steps.

The follow on steps can be found in the read me.

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
16 hours ago, creedon said:

The steps for installing the twcSplcm callback code have not been done.

I've added both the store categories cache and store page list categories mega in the site-wide footer injection code (simply because the per-page injection code editor is tiny and hard work with). The result however is that, after adding the latter, it blanks out my entire shop page.

Screenshot 2024-01-04 at 9.04.31 AM.png

Screenshot 2024-01-04 at 9.04.46 AM.png

Screenshot 2024-01-04 at 9.05.01 AM.png

Link to comment
4 hours ago, rockfusion said:

The result however is that, after adding the latter, it blanks out my entire shop page.

You are almost there. I realize the code box is tiny and frustrating and you have to be really careful when editing. The store page list categories mega needs to be added before the store categories cache code. My read me neglects to mention that. Also it would also be nice if folks get it wrong my code would fail more gracefully. Things to put on my to do list.

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
6 hours ago, creedon said:

The store page list categories mega needs to be added before the store categories cache code.

This was it! Thank you so much for your patience and responses. I greatly appreciate your help.

To take it one step further, can I edit the code in any place to make it fully expanded by default?

Edit: Shop By Department is not expanded by default. But All is.

Screenshot2024-01-04at7_32_25PM.thumb.png.5eef2bfaf726fc538c5eda59968a82ab.png

Edited by rockfusion
Link to comment
18 hours ago, rockfusion said:

To take it one step further, can I edit the code in any place to make it fully expanded by default?

Find the following line...

                  <details/>

...and change it to...

                  <details open />

I plan to add this as a setting to the next version of my code. I also noticed the spacing is not to my linking for some of the elements so that is also on my list for a future version.

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
  • 3 months later...

@creedon is there a way to have it only affect the side panel? I want the top navigation to remain default.

Secondly, how do I remove the arrows?

Basically, I want to use the code to show the subcategories for only the side panel, and nothing else. (so how the last picture looks, but subcategories are always shown no matter what category is open)

 

Thanks btw for providing the code. Been scratching my head for days trying to figure out how to show the subcategories.

Screenshot 2024-04-30 174950.png

Screenshot 2024-04-30 175004.png

 

Screenshot 2024-04-30 004008a.png

Edited by CKOnline
Link to comment
18 hours ago, CKOnline said:

is there a way to have it only affect the side panel? I want the top navigation to remain default.

I don't understand. The code replaces whatever CATEGORIES TYPE you have chosen in the section editor.

Screenshot2024-04-30at11_42_54AM.thumb.png.ec9e1005e798322993263f044b619622.png

Its one or the other not both.

Are you thinking you want to escentially have both Sidebar and Top at the same time?

Quote

Secondly, how do I remove the arrows?

The following turned out to have some issues. Don't use it! Use my updated code noted below.

Add the following to Store Settings > Advanced > Page Header Code Injection for the store page. Please see per-page code injection.

<style>

  .products.collection-content-wrapper .nested-category-children details > summary,
  .products.collection-content-wrapper .nested-category-tree-wrapper details > summary
  
    {
    
      list-style : none;
      
      }
  
  .products.collection-content-wrapper .nested-category-children details > summary::marker, /* Chrome, Edge, Firefox */ 
  .products.collection-content-wrapper .nested-category-tree-wrapper details > summary::-webkit-details-marker /* Safari */
  
    {
    
      display : none;
      
      }
      
  </style>

Let us know how it goes.

Edited by creedon

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

@creedon yes, sorry should have clarified. Used css to make both top and side visible. 

Basically, want to know if there is a section of the code that codes for the sidebar so I could remove everything else (ie. code for the top and mobile). I'm kinda new to coding so not sure if that's possible.

I will give your suggestions a go. Thank you 🙂

Link to comment
3 hours ago, CKOnline said:

want to know if there is a section of the code that codes for the sidebar so I could remove everything else

The code doesn't quite work that way. It builds one structure and then adds it where needed in the page.

I can't support this modification as there is a cascade of things that happen when switching between side and top that SS does behind the scenes. My code is intended to attempt to work with the default way SS does things.

In my code find the following line.

$destination.replaceWith ( $element );

Change it to the following.

// $destination.replaceWith ( $element );

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

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.