Alphabetically sorting products in product pages

sruss76 · October 28, 2020

It's unbelievable how a simple feature such as automatic product sorting is missing in the Advanced Commerce plan. If a product page can hold up to 10,000 products, how are we supposed to get our products sorted alphabetically without wasting hours dragging products to the right places?!?!?!? I have a product page with 153 products. I added 30 products to it and they all got dumped towards the end of the list. I just wasted half an hour trying to drag each to the right place so they'd be alphabetical BUT the products are not getting put on the right place! Even products I wasn't dragging get moved in the list. The only thing that works is Move to Top and Move to Bottom. But when you try to drag a product, it just jumps all over the place. I am so frustrated that there is no automatic sorting. This is such a basic feature when you are dealing with hundreds of products and yet it is nowhere to be found in the product pages!

Is there a script that can be injected in the product pages that would automatically sort products alphabetically?

December 4, 2020

I'm not sure if you've already found a solution to this, but the Universal Filter is a great option. I use it on my shop, which also has a large inventory.

https://www.squarewebsites.org/products/universal-filter

patrickgilmour · April 28, 2021

Hi,

I have the same issue. My inventory is not sorted alphabetically, but on the Store page I've created I would like the products to appear sorted alphabetically.

Do I really need to use drag and drop for each product to do this on the page (or buy an expensive plugin)?

I've looked everywhere I can think of and can't see how to do it otherwise.

Thanks,

Patrick

sruss76 · April 28, 2021

Yes, you will have to drag and drop each product if you want them to appear alphabetically...that or buy an expensive plugin. Honestly, it's ridiculous for Squarespace to not have this sorting functionality when each shop page can now hold up to 10,000 products. I mean what half-twit coder leaves out an important function like that?!?!?!?!

SparkCreative · May 23, 2023

In case there are people seeking help with this for 7.1 (as I recently did but came up empty-handed), here is a JS code that can be inserted within the <head> tag (Settings > Developer Tools > Code Injection).

<script>
  window.addEventListener('load', function() {
    var container = document.querySelector('.list-grid');
    
    var items = Array.from(container.getElementsByClassName('grid-item'));
    
    items.sort(function(a, b) {
      var titleA = a.querySelector('.grid-title').textContent.trim().toLowerCase();
      var titleB = b.querySelector('.grid-title').textContent.trim().toLowerCase();
      if (titleA < titleB) {
        return -1;
      }
      if (titleA > titleB) {
        return 1;
      }
      return 0;
    });
    
    container.innerHTML = '';

    items.forEach(function(item) {
      container.appendChild(item);
    });
  });
</script>

tomo1911 · December 8, 2023

On 5/23/2023 at 11:42 AM, SparkCreative said:

In case there are people seeking help with this for 7.1 (as I recently did but came up empty-handed), here is a JS code that can be inserted within the <head> tag (Settings > Developer Tools > Code Injection).

<script>
  window.addEventListener('load', function() {
    var container = document.querySelector('.list-grid');
    
    var items = Array.from(container.getElementsByClassName('grid-item'));
    
    items.sort(function(a, b) {
      var titleA = a.querySelector('.grid-title').textContent.trim().toLowerCase();
      var titleB = b.querySelector('.grid-title').textContent.trim().toLowerCase();
      if (titleA < titleB) {
        return -1;
      }
      if (titleA > titleB) {
        return 1;
      }
      return 0;
    });
    
    container.innerHTML = '';

    items.forEach(function(item) {
      container.appendChild(item);
    });
  });
</script>

Hi,

Thank you so much for sharing the code for this.

What are my next steps to filtering products

Do i need to be on a product page or target a product page?

brandonio579 · January 11

I am dragging my products because I want to rearrange them alphabetically, but when I drag them they do not stay. They just lock back to where they were before. Is there a way to fix this, and better yet is there an easier way to organize products alphabetically? Thank you!

brandonio579 · January 11

edit: for anyone who found this, this code worked for me. Use code injector to do it underwebsite tools.

<script>
  window.addEventListener('load', function() {
    var container = document.querySelector('.list-grid');
    
    var items = Array.from(container.getElementsByClassName('grid-item'));
    
    items.sort(function(a, b) {
      var titleA = a.querySelector('.grid-title').textContent.trim().toLowerCase();
      var titleB = b.querySelector('.grid-title').textContent.trim().toLowerCase();
      if (titleA < titleB) {
        return -1;
      }
      if (titleA > titleB) {
        return 1;
      }
      return 0;
    });
    
    container.innerHTML = '';

    items.forEach(function(item) {
      container.appendChild(item);
    });
  });
</script>

Alphabetically sorting products in product pages

Recommended Posts

sruss76

Link to comment

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

sruss76

patrickgilmour

sruss76

Guest

Link to comment

patrickgilmour

Link to comment

sruss76

Link to comment

SparkCreative

Link to comment

tomo1911

Link to comment

brandonio579

Link to comment

brandonio579

Link to comment

Create an account or sign in to comment

News

sruss76

patrickgilmour

sruss76

Events

Circle Day

Resources

Squarespace Webinars

Hire a Designer

Support

Community

Developers

Resources