Shopify Custom Pagination

shopify-custom-pagination.liquid

{% comment %} First page {% endcomment %}
{% comment %} [<] [1] 2 3 [>] {% endcomment %} 
{% comment %} Second page {% endcomment %}
{% comment %} [<] 1 [2] 3 [>] {% endcomment %}
{% comment %} Third page {% endcomment %}
{% comment %} [<] 1 2 [3] [>] {% endcomment %}

{%- if paginate.parts.size > 0 -%}
    <div class="blog-mb__pagination">
        <div class="blog-mb__p-inner">
            
            <a href="{{ paginate.previous.url }}" class="blog-mb__p-link blog-mb__p-link--prev{% unless paginate.previous %} blog-mb__p-disabled{% endunless %}">
                <svg focusable="false" width="17" height="14" viewBox="0 0 17 14"><path d="M17 7H2M8 1L2 7l6 6" stroke="currentColor" stroke-width="2" fill="none"></path></svg>
            </a>

            {%- assign total_pages = paginate.pages -%}
            {%- assign current_page = paginate.current_page -%}

            {%- for i in (1..total_pages) %}
                {%- assign key = i | minus: 1 -%}
                {%- assign part = paginate.parts[key] -%}
                {%- assign part_class = 'blog-mb__p-link' -%}
                {%- assign part_title_abs = part.title | abs -%}
                
                {%- if total_pages > 3 %}
                    {%- if current_page == 1 %}
                        {%- if part.title == 1 %}
                            <span class="blog-mb__p-link{% if part_title_abs == current_page %} blog-mb__p-link--current{% endif %}">{{ part.title }}</span>
                        {%- elsif part.title == 2 or part.title == 3 %}
                            <a href="{{ part.url }}" class="blog-mb__p-link">{{ part.title }}</a>
                        {% endif %}
                    
                    {%- elsif current_page == total_pages %}
                        {%- assign ss__1 = total_pages | minus: 1 -%}
                        {%- assign ss__2 = total_pages | minus: 2 -%}

                        {%- if part.title == total_pages %}
                            <span class="blog-mb__p-link{% if part_title_abs == current_page %} blog-mb__p-link--current{% endif %}">{{ part.title }}</span>
                        {%- elsif part.title == ss__1 or part.title == ss__2 %}
                            <a href="{{ part.url }}" class="blog-mb__p-link">{{ part.title }}</a>
                        {% endif %}
                    
                    {%- else %}
                        {%- assign ss__1 = current_page | minus: 1 -%}
                        {%- assign ss__2 = current_page | plus: 1 -%}

                        {%- if part.title == ss__1 %}
                            <a href="{{ part.url }}" class="blog-mb__p-link">{{ part.title }}</a>
                        {%- elsif part.title == current_page %}
                            <span class="blog-mb__p-link{% if part_title_abs == current_page %} blog-mb__p-link--current{% endif %}">{{ part.title }}</span>
                        {%- elsif part.title == ss__2 %}
                            <a href="{{ part.url }}" class="blog-mb__p-link">{{ part.title }}</a>
                        {% endif %}
                    {% endif %}
                
                {%- else %}
                    {%- if part.is_link %}
                        <a href="{{ part.url }}" class="blog-mb__p-link">{{ part.title }}</a>
                    {%- else %}
                        <span class="blog-mb__p-link{% if part_title_abs == current_page %} blog-mb__p-link--current{% endif %}">{{ part.title }}</span>
                    {% endif %}
                {% endif %}
                
            {%- endfor -%}



            <a href="{{ paginate.next.url }}" class="blog-mb__p-link blog-mb__p-link--next{% unless paginate.next %} blog-mb__p-disabled{% endunless %}">
                <svg focusable="false" width="17" height="14" viewBox="0 0 17 14"><path d="M0 7h15M7 1l6 6-6 6" stroke="currentColor" stroke-width="2" fill="none"></path></svg>
            </a>
        </div>
    </div>
{%- endif -%}