Skip to main content

Sorting RP ProMap Tags on display

Use this widget to control how RP ProMap filter tags are displayed on your store locator.

How to Sort RP ProMap Tags Alphabetically

Control the order of the tag filters displayed on your RP ProMap store locator.

By default, RP ProMap displays tag filters in the order returned by your store data. This widget lets you display them:

  • In their original order

  • Alphabetically from A–Z

  • In reverse alphabetical order from Z–A

You can apply one order automatically or show a dropdown that lets visitors choose the order themselves.

Before you begin: Test this widget on a duplicate theme before adding it to your live storefront.

Add the widget code

Copy the complete code below. You will add it to a Shopify Custom Liquid section in the next step.

<script> (function () {   /*    * RP ProMap — Sort tag filters    *    * showSortSelect:    *   true  = show the sorting dropdown above the tag list    *   false = hide the dropdown and always use sortOrder below    *    * sortOrder:    *   "original"     = leave tags in the order ProMap renders them    *   "alphabetical" = sort tags A–Z    *   "reverse"      = sort tags Z–A    */   var showSortSelect = false;   var sortOrder = "alphabetical";    var LIST_SELECTOR = "#scasl-tag-list-container";   var WATCH_MS = 60000;    var currentOrder = sortOrder;   var attachedList = null;   var listObserver = null;   var originalCounter = 0;   var isSorting = false;    function tagItems(list) {     return Array.prototype.filter.call(list.children, function (el) {       return el.tagName === "LI";     });   }    function labelOf(el) {     return el.textContent.trim();   }    function compareAsc(a, b) {     return labelOf(a).localeCompare(labelOf(b), undefined, {       sensitivity: "base",       numeric: true     });   }    function sortTags(list, order) {     var items = tagItems(list);     if (!items.length) return;      items.forEach(function (item) {       if (!item.dataset.scaslOriginalOrder) {         item.dataset.scaslOriginalOrder = String(originalCounter++);       }     });      var sorted = items.slice();     if (order === "alphabetical") {       sorted.sort(compareAsc);     } else if (order === "reverse") {       sorted.sort(function (a, b) {         return compareAsc(b, a);       });     } else {       sorted.sort(function (a, b) {         return Number(a.dataset.scaslOriginalOrder) - Number(b.dataset.scaslOriginalOrder);       });     }      // Skip the DOM write when nothing moves, so the observer cannot loop on itself.     var unchanged = sorted.every(function (item, index) {       return item === items[index];     });     if (unchanged) return;      var fragment = document.createDocumentFragment();     sorted.forEach(function (item) {       fragment.appendChild(item);     });      isSorting = true;     list.appendChild(fragment);     isSorting = false;   }    function mountSelect(list) {     if (!showSortSelect || document.getElementById("scasl-tag-sort")) return;      var sortSelect = document.createElement("select");     sortSelect.id = "scasl-tag-sort";     sortSelect.setAttribute("aria-label", "Sort filters");     sortSelect.innerHTML =       '<option value="original">Leave as is</option>' +       '<option value="alphabetical">Alphabetical (A–Z)</option>' +       '<option value="reverse">Reverse alphabetical (Z–A)</option>';     sortSelect.value = currentOrder;     sortSelect.style.cssText =       "width:100%;padding:10px;margin:0 0 12px 0;border:1px solid #ccc;" +       "border-radius:6px;background-color:#fff;cursor:pointer;";      sortSelect.addEventListener("change", function () {       currentOrder = this.value;       sortTags(list, currentOrder);     });      list.parentNode.insertBefore(sortSelect, list);   }    // ProMap injects the tag <li> elements asynchronously after Google Maps and   // its jQuery bundle load, and may swap the whole container, so watch instead   // of running only once.   function tick() {     var list = document.querySelector(LIST_SELECTOR);     if (!list) return;      if (list !== attachedList) {       if (listObserver) listObserver.disconnect();       attachedList = list;       mountSelect(list);       listObserver = new MutationObserver(function () {         if (!isSorting) sortTags(list, currentOrder);       });       listObserver.observe(list, { childList: true });     }      sortTags(list, currentOrder);   }    var poll = setInterval(tick, 250);   setTimeout(function () {     clearInterval(poll);   }, WATCH_MS);   tick(); })(); </script>

Install the widget in Shopify

RP ProMap does not have a custom JavaScript field. Add the widget through your Shopify theme instead.

  1. In your Shopify admin, go to Online Store → Themes.

  2. On the theme you want to change, click Customize.

  3. Use the page selector at the top of the editor to open the page containing your store locator.

  4. Click Add section, choose Custom Liquid, and move it below your RP ProMap section or app block.

  5. Paste the complete widget code above into the Liquid field, including the opening and closing <script> tags.

  6. Make sure the section is not hidden. If its name is greyed out in the section list, click the eye icon beside it to show it.

  7. Click Save, then open the page on your storefront and refresh it.

Note: Tag filters appear shortly after the map finishes loading. Let the locator load completely before checking their order.

Give the section a clear name, such as Custom Liquid - Tag Sort, so it is easy to find later.

Choose the sorting behavior

Only change the two settings near the top of the complete widget code.

Automatically sort tags alphabetically

This is the default setting in the code above. The dropdown stays hidden and tags are always shown A–Z.

var showSortSelect = false; var sortOrder = "alphabetical";

Automatically sort tags in reverse order

Tags are always shown Z–A, with no dropdown.

var showSortSelect = false; var sortOrder = "reverse";

Keep the original tag order

Tags stay in the order RP ProMap renders them, with no sorting dropdown.

var showSortSelect = false; var sortOrder = "original";

Show the sorting dropdown

Set showSortSelect to true to let visitors choose the order themselves. The dropdown appears directly above the tag filters, and sortOrder determines which option is selected when the page loads.

var showSortSelect = true; var sortOrder = "alphabetical";

Customize the sorting dropdown

The following options only apply when showSortSelect is set to true.

Change the dropdown labels

You can change the text visitors see. Keep the value of each option exactly as shown—the widget uses these values to determine how to sort.

sortSelect.innerHTML =   '<option value="original">Featured order</option>' +   '<option value="alphabetical">Name (A–Z)</option>' +   '<option value="reverse">Name (Z–A)</option>';

Change the dropdown appearance

The dropdown styles are set in sortSelect.style.cssText. Edit the values to match your theme, keeping the semicolons between properties.

sortSelect.style.cssText =   "width:100%;padding:10px;margin:0 0 12px 0;border:1px solid #ccc;" +   "border-radius:6px;background-color:#fff;cursor:pointer;";

If you prefer to style the dropdown from your theme's stylesheet, target its ID:

#scasl-tag-sort {   border-radius: 0;   font-size: 14px; }

Use this with the tag-search widget

This widget only reorders the existing tag filters, so it is designed to work alongside the RP ProMap tag-search widget.

If you use both widgets and notice anything unexpected, remove one of them and contact our support team so we can investigate.

Troubleshooting

The tags do not change order

  • Check that the Custom Liquid section is not hidden. A hidden section remains saved but does not appear on your storefront.

  • Confirm that you added the section to the same page or template as your store locator.

  • Open your browser's developer tools, select Elements, and search for scasl-tag-list-container. If it is not present, the locator is not rendering and there is no tag list for the widget to sort.

  • Give the map a few seconds to load and check again. The widget waits for the tags to appear rather than sorting immediately.

The order changes and then jumps back

You most likely have an older copy of the widget elsewhere on the page. Remove duplicate Custom Liquid sections so only one copy runs.

Tags are sorted, but filtering no longer works

Confirm that the widget code was pasted without changes. The widget only moves the existing filter rows; it does not rebuild the checkboxes, so filtering should remain unaffected.

Important notes

  • Paste the code into a Custom Liquid section, not directly into your theme's theme.liquid file, so it is easy to remove later.

  • If you installed an earlier version of this widget and it never worked, replace it with the code above. The earlier version ran before the tag filters had loaded.

  • To remove the widget, delete the Custom Liquid section you added or click its eye icon to hide it, then click Save.

Related Articles
Did this answer your question?