Customization

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.

Customize Country Detection

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 {
  ...
} = useCountryDetection({
  getDetectedCountryCode: getCustomerCountryByIP,
})

User prompting

The shouldPromptUser function is an optional parameter used to determine if a user should be prompted to switch shops based on their detected region and the current shop's region. This customization allows for flexible logic that can be tailored to different business needs or specific use cases.

For example, you can create a custom function with additional conditions to handle user prompting and then pass this function into the composable.

typescript

Copy

const customShouldPromptUser = (detectedRegion: string, currentRegion: string) => {
  // Retrieve visit count from local storage or another persistent mechanism
  let visitCount = parseInt(localStorage.getItem('visitCount') || '0', 10);

  // Increment visit count
  localStorage.setItem('visitCount', (visitCount + 1).toString());

  // Only prompt on the first visit or after a prolonged absence (e.g., 30 visits)
  return visitCount === 0 || visitCount >= 30;
};

typescript

Copy

const { suggestedShops, detectedRegion, suggestionActive, markUserAsPrompted } = useCountryDetection({
  shouldPromptUser: customShouldPromptUser,
  // Other parameters...
});

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.

Disabling

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