Country Detection

The Country Detection feature offers a high level of customization, enabling you to adjust its display and behavior to align with your unique business requirements. The following sections outline the primary customization options available for fine-tuning this functionality.

Country Detection Logic

The default implementation of the country detection uses the timezone of the browser to assume the user's country. If you would like to use a different method such as GeoIP lookup, the getCurrentCountryFromTimezone function can be easily swapped out. The replacement function should return a single country code which represents the user's country, or undefined if one cannot be found. In other words, a function that matches the interface () => string | undefined.

One possibility is using a third-party API accessed through a custom RPC method.

typescript

Copy

export const getCustomerCountryByIP: RpcHandler<string> = (
  context: RpcContext,
) => {
  return await thirdPartyAPI.getCountryCodeFromIP(context.ip)
}

Then you can replace the call to getCurrentCountryFromTimezone with a call to the custom RPC.

typescript

Copy

const getCustomerCountryByIP = useRpcCall('getCustomerCountryByIP')
// const code = getCurrentCountryFromTimezone()
const code = await getCustomerCountryByIP()

Shops by Region

It's also possible to customize the getShopsForRegion function. The default implementation will search the available shops for those that match the detected region. If there are multiple matches, multiple options will be presented in the dialog. A fallback shopId can be passed as the second argument. This is useful if you have a global shop. When no shop matches the user's region, this fallback will be used instead. If there are no matches and a fallback is not specified, the user will not be prompted.

Message translations

The messaging used in the dialog and action buttons is loaded from the translation files. You can update the keys under country_selection to adjust the wording.

Country Names and Codes

The country names shown in the prompt use the default translation of the shop's country code. If you would like to override this behavior, extend the translations file with the key country_selection.override_codes.CODE. The code should be uppercase.

Disabling

If you want to disable this feature, remove the <CountryDetection/> component from the default.vue layout.