Country Order Customization

Country Order Customization in Orbe's Selector

Country Order Customization in Orbe's Selector

In Orbe, the country list within the selector is alphabetically ordered by default. However, it's possible to customize this order using CSS, allowing you to prioritize certain countries by placing them at the top of the list.

For example, in this country selector, you can see that the United States and the United Kingdom are at the top when you open the selector:

Here's a step-by-step guide on how to achieve this through Custom CSS:

Step 1: Modify the Display of the List

To start, we need to change the display setting of the country list to a grid layout. This allows us to reorder the countries:

.md-form__select__country__list {
    display: grid;
}

.md-form__select__country__list[hidden] {
    display: none;
}

Step 2: Set Default Order

Next, set a default order for all countries in the list. This ensures that any country not explicitly reordered will follow this default setting:

.md-form__select__country__list li {
    order: 2;
}

Step 3: Reorder Specific Countries

Now, you can select specific countries and assign them a different order. In this example, we're moving the United States (US) and the United Kingdom (GB) to the top of the list:

.md-form__select__country__list li[data-country="US"], .md-form__select__country__list li[data-country="GB"]{
    order: 1;
}

By adding these CSS classes, you can easily customize the order of countries within the Orbe selector.

Simply replace "GB" and "US" with the country codes of your preferred countries to tailor the list to your needs. This refers to the ISO two-letter code (alpha-2) of the country. You can find the global list of country ISO two-letter codes at https://countrycode.org/.

CSS

Here's the complete CSS snippet for repositioning the United States and the United Kingdom at the top of the list:

.md-form__select__country__list {
    display: grid;
}

.md-form__select__country__list[hidden] {
    display: none;
}

.md-form__select__country__list li {
    order: 3;
}

.md-form__select__country__list li[data-country="US"] {
    order: 1;
}
.md-form__select__country__list li[data-country="GB"] {
    order: 2;
}

With this customization, you can enhance the user experience by highlighting the most relevant countries for your business.

JavaScript

You can also achieve this by using this JavaScript code and adding it to your theme code:

document.addEventListener("DOMContentLoaded", function() {
    setTimeout(function() {
        const countryList = document.querySelector("#orbeCountryList");
        const priorityCountries = ["US", "GB"];
        // Loop through each country in reverse order and move it to the top
        priorityCountries.reverse().forEach(countryCode => {
            const countryItem = countryList.querySelector(`li[data-country="${countryCode}"]`);
            if (countryItem) {
                countryList.insertBefore(countryItem, countryList.firstChild);
            }
        });
    }, 1000);
});