Jump to content

Redefined grid on a filtered product page

Recommended Posts

Hi ! I am new to Squarespace and I am still discovering all the features.

For the need of a project; I am using CSS Grid layout to customise a shop page.
I've configured my grid on my "All" shop page but when I filtered my products by categories (to make them appear on another link page), I can't redefined the displaying order of my products. (please find attached some pictures)

Do you have any idea how I can do that?

Thanks in advance for your help and making me a better dev! 💪

Capture d’écran 2020-09-11 à 19.23.12.png

Capture d’écran 2020-09-11 à 19.23.33.png

Link to comment
  • Replies 5
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

Interesting problem. I'm in diagnostic mode right now. Let me restate the problem to make sure we are on the same page.

When one has a Store Page (in 7.1, Products in 7.0, where working with a 7.1 site here) and has defined categories x, y, z for items one can have filtered URL pages based on the categories. For example...

    /store - that would be all items

    /store/x - only category x

    /store/y - only category y

    /store/z - only category z

As far as I can tell there isn't an easy way to define CSS rules based on the filtered pages. For example if there was something like a data-filtered-by-category="x" attribute on the <div class="list-grid"> element then styling individual filtered pages would be fairly straight forward.

Do I have the basic issue correct?

I have some ideas percolating in my mind. I'll follow up in another post.

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

Link to comment

I see that you have jQuery installed. I have come up with some example code that I think will get you back on track.

The idea is to use jQuery to let us put an element attribute into the pages. We can then use a CSS attribute selector to target the different categories.

In Page Setting > Advanced > Page Header Code Injection for your Store Page put the following.

<script>

  $( ( ) => {
  
    let $categoryActive = $( '.category-link.active' );
    
    let categoryName = 'all';
    
    if ( $categoryActive.length ) categoryName = $categoryActive.text ( );
    
    $( '.products' ).attr ( 'data-filter-by-category', categoryName );
    
    } );
    
  </script>

You can then write CSS like...

[data-filter-by-category="all"] .list-grid {

    grid-template: [enter rules here];

    }

[data-filter-by-category="abc"] .list-grid {

    grid-template: [enter rules here];

    }

[data-filter-by-category="xyz"] .list-grid {

    grid-template: [enter rules here];

    }

You may need to throw some !importants in there depending on how you've defined your CSS.

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

That's exactly what I've been looking for.

I applied your Jquery script and it works fine, I have now data-filtered-by-category attribute.
I've could modify grid-template of two categories for now.
I have some troubles to add another grid-template on my third category but I might have made a typing error.

Thanks again for your help, I let you know once everything will be 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...

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.