Documentation Portal

This section provides details about the Free Shipping Threshold customizable elements.

Review this section carefully and provide your customization requirements to the Global-e design team.

Basic Text

The Free Shipping Threshold includes a short sentence presenting the updated value of the threshold.

Global-e can modify the text, font, and color of the message.

Progress Bar

A progress bar can serve as an additional graphic element to help incentivize customers.

The progress bar structure:

<{OuterContainerHtmlTag} id='{OuterContainerId}' class='{OuterContainerClass}' style='{OuterContainerStyle}'>
	<{InnerContainerHtmlTag} id='{InnerContainerId}' class='{InnerContainerClass}' style='{InnerContainerStyle}'>
	</{InnerContainerHtmlTag}>
</{OuterContainerHtmlTag}>

If you want to edit the style of the progress bar, provide Global-e with one of the following methods and your preferred colors:

Global-e can set up the progress bar with or without numbers on either side of it.

The GetFreeShippingThresholdByGeoIP method retrieves the free shipping threshold value based on the shipping country stored in a cookie on the shopper's device. This method returns the threshold value that the shopper needs to reach to qualify for free shipping during the checkout process. In addition, it returns data such as the country code, currency code, and cart data.

You do not need to define any parameters for this method as the country and currency are taken from the GeoIP (in the cookie). However, you need to set up a callback for this method, as described below.

Method Signature: The method signature for GetFreeShippingThresholdGeoIP is as follows:

GEM_Components.ExternalMethodsComponent.GetFreeShippingThresholdByGeoIP(function (data) {
    console.log(data);
});

Parameters: The GetFreeShippingThresholdByGeoIP method does not require input parameters.

Return type: The GetFreeShippingThresholdByGeoIP method returns the shipping threshold and data in the callback function in an object called IGetFreeShippingThresholdResponse.

The (function (data)) object returns the following properties. Make sure to set up the callback data to receive these properties.

{
    "ErrorMessage": "",
    "CountryCode": "GB",
    "CurrencyCode": "GBP",
    "ShippingThreshold": 40,
    "FreeShippingCarrier": "Tracked Post",
    "CartData": {
        "CartTotalPrice": null,
        "CountryCode": "GB",
        "CurrencyCode": "GBP",
        "CurrencySymbol": "£"
    }
}

Description:

CartData Object Properties

The CartData object includes the following properties:

The data must contain the result of the method's execution, including the free shipping threshold value and additional cart data for the customer. If an error occurs during the execution of the method, the ErrorMessage property of the IGetFreeShippingThresholdResponseinterface must contain a string value describing the error.

Callback:

Create a callback function and define the object data to match the properties in the method's return (IGetFreeShippingThresholdResponse). See the Return Type section.

Here is an example of how to use the method:

In this example, the GetFreeShippingThresholdByGeIP method is called with the default US country code and the USD currency code found in the GeoIP (cookie). The callback function is passed and it logs the result of the method's execution to the console. The result includes the free shipping threshold value based on the GeoIP, the name of the carrier that offers free shipping, and additional cart data for the customer.

GEM_Components.ExternalMethodsComponent.GetFreeShippingThresholdByGeoIP(function (data) {
    // Handle the result of the method's execution here.
       console.log(data);
});

Best Practices:

Here are some tips and best practices for using GetFreeShippingThresholdByGeoIP effectively:

Use the GetFreeShippingThreshold method to retrieve the shopper's free shipping threshold value for a specific country and currency that you define. This method returns the threshold value that the shopper needs to reach to qualify for free shipping during the checkout process. In addition, it returns data such as the country code, currency code, and cart data.

In addition to defining the country and currency parameters, you need to set up a callback for this method, as described below.

Method Signature: The method signature for GetFreeShippingThreshold is as follows:

GEM_Components.ExternalMethodsComponent.GetFreeShippingThreshold(
    { "CountryCode": "String", "CurrencyCode": "String" },
    callback: (response: IGetFreeShippingThresholdResponse) => void
    ): void

Parameters:

Return Type: The GetFreeShippingThresholdByGeoIP method returns the shipping threshold and data in the callback function in an object called IGetFreeShippingThresholdResponse.The (function (data)) object returns the following properties.

Make sure to set up the callback data to receive these properties.

export interface IGetFreeShippingThresholdResponse {
    CountryCode: string;
    CurrencyCode: string;
    ErrorMessage: string;
    ShippingThreshold: number;
    FreeShippingCarrier: string;
    CartData: IUserCartLocalizeSetting;
}

Description:

CartData Object Properties

The CartData object includes the following properties:

The data must contain the result of the method's execution, including the free shipping threshold value and additional cart data for the customer. If an error occurs during the execution of the method, the ErrorMessage property of the IGetFreeShippingThresholdResponseinterface must contain a string value describing the error.

Callback:

Create a callback function and define the object data to match the properties in the method's return (IGetFreeShippingThresholdResponse). See the Return Type section.

Here is an example of how to use the method:

In this example, the GetFreeShippingThreshold method is called with the US country code and the USD currency code. The callback function is passed and it logs the result of the method's execution to the console. The result includes the free shipping threshold value, the name of the carrier that offers free shipping, and additional cart data for the customer.

GEM_Components.ExternalMethodsComponent.GetFreeShippingThreshold(
   { "CountryCode": "US", "CurrencyCode": "USD" },
    function (data) {
    // Handle the result of the method's execution here
    console.log(data);
   }
);

Best Practices: Here are some tips and best practices for using GetFreeShippingThreshold effectively: