Global-e SFCC Client JS SDK, Popups, Free Shipping Banner and Checkout

GlobalE.ScriptsURL(window.geScriptLoaderData.clientJsDomain); // e.g. https://www2.bglobale.com
GlobalE.SetCookieDomain(window.geScriptLoaderData.cookieDomain); // e.g. www.site.com

​

Global-e Welcome pop up

• Standard - Global-e Client JS SDK will show the welcome pop-up (enabled by default), based on the configuration made on the Global-e side, only for Global-e operated countries.
  The layout, look & feel and other elements of the Standard Global-e welcome pop-up is configured on the Global-e side and will be applied on the merchant storefront by Global-e Client JS SDK automatically.
  Standard Global-e welcome pop-up can be initialized by executing the JavaScript function:
  GlobalE.LoadWelcome("US", "en-US", "USD");
  
  It is triggered in int_globale_{architecture}/cartridge/client/default/js/geScriptLoader.js file.
• Custom - You are fully free to implement your own custom Welcome pop-up using standard SFCC content slots/assets, templates and any other components.
  The Standard Global-e welcome pop-up should be disabled on the Global-e side.

​

Global-e Country Switcher

GlobalE.LoadShippingSwitcher("US", "en-US", "USD", false);

1. Display Global-e country switcher on SFCC sites operated and not operated by Global-e.
   On non-operated SFCC sites you can display the Global-e country switcher by adding int_globale_sfra_popups or int_globale_sitegenesis_popups, which contain a simple version of the Global-e integration used only for displaying the country switcher.
2. Redirect to the same page in the scope of one site or across different SFCC sites.
   In the current context ‘redirect’ means in case of the changing country/language/currency.
   The redirect works properly only if at the end of the site’s path is existed action/page location (for example homepage, cartpage, etc.)
3. Define allowed/disallowed countries for the site.
   Global-e country switcher allows defining allowed/disallowed countries for the site.
   For disallowed countries as a fallback will be preselected site default country.
4. Define allowed/disallowed countries for the locale.
   Global-e country switcher allows defining allowed/disallowed countries for the locale.
   For disallowed countries as a fallback will be preselected site default country.
5. Define only one allowed country for the locale.
   Makes sense to use only if each country has its own locale.
6. Use different domains across SFCC sites and set the correct country during redirection.
7. Use language selector for countries.
   Global-e country switcher allows using multiple languages in the scope of one country.
8. Set the right language of the welcome popup depending on the selected language in the selector.

​

Installation of Global-e country switcher on non-operated SFCC sites

​

Custom Country Switcher

​

Country list

• is an instance of Country configured on the Global-e side, and stored into GLOBALE_COUNTRIES Custom Object by running scheduled GlobaleSettings Job
• has Name (“name” {string} custom attribute of Custom Object)
• has ISO2 Country Code (“code” {string} custom attribute of Custom Object)
• can be operated/non-operated by Global-e (“isOperatedByGlobalE” {boolean} custom attribute of Custom Object)
• has default ISO3 Currency Code (“defaultCurrencyCode” {string} custom attribute of Custom Object)
• can have a Site URL, where the customer should be redirected to if the customer selects this country (“siteUrl” {string|null} custom attribute of Custom Object)

​

Country Site redirect URL

• action - standard SFCC action (i.e. “Home-Show”)
• SiteID (optional) - standard SFCC Site ID (i.e. “RefArch”). If present - will be used to replace the Site ID in the URL.
• locale - standard SFCC request locale (i.e. “en_US”)
• hostName (optional) - the host which is different from the main host of the current storefront. Must be defined properly in SFCC BM for any available Site, otherwise, it won’t work. If present - will be used to replace the current storefront host in the URL.
• URLParameters (optional) - any additional URL parameters denoted by vertical line (”|”) which should be passed to the end Site URL, in format parameter1=value1|parameter2=value2|…|parameterN=valueN. If present - will be added as additional URL parameters to the final Site redirect URL.

​

Currency list

• is an instance of Currency configured on the Global-e side, and stored into GLOBALE_CURRENCIES Custom Object by running scheduled GlobaleSettings Job
• has Name (“name” {string} custom attribute of Custom Object)
• has ISO3 Currency Code (“code” {string} custom attribute of Custom Object)
• has Currency Symbol (“symbol” {string} custom attribute of Custom Object)
• has Max Decimal Places (“maxDecimalPlaces” {int} custom attribute of Custom Object)

​

Global-e Free Shipping Banner

<div id="GlobaleFreeShippingBannerContainer"> </div>

​

Global-e Checkout

GlobalE.Checkout("cart_token", "id_wrapper_tag");

​

Checkout Analytics Data Implementation

/**
 * Handler function of 'GlobalE.OnCheckoutStepLoadedHandler' event
 * @param {Object} data - Event data
 */
GeScriptLoader.prototype.onCheckoutStepLoadedHandler = function (data) {
    try {
        if (data.StepId === data.Steps.CONFIRMATION) {
            // stop sending keepAlive ajax call
            if (('globaleKeepAlive' in window) && window.globaleKeepAlive) {
                clearInterval(window.globaleKeepAlive);
            }
        }

        /**
         * If you need to implement the frontend analytics please put it here
         */

        /**
         * Only for Backend Analytics, like standard SFCC Merchant Tools / Analytics / Purchase Reports.
         * Should be handled in Globale-Analytics controller
         */
        var geIframe = document.querySelector('#gle_iframe');
        Helpers.makeJsonAjaxCall(geIframe.dataset.analyticsUrl, 'POST', JSON.stringify(data))
            .then(function (response) { // eslint-disable-line no-unused-vars
                // handle response
            })
            .catch(function (e) {
                console.warn(e); // eslint-disable-line no-console
            });
    } catch (e) {
        console.warn(e); // eslint-disable-line no-console
    }
};