How to assign numeric letter to section #?

kestas97
New Member
5 0 0
hello I want to assign all vendors that start with a number or symbol to the section #?: 
<section class="b-scroll-smooth">
 
  {% for item in search.results %}
    <!-- item details -->
 
    {{ item.content highlight: search.terms }}
  {% endfor %}
    <div class="b-max-w-5xl xl:(1280px) mx-auto">
     
      <form action="{{ routes.search_url }}">
    <input type="text"
      placeholder="Search"
      name="q"
      value="{{ search.terms escape }}"
   >
  </form>
      <div class="letters">
        {% assign letters = "" %}
        {% for vendor in shop.vendors %}
          {% capture vendorLetter %}
            {{ vendor slice: 01 }}
          {% endcapture %}
          {% unless letters contains vendorLetter %}
            {% assign letters = letters append: vendorLetter %}
          {% endunless %}
        {% endfor %}
        {% assign letters = letters split: '' %}
        {% for letter in letters %}
          <a href="#section-{{letter downcase strip}}">{{ letter }}</a>
        {% endfor %}
      </div>

 

      {% assign totalCols = 2 %}
      {% assign totalItems = shop.vendors size %}
      {% assign remainingItems = totalItems %}
      {% assign itemsPerColumn = remainingItems divided_by: totalCols ceil %}

 

      <div class="b-grid">
        {% assign current = "" %}
        {% assign vendorsCount = 0 %}
        {% assign columnItems = itemsPerColumn %}

 

        {% for vendor in shop.vendors %}
          {% capture vendorLetter %}
            {{ vendor slice: 01 }}
          {% endcapture %}

 

          {% if vendorLetter != current %}
            {% if vendorsCount > 0 %}
              </div>
            </div>
            <!-- Close the previous vendor-group div -->
          {% endif %}

 

          {% if columnItems == 0 %}
            {% if forloop.index < totalCols %}
            </div>
            <!-- Close the previous b-grid div -->
            <div class="b-grid">
            <!-- Open a new b-grid div -->
            {% endif %}
            {% assign columnItems = itemsPerColumn %}
          {% endif %}

 

          <div class="b-scroll-smooth vendor-group b-border-t-2 b-border-inherit b-flex b-py-10">
            <div id="section-{{ vendorLetter downcase strip }}" class="vendor-letter b-font-monument b-text-black b-font-bold b-text-4xl b-w-24 b-text-center b-pr-5">{{ vendorLetter }}</div>
            <div class="md:b-columns-2 b-flex-1">
            {% assign vendorsCount = 0 %}
          {% endif %}

 

          <div class="vendor b-font-inter b-text-lg b-text-black b-uppercase b-mt-1">
            <a href="/collections/{{ vendor handleize }}">{{ vendor }}</a>
          </div>

 

          {% assign current = vendorLetter %}
          {% assign vendorsCount = vendorsCount plus: 1 %}
          {% assign remainingItems = remainingItems minus: 1 %}
          {% assign columnItems = columnItems minus: 1 %}

 

          {% if remainingItems == 0 %}
            {% break %}
          {% endif %}
        {% endfor %}

 

        {% if vendorsCount > 0 %}
        </div>
        <!-- Close the final vendor-group div -->
      {% endif %}
    </div>
    <!-- Close the final b-grid div -->
  </div>

 

</section>
I want display like this: https://prnt.sc/ZztpVjzhoqj3
Replies 2 (2)

Moeed
Shopify Partner
3621 916 1141

Hey @kestas97 

To assign all vendors that start with a number or symbol to the section #?, you can modify the code as follows:

<section class="b-scroll-smooth">

  {% for item in search.results %}
    <!-- item details -->
 
    {{ item.content | highlight: search.terms }}
  {% endfor %}

  <div class="b-max-w-5xl xl:(1280px) mx-auto">
 
    <form action="{{ routes.search_url }}">
      <input type="text"
        placeholder="Search"
        name="q"
        value="{{ search.terms | escape }}"
      >
    </form>

    <div class="letters">
      {% assign letters = "" %}
      {% for vendor in shop.vendors %}
        {% capture vendorLetter %}
          {{ vendor | slice: 0, 1 }}
        {% endcapture %}
        {% unless letters contains vendorLetter %}
          {% assign letters = letters | append: vendorLetter %}
        {% endunless %}
      {% endfor %}
      {% assign letters = letters | split: '' %}
      {% for letter in letters %}
        {% assign letterCode = letter | downcase | strip %}
        {% if letterCode == "#" or letterCode == "?" %}
          <a href="#section-{{ letterCode }}">{{ letter }}</a>
        {% else %}
          <a href="#section-{{ letterCode }}">{{ letter }}</a>
        {% endif %}
      {% endfor %}
    </div>

    {% assign totalCols = 2 %}
    {% assign totalItems = shop.vendors | size %}
    {% assign remainingItems = totalItems %}
    {% assign itemsPerColumn = remainingItems | divided_by: totalCols | ceil %}

    <div class="b-grid">
      {% assign current = "" %}
      {% assign vendorsCount = 0 %}
      {% assign columnItems = itemsPerColumn %}

      {% for vendor in shop.vendors %}
        {% capture vendorLetter %}
          {{ vendor | slice: 0, 1 }}
        {% endcapture %}

        {% if vendorLetter != current %}
          {% if vendorsCount > 0 %}
            </div>
          </div>
          <!-- Close the previous vendor-group div -->
          {% endif %}

          {% if columnItems == 0 %}
            {% if forloop.index < totalCols %}
            </div>
            <!-- Close the previous b-grid div -->
            <div class="b-grid">
            <!-- Open a new b-grid div -->
            {% endif %}
            {% assign columnItems = itemsPerColumn %}
          {% endif %}

          <div class="b-scroll-smooth vendor-group b-border-t-2 b-border-inherit b-flex b-py-10">
            <div id="section-{{ vendorLetter | downcase | strip }}" class="vendor-letter b-font-monument b-text-black b-font-bold b-text-4xl b-w-24 b-text-center b-pr-5">{{ vendorLetter }}</div>
            <div class="md:b-columns-2 b-flex-1">
            {% assign vendorsCount = 0 %}
          {% endif %}

          <div class="vendor b-font-inter b-text-lg b-text-black b-uppercase b-mt-1">
            <a href="/collections/{{ vendor | handleize }}">{{ vendor }}</a>
          </div>

          {% assign current = vendorLetter %}
          {% assign vendorsCount = vendorsCount | plus: 1 %}
          {% assign remainingItems = remainingItems | minus: 1 %}
          {% assign columnItems = columnItems | minus: 1 %}

          {% if remainingItems == 0 %}
            {% break %}
          {% endif %}
        {% endfor %}

        {% if vendorsCount > 0 %}
        </div>
        <!-- Close the final vendor-group div -->
        {% endif %}
      </div>
      <!-- Close the final b-grid div -->
    </div>

In this modified code, the lines with {% assign letterCode = letter | downcase | strip %} and the subsequent if conditions check if the letterCode is "#" or "?". If it matches, it creates the corresponding link. Otherwise, it creates a regular link based on the letter.

Note: Make sure to replace the existing code in the collection.liquid file with this updated code.

If I managed to help you then, don't forget to Like it and Mark it as Solution!

 

Best Regards,
Moeed

Need a Shopify developer? Chat on WhatsApp


- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️
kestas97
New Member
5 0 0

The same 😄 :

kestas97_0-1685619071423.png