Integrate your Country Selector

This documentation is for developers only. If you're not a developer, please send this information to your developer, as they can follow the documentation.

We always recommend using our "Market Selector" app embeds. This article is only for synchronizing your native theme country selector.

If you have more than one store synced with Orbe, please don't follow this article. Your selector should be the one created by the Orbe app. If you need any customization for this selector, please get in touch with our Support team via app chat or email at [e-mail]. We are always happy to help with specific customizations for the Orbe Plus plan in the Market selector.

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.

Step-by-Step Guide

Step 1: Get the domain of the store in a JS variable. You can do that with orbito.getCountryDomain

let shopDomain = orbito.getCountryDomain();

Step 2: Find the function that runs before submitting the localization form. This method is called when a user clicks on one of the country names in the selector and sets the value of the input element to the value of the country code where they want to buy.

Here you have an example of which would be the code from the country 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();
}

Step 3: Once you find it, select the input type return_to of the form. These would be the changes from the previous code:

onItemClick(event) {
    event.preventDefault();
    const form = this.querySelector('form');
    const returnToInput = form.querySelector("input[name='return_to']");
    this.elements.input.value = event.currentTarget.dataset.value;
    if (form) form.submit();
}

Step 4: Save the country code value in a JavaScript variable.

onItemClick(event) {
    event.preventDefault();
    const form = this.querySelector('form');
    const returnToInput = form.querySelector("input[name='return_to']");
    let countryCode = event.currentTarget.dataset.value;
    this.elements.input.value = countryCode;
    if (form) form.submit();
}

Step 5: Change the input type return_to of the form depending on if it has some parameters:

onItemClick(event) {
    event.preventDefault();
    const form = this.querySelector('form');
    const returnToInput = form.querySelector("input[name='return_to']");
    let countryCode = event.currentTarget.dataset.value;
    let urlCountryRedirect = '';
    if (returnToInput.value.includes('?')) {
        urlCountryRedirect = '&mdApp_countryCodeDomain=' + countryCode;
    } else {
        urlCountryRedirect = '?mdApp_countryCodeDomain=' + countryCode;
    }
    returnToInput.value = returnToInput.value + urlCountryRedirect;
    this.elements.input.value = countryCode;
    if (form) form.submit();
} 

Step 6: Update the new country preferences of the customer in Orbe's cookie:

onItemClick(event) {
    event.preventDefault();
    const form = this.querySelector('form');
    const returnToInput = form.querySelector("input[name='return_to']");
    let countryCode = event.currentTarget.dataset.value; 
    let urlCountryRedirect = '';
    if (returnToInput.value.includes('?')) {
       urlCountryRedirect = '&mdApp_countryCodeDomain=' + countryCode;
            } else {
        urlCountryRedirect = '?mdApp_countryCodeDomain=' + countryCode;
            }
    returnToInput.value = returnToInput.value + urlCountryRedirect;
    document.cookie = `mdApp_countryCodeDomain=${countryCode}; domain=${shopDomain}; path=/; max-age=${60 * 60 * 24 * 60};`;
    this.elements.input.value = countryCode;
    if (form) form.submit();
  }

Here you can see the complete JavaScript code synchronized with Orbe based on the example provided in the official Shopify documentation:

// function to get the domain of the current shop
function getShopDomain() {
  let shopDomain = document.domain;
  return shopDomain;
}

// custom element for the localization form
class LocalizationForm extends HTMLElement {
  constructor() {
    super();

    // initialize the elements for the form
    this.elements = {
      input: this.querySelector('input[name="language_code"], input[name="country_code"]'),
      button: this.querySelector('button'),
      panel: this.querySelector('ul'),
    };

    // add event listeners for opening and closing the selector
    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));

    // add event listeners for selecting a country
    this.querySelectorAll('a').forEach(item => item.addEventListener('click', this.onItemClick.bind(this)));
  }

  // function to hide the country selector panel
  hidePanel() {
    this.elements.button.setAttribute('aria-expanded', 'false');
    this.elements.panel.setAttribute('hidden', true);
  }

  // function to handle keyup events on the form container
  onContainerKeyUp(event) {
    if (event.code.toUpperCase() !== 'ESCAPE') return;

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

  // function to handle clicking on a country
  onItemClick(event) {
    event.preventDefault();
    const form = this.querySelector('form');
    const returnToInput = form.querySelector("input[name='return_to']");
    let countryCode = event.currentTarget.dataset.value;
    let urlCountryRedirect = '';
    if (returnToInput.value.includes('?')) {
      urlCountryRedirect = '&mdApp_countryCodeDomain=' + countryCode;
    } else {
      urlCountryRedirect = '?mdApp_countryCodeDomain=' + countryCode;
    }
    returnToInput.value = returnToInput.value + urlCountryRedirect;
    document.cookie = `mdApp_countryCodeDomain=${countryCode}; domain=${getShopDomain()}; path=/; max-age=${60 * 60 * 24 * 60};`;
    this.elements.input.value = countryCode;
    if (form) form.submit();
  }

  // function to open the country selector panel
  openSelector() {
    this.elements.button.focus();
    this.elements.panel.toggleAttribute('hidden');
    this.elements.button.setAttribute('aria-expanded', (this.elements.button.getAttribute('aria-expanded') === 'false').toString());
  }

  // function to close the country selector panel
  closeSelector(event) {
    const shouldClose = event.relatedTarget && event.relatedTarget.nodeName === 'BUTTON';
    if (event.relatedTarget === null || shouldClose) {
      this.hidePanel();
    }
  }
}

// define the custom element
customElements.define('localization-form', LocalizationForm);