Fix Alphabetization of Automated Vendor List (Taste Theme)

Store Design
, ,
1

Hi, I have been working on an automated list of the vendors that we stock in our store. How can I fix the alphabetization so it goes DOWN the columns vertically from A to Z, instead of across the columns horizontally? This is how the page appears now: https://urbanfarmcollection.com/pages/vendor-list

Everything else is correct, except the odd alphabetization.

Here is the code that I used:

{% assign counter = 0 %}
{% for vendor in shop.vendors %}
  {% assign counter = counter | plus: 1 %}
{% endfor %}
{% assign counter_divided_by_3 = counter | divided_by: 3 | floor %}

{{ page.content }}

  
{% for product_vendor in shop.vendors %}
{% assign its_a_match = false %}
{% capture my_collection_handle %} {{ product_vendor | handleize | strip | escape  }} {% endcapture %}
{% assign my_collection_handle_stripped = my_collection_handle | strip | escape %}

{% for collection in collections %}
{% if my_collection_handle_stripped == collection.handle %}
{% assign its_a_match = true %}
{% endif %}
{% endfor %}

{% if its_a_match %}
- {{ product_vendor }}

{% else %}
- {{ product_vendor | link_to_vendor }}
  
{% endif %}
{% endfor %}

Then, this is the code that was given to me to put on the bottom of my base.css file to change the above vendor list into three columns, with black text.

@media screen and (min-width: 750px) {
.vendor-list {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}
.vendor-list li a {
color: #000;
}
}

That worked great. Just the alphabetization issue now. Appreciate any help or insight!

2

Regardless or alphabetical sorting of underlying data to change the horizontal display order of elements:

Roughly get rid of the grid unless you wanna get fancy.

And use the column-count style property.

https://stackoverflow.com/questions/25800067/how-to-divide-list-in-a-single-ul-into-3-columns

@media screen and (min-width: 750px)
.vendor-list {
    display: inherit;
    column-count: 3;
}

The specificity may need to be increased to override current display: styles with #MainContent .vendor-list or similar

Check browser support of column-count feature vs sites visitor browser demographics for applicability.