Integrate your selector
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
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.replace(/^www\./, '')) : window.location.hostname.replace(/^www\./, '');
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);
Last updated
Was this helpful?