stockists.js

import Utils from '../utils';
import BaseSection from './base';

const selectors = {
  list: '[data-stockists-list]'
};

export default class StockistsSection extends BaseSection {
  constructor(container) {
    super(container, 'stockists');

    this.$lists = $(selectors.list, this.$container);

    // This stuff doesn't come back sorted from Shopify so sort it by the 'data-alpha' attribute that we put on there...
    this.$lists.each((i, el) => {
      const $list = $(el);
      const $lis  = $list.children().detach();

      $lis.sort((a, b) => {
        const aAlph = $(a).data('alpha').toString();
        const bAlph = $(b).data('alpha').toString();

        if (aAlph > bAlph) {
          return 1;
        }
        if (aAlph < bAlph) {
          return -1;
        }
        
        return 0;
      });

      $list.append($lis);
    });

    this.$lists.find('a').each((i, el) => {
      if (Utils.isExternal(el.getAttribute('href'))) {
        el.setAttribute('target', '_blank');
      }
    });
  }
}

stockists.liquid

{% assign stockists_blog = blogs[section.settings.blog] %}

{% assign stockists_us_html            = '' %}
{% assign stockists_canada_html        = '' %}
{% assign stockists_europe_html        = '' %}
{% assign stockists_asia_html          = '' %}
{% assign stockists_australia_html     = '' %}
{% assign stockists_south_america_html = '' %}
{% assign stockists_africa_html        = '' %}
{% assign stockists_other_html         = '' %}

{% if stockists_blog != blank and stockists_blog.articles_count > 0 %}

  {% for tag in stockists_blog.all_tags %}
    
    {% assign tag_handle = tag | handle %}

    {% capture tag_html %}
      <div class="stockist-block">
        <h4 class="stockist-block__title">{{ tag }}</h4>
        <ul class="stockist-list" data-stockists-list>
          {% for article in stockists_blog.articles limit: 200 %}
            {% if article.tags contains tag %}
              <li data-alpha="{{ article.title | handle }}">
                <h6>{{ article.title }}</h6>
                <div>{{ article.content }}</div>
              </li>
            {% endif %}
          {% endfor %}
        </ul>
      </div>
    {% endcapture %}

    {% case tag_handle %}
      {% when 'united-states' %}
        {% assign stockists_us_html = stockists_us_html | append: tag_html %}
      {% when 'canada' %}
        {% assign stockists_canada_html = stockists_canada_html | append: tag_html %}        
      {% when 'europe' %}
        {% assign stockists_europe_html = stockists_europe_html | append: tag_html %}
      {% when 'asia' %}
        {% assign stockists_asia_html = stockists_asia_html | append: tag_html %}
      {% when 'australia' %}
        {% assign stockists_australia_html = stockists_australia_html | append: tag_html %}        
      {% when 'south_america' %}
        {% assign stockists_south_america_html = stockists_south_america_html | append: tag_html %}
      {% when 'africa' %}
        {% assign stockists_africa_html = stockists_africa_html | append: tag_html %}        
      {% else %}
        {% assign stockists_other_html = stockists_other_html | append: tag_html %}
    {% endcase %}

  {% endfor %}

  <div data-section-id="{{ section.id }}" data-section-type="stockists">
    <div class="layout-content-wrapper">
      <div class="container">
        {{ stockists_us_html }}
        {{ stockists_canada_html }}
        {{ stockists_europe_html }}
        {{ stockists_asia_html }}
        {{ stockists_australia_html }}
        {{ stockists_south_america_html }}
        {{ stockists_africa_html }}
        {{ stockists_other_html }}
      </div>     
    </div>
  </div>
{% endif %}

{% schema %}
  {
    "name": "Stockists Page",
    "settings": [  
      {
        "type": "blog",
        "id": "blog",
        "label": "Stockists Blog"
      }
    ]  
  }
{% endschema %}