How to assign numeric letter to section #?

[kestas97]

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: 0, 1 }}

          {% 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: 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>

</section>

Now display: https://prnt.sc/Wi7uCz4RpROH

I want display like this: https://prnt.sc/ZztpVjzhoqj3

[Moeed]

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

[kestas97]

The same 😄 :