Composables

The Country Detection feature provides composables that enable location detection and automatically match it with the appropriate shop. Available through the corresponding NPM module @scayle/storefront-country-detection these composables come with configurable parameters to help implement the feature in your project.

useCountryDetection

A composable that provides logic for detecting the user's country and suggesting shops matching the detected country. This composable helps improve user experience by tailoring shop suggestions to their location. It also provides a fallback mechanism to ensure a valid shop suggestion is always available, even if no perfect match for the detected country exists.

Parameters

`getDetectedCountryCode`

(Optional) A function to get the detected country code. This function should return a country code string (e.g., US", "CA", "DE") or a promise that resolves to a country code.

Default Behavior: If not provided, the composable defaults to a function that infers the country code from the user's timezone. This provides a good starting point for country detection.

`shouldPromptUser`

(Optional) A function that determines whether the user should be prompted to switch shops based on the detected region and their currently selected region (if any).

This function allows for customization of the user experience by giving control over when to prompt users about potential shop switches.

If not set, the user will be prompted as long as they are not logged in and have not already dismissed or confirmed the prompt modal.

`fallbackShopId`

(Optional) The Shop ID to use if there are no shops that match the detected region.

When the detected region doesn't correspond to any available shop, the shop with the fallbackShopId will be suggested instead. This ensures that a valid shop is always suggested, even when a perfect match for the region isn't found.

Returns

`suggestedShops`

A reactive computed array containing an array of PublicShopConfig objects. This array will contain:

Shops that match the detected region (if any)
If no shops match the detected region, it will contain the shop with the ID specified by the fallbackShopId.

`detectedRegion`

A reactive readonly Ref string with the detected region code (based on the user's location).

Contains the result of getDetectedCountryCode function.

An empty value will also result in an empty suggestedShop.

`suggestionActive`

A reactive readonly Ref boolean indicating whether a suggestion for switching shops should be active.

The value will be false if any of the following conditions are met:

suggestedShops is empty.
The detectedRegion does not match the region of the current shop.
The function shouldPromptUser returns false.
The user is logged in or has already dismissed the modal prompt.

Conversely, if there are suggestedShops and the detectedRegion matches the shop's region, the value will be true if shouldPromptUser returns true or if the user is not logged in and has not yet dismissed the modal prompt.

`markUserAsPrompted`

A setter function to mark the user as promoted.

If called the boolean value hasPromptedUser will be set to true.

`hasPromptedUser`

A reactive computed boolean that tracks whether the user has already been prompted to switch shops. It is persisted in session storage (key: 'hasPromptedCountrySwitch') to prevent repeated prompts within the same browsing session.

Since hasPromptedUser is a computed reference, it is read-only and can only be set to true using the markUserAsPrompted function.