Adding an Alphabetical list of Products title in debut theme

LucasAlbuq
Tourist
12 0 2

Hi everyone! I'm  trying to add an alphabetical list of the products in my page, trying to change the following code:

 

 

<ul>
  {% assign current = "" %}
  {% for product_vendor in shop.vendors %}
    {% assign first_letter = product_vendor | strip_html | upcase | truncate: 1, '' %}
    {% unless first_letter == current %}
      <li class="vendor-letter">{{ first_letter }}</li>
    {% endunless %}
    <li>{{ product_vendor | link_to_vendor }}</li>
    {% assign current = first_letter %}
  {% endfor %}
</ul>

 

 

 

The problem is that the code retry a list of the vendors in alphabetical order, but when i try to change it to get the products title i get an error. I guess that I ain't doing it correctly. Has anyone a solution for this?

My site is fotosprorio.com

Many Thanks!

0 Likes
pvoulg
Shopify Partner
161 25 44

Hi @LucasAlbuq,

You need to switch things up a bit, in order to accommodate products, instead of vendors. Mainly, you need to loop through all of your store's products, kind of like this:

<ul>
  {% assign current = "" %}
  {% for product in collections.all.products %}
    {% assign first_letter = product.title | strip_html | upcase | truncate: 1, '' %}
    {% unless first_letter == current %}
      <li class="vendor-letter">{{ first_letter }}</li>
    {% endunless %}
    <li><a href="{{ product.url }}" title="{{ product.title }}" aria-label="{{ product.title }}">{{ product.title }}</a></li>
    {% assign current = first_letter %}
  {% endfor %}
</ul>

 

Now, this will only work if the number of products on your store are less than the pagination limit. Otherwise you'd need to paginate the results, which would mean that you'd also need to alter your letter index snippet as well.

 

Panos Voulgaris
Creative director / Partner @ MALVI
Founder @ function( )
0 Likes