Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Make product categories act like filters without loading the page again and again

Yoline

Asked by Yoline,

Followers 4

Question

Yoline    1

Yoline
Posted

Site URL: https://www.elgalgorestaurante.com/es/para-llevar

Hello,

I would like to make my website more user friendly but the product page is a big headache.

To help my customers find the best meal I use the category option as a filter but when using it, it loads the age again and again.

https://elgalgorestaurante.squarespace.com/es/para-llevar

The filter works but every time you choose a type of meal, you have to scroll down.

How can I change that?

I suppose that I have to use anchors links but I don't know where to put then and make then work.

Someone has an idea ?

 

Thanks

Link to post
  • Answers 12
  • Created
  • Last Reply

Top Posters For This Question

Popular Days

Top Posters For This Question

Popular Days

Popular Posts

Yoline

Site URL: https://www.elgalgorestaurante.com/es/para-llevar Hello, I would like to make my website more user friendly but the product page is a big headache. To help my customers find the

tuanphan

I think the code (you sent me) will work in this case. How do you think? @rwp @CptFeeny You can contact him.

rwp

It should work. Is the site 7.1? Click the link in my signature. Click the codepen link on my page. There should be a pen called Scroll to products on cat change. See if that works.

Posted Images

12 answers to this question

Recommended Posts

  • 0

CptFeeny    0

CptFeeny
Posted (edited)

@Yoline, I am having the same problem.
I agree, it's annoying to have the page reload to the top each time a category is chosen. 
I want my customers to easily switch between categories without having to scroll down from the top of the page each time. 

Have you found an answer by contacting Squarespace support? Or have you privately emailed/messaged any of the community developers? 
I'm surprised this question hasn't been asked and answered before.

I will contact Squarespace support when they are available. But I will directly ask some of the community developers... 
@tuanphan @rwp @paul2009

777692029_ScreenShot2020-07-30at9_34_02PM.thumb.png.7d1c26fd997cadf047208b1aeb42a82b.png

I agree with you that anchor links are part of the solution. 
I know how to add an anchor link using a code block right above the categories, but I don't know how to change where the categories link to. 

408146107_ScreenShot2020-07-30at9_41_00PM.thumb.png.021c42593dd8ada22c8ede68e9740620.png

 

I've even tried looking at the Inspector, but I don't have any experience coding.


541211328_ScreenShot2020-07-30at9_49_39PM.thumb.png.a2064afadaa3d368fcc9a372a8e1f7d1.png
 

Here's my website: www.BrendanAlexPhoenix.com
Version 7.0– York family (Jones template)
And here's the product page with categories: www.BrendanAlexPhoenix.com/prints
(I have three product pages: Cards/Prints/Free)

I wonder if this has to be done via the 'Code Injection' under 'Advance' for each product page. 

Hopefully we can get this solved sooner than later this time. 🙂
 

Solving this problem would greatly help my customers. 

 

Edited by CptFeeny
Link to post
  • 0

tuanphan    8,267

tuanphan
Posted

I think the code (you sent me) will work in this case. How do you think? @rwp

@CptFeeny You can contact him.

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

Link to post
  • 0

rwp    281

rwp
Posted (edited)

It should work. Is the site 7.1?

Click the link in my signature. Click the codepen link on my page.

There should be a pen called Scroll to products on cat change.

See if that works.

Don't forget to follow the instructions in my signature for setting up jQuery.

Edited by rwp

Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Link to post
  • 0

rwp    281

rwp
Posted

I haven't tested it on 7.0

Let me know if it works, if not, we can modify it.

Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Link to post
  • 0

CptFeeny    0

CptFeeny
Posted (edited)

@rwp 

I tried my best to follow the instructions and free code you kindly provided, 
but it did not work for me. 

This must be because I have Version 7.0? 

Here's a screenshot of the code I'm using. 

1187962471_ScreenShot2020-07-31at10_33_40AM.thumb.png.66062cad6f414589a98b4f66fdbc1b03.png

 

Edited by CptFeeny
Link to post
  • 0

rwp    281

rwp
Posted

@CptFeeny Sent you a message.

Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Link to post
  • 0

bbarinaga    0

bbarinaga
Posted

Hi @rwp,

I'm trying to do the same thing but failed.

I'm on 7.1 and used the following code on Code Injection / Header:

 

<script
              src="https://code.jquery.com/jquery-3.5.1.min.js"
              integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
              crossorigin="anonymous"></script>

$(document).ready(function() {
  var catLink = $('a.category-filter-link.category-filter-link-all');
  var _href = $(catLink).attr("href");
  $(catLink).attr("href", _href + '?');

  var urlCat = window.location.href.split("?")[1];
  if (urlCat !== undefined) {
    var prodTop = $('section:nth-of-type(2)')
    $('html,body').animate({
      scrollTop: $(prodTop).offset().top
    }, 0);
  }
});
</script>

 

I'm not familiar with coding. Could you help me?

Thanks!

Link to post
  • 0

rwp    281

rwp
Posted

Please post a link to your page.

Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Link to post
  • 0

rwp    281

rwp
Posted

You are missing an opening <script> tag.

That being said, the category layout is different on your page, and the code will not work for you.

Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Link to post

Create an account or sign in to comment

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

Sign Up / Login
Followers 4
Go to question listing
×
×
  • Create New...

Support

Community

Developers

Resources