How to order dynamic grid item by name

✨ Tip from Gianluca (Pixed): Sorting Translated Grid Items with Falang

When working with Falang, you may notice something unexpected:
if you display a list of grid items sorted by name, the order will still follow the default language. This happens because Falang applies translations after the sorting process, so the grid is not actually reordered in the translated language.

👉 But don’t worry — there’s a solution!

By adding a small piece of JavaScript code, you can re-sort the items once the translations are in place. This ensures your grid displays correctly in the user’s selected language.

Keep in mind:

• The grid pulls articles dynamically from a source.
• Sorting must therefore happen after the content has been translated and rendered on the page.

This simple adjustment helps provide a smoother user experience, especially on multilingual sites.

Step 1 – Add an ID to the grid

The first step is to assign a unique ID to the grid. This will allow us to easily target it later with JavaScript.

👉 In this example, the website’s default language is Italian, and the translated version is in English. By giving the grid an ID, we’ll be able to manage the sorting properly across both languages.

Step 2 – Add an HTML element to the post section

Next, we need to insert a simple HTML element inside the post section.
This element will serve as a reference point for our JavaScript code, making it easier to identify and sort the translated content later on.

👉 Think of it as adding a small “tag” inside each post that the script can use to recognize and organize the items correctly.

Step 3 – Attach JavaScript to the grid element

Now that our grid has an ID (for example: grigliaprodotti), we can link our JavaScript code to it.
This will allow the script to detect all the items inside the grid and re-sort them once the translations are applied.

👉 By targeting the element with its ID, we make sure the sorting logic only affects this specific grid, and not other parts of the page.

In this example, the script runs only when the page is displayed in English (en-GB), which is the site’s secondary language.

👉 The grid’s ID (set earlier) is used in the code so the script knows exactly which element on the page it should sort. You can find this ID directly in the HTML code of your grid.

<script>
(function () {
  function sortGrid() {
    if ((document.documentElement.getAttribute("lang") || "").trim().toLowerCase() !== "en-gb") return;

    const root = document.getElementById("grigliaprodotti");
    if (!root) return;

    const grid = root.querySelector(".uk-grid, [uk-grid]");
    if (!grid || grid.dataset.sorted === "1") return;

    const cols = Array.from(grid.children).filter(el => el.nodeType === 1);
    if (cols.length < 2) { grid.dataset.sorted = "1"; return; }

    const getTitle = el => (el.querySelector("h2.el-title")?.textContent || "").trim();
    const collator = new Intl.Collator("en", { sensitivity: "base", numeric: true });

    cols.sort((a, b) => collator.compare(getTitle(a), getTitle(b)));
    cols.forEach(col => grid.appendChild(col));

    grid.dataset.sorted = "1";
  }

  document.addEventListener("DOMContentLoaded", sortGrid);
  window.addEventListener("load", () => setTimeout(sortGrid, 0));
})();
</script>