Integrate your selector

Developers only: This documentation is intended for developers with technical knowledge and experience in Shopify Theme Development.

Please don't follow this article if you have multiple stores to redirect with Orbe. Your selector should be any one created by the Orbe app. Follow this article: Geolocation Button

In our app Orbe, we have an app embed called "Market Selector" that allows any Shopify merchant to add and customize a country and language selector in the footer of any Shopify Theme. These selectors use the Orbe technology.

However, some merchants would like to use their native Shopify theme country and language selector with Orbe because they want its style and UX in their theme. They can work with a developer to synchronize this theme selector with Orbe for that case.

Tutorial

If you are on a paid Orbe subscription and would like to use your theme’s native selector, please contact us. Our development team will handle the integration for you.

This tutorial provides a straightforward and effective method for integrating a country selector with Orbe, ensuring a seamless user experience.

1. Retrieve the store domain

First, ensure we correctly set cookies across your Shopify store by capturing the domain.

This can be achieved using Orbe's getCountryDomain function. If this function does not provide a result, we'll use window.location.hostname as a reliable fallback.

let shopDomain = (typeof orbito !== 'undefined' && orbito.getCountryDomain) ? (orbito.getCountryDomain() || window.location.hostname) : window.location.hostname;

2. Customize the onItemClick event handler

Locate the function in your Shopify theme that triggers when a user selects a country or language. This function usually handles the event and submits the form in the last step.

Here you have an example of the code for the selector of the official Shopify documentation:

onItemClick(event) {
    event.preventDefault();
    const form = this.querySelector('form');
    this.elements.input.value = event.currentTarget.dataset.value;
    if (form) form.submit();
}

For each scenario, it is super important that you update this:

• Country change: Update the cookie mdApp_countryCodeDomain and indicate in a URL parameter this update to Shopify Markets. This is only necessary for country change as you may set up a different subdomain or domain for a market, and you will move these preferences throughout the URL parameter to Shopify Markets.

• Language change: Update the cookie mdApp_showRecommendationLang.

Here is the code improvement based on the above example:

onItemClick(event) {
    event.preventDefault();
    const form = this.querySelector('form');
    const inputType = event.currentTarget.dataset.input;
    const value = event.currentTarget.dataset.value;

    // Determine if it is a country_code or language_code change
    const inputCountry = form.querySelector('input[name="country_code"]');
    const inputLanguage = form.querySelector('input[name="locale_code"]');

    // Get the return_to
    const returnToInput = form.querySelector("input[name='return_to']");

    if (inputCountry) {
        // Check if the 'country' parameter exists and if not add it to the URL
        if (returnToInput.value.match(/(\?|&)country=[^&]*/)) {
            // Replace the existing country parameter
            returnToInput.value = returnToInput.value.replace(/(\?|&)country=[^&]*/, `$1country=${value}`);
        } else {
            // Add the country parameter
            if (returnToInput.value.includes('?')) {
                returnToInput.value += `&country=${value}`;
            } else {
                returnToInput.value += `?country=${value}`;
            }
        }
        // Update the Orbe cookie for country code
        document.cookie = `mdApp_countryCodeDomain=${value}; domain=${shopDomain}; path=/; max-age=${60 * 60 * 24 * 60};`;

    } 
    
    if (inputLanguage) {
        // Update the Orbe cookie for language code
        document.cookie = `mdApp_showRecommendationLang=${value}; domain=${shopDomain}; path=/; max-age=${60 * 60 * 24 * 60};`;
    }

    // Update the form's input field and submit the form
    this.elements.input.value = value;
    if (form) form.submit();
}

Real example

Here is an example of how the entire code might look, based on the JavaScript for the official Shopify country selector documentation:

class LocalizationForm extends HTMLElement {
    constructor() {
        super();
        this.elements = {
            input: this.querySelector('input[name="language_code"], input[name="country_code"]'),
            button: this.querySelector('button'),
            panel: this.querySelector('ul'),
        };
        this.elements.button.addEventListener('click', this.openSelector.bind(this));
        this.elements.button.addEventListener('focusout', this.closeSelector.bind(this));
        this.addEventListener('keyup', this.onContainerKeyUp.bind(this));

        this.querySelectorAll('a').forEach(item => item.addEventListener('click', this.onItemClick.bind(this)));
    }

    hidePanel() {
        this.elements.button.setAttribute('aria-expanded', 'false');
        this.elements.panel.setAttribute('hidden', true);
    }

    onContainerKeyUp(event) {
        if (event.code.toUpperCase() !== 'ESCAPE') return;

        this.hidePanel();
        this.elements.button.focus();
    }

    onItemClick(event) {
        event.preventDefault();
        const form = this.querySelector('form');
        const value = event.currentTarget.dataset.value;

        // Shop domain
        let shopDomain = (typeof orbito !== 'undefined' && orbito.getCountryDomain) ? (orbito.getCountryDomain() || window.location.hostname) : window.location.hostname;

        // Determine if it is a country_code or language_code change
        const inputCountry = form.querySelector('input[name="country_code"]');
        const inputLanguage = form.querySelector('input[name="locale_code"]');

        // Get the return_to
        const returnToInput = form.querySelector("input[name='return_to']");

        if (inputCountry) {
            // Check if the 'country' parameter exists and if not add it to the URL
            if (returnToInput.value.match(/(\?|&)country=[^&]*/)) {
                // Replace the existing country parameter
                returnToInput.value = returnToInput.value.replace(/(\?|&)country=[^&]*/, `$1country=${value}`);
            } else {
                // Add the country parameter
                if (returnToInput.value.includes('?')) {
                    returnToInput.value += `&country=${value}`;
                } else {
                    returnToInput.value += `?country=${value}`;
                }
            }
            // Update the Orbe cookie for country code
            document.cookie = `mdApp_countryCodeDomain=${value}; domain=${shopDomain}; path=/; max-age=${60 * 60 * 24 * 60};`;
        }
        
        if (inputLanguage) {
            // Update the Orbe cookie for language code
            document.cookie = `mdApp_showRecommendationLang=${value}; domain=${shopDomain}; path=/; max-age=${60 * 60 * 24 * 60};`;
        }

        // Update the input value and submit the form
        this.elements.input.value = value;
        if (form) form.submit();
    }

    openSelector() {
        this.elements.button.focus();
        this.elements.panel.toggleAttribute('hidden');
        this.elements.button.setAttribute('aria-expanded', (this.elements.button.getAttribute('aria-expanded') === 'false').toString());
    }

    closeSelector(event) {
        const shouldClose = event.relatedTarget && event.relatedTarget.nodeName === 'BUTTON';
        if (event.relatedTarget === null || shouldClose) {
            this.hidePanel();
        }
    }
}

customElements.define('localization-form', LocalizationForm);