Jump to content

Alphabetically sorting products in product pages

Go to solution Solved by SparkCreative,

Recommended Posts

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?

Link to comment
  • 1 month later...
  • 4 months later...

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

Link to comment

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?!?!?!?!

Link to comment
  • 2 years later...
  • Solution

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>

 

Link to comment
  • 6 months later...
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?

Link to comment
  • 1 month later...

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!

Link to comment

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>
Link to comment
  • 4 months later...
On 1/11/2024 at 9:53 PM, brandonio579 said:

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>

 

is there an edit that needs done to this code for it to work on all products if they span across more than one page? 

I have hundreds of products but for some reason, say 200 on page 1 are in alphabetical order; A-Z, and then 100 are in alphabetical order on Page 2, also in A-Z. Where really they should be one continuous A-Z list. Its like theres two separate A-Z lists running and i have no idea why. 
Ive tried dragging them around in the product list to see if that changes anything, it did for some, but eventually it just seemed to replace one product with another, and still keeps them in two separate A-Z orders. bit weird. 

Link to comment
14 hours ago, Nickharriganartwork said:

is there an edit that needs done to this code for it to work on all products if they span across more than one page? 

This code will work when you have up to 200 products. If you have over 200 products, they'll be loaded in pages of 200 products at a time. Whilst each page of products will be alphabetised, it isn't possible to alphabetise across the different pages of products.

About me: I'm Paul, a SQSP user for over 18 yrs and a Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL, providing high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji below. Buying a coffee is optional.

Book paid help with domains: Connect a GoDaddy domain. Connect a Squarespace Domain. Domain assistance

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.