Integrating ecommerce features to your app

MobiLoud allows you to use a native API to integrate your website with native features of your app.

Cart Abandonment and Cart Badge features rely on the number of products in the user's cart to work, integrating them directly with your website is the most reliable way to ensure that you are passing the right information to the app.

When integrating these features into your website, you will always want to make sure they are wrapped in a conditional to ensure that they will only be triggered when your website is displayed inside the app, to do this we can use the user agent, as follows:

<script type="text/javascript">
  function isApp() {
  	// Get the browser user agent and convert it to lower case
    const userAgent = navigator.userAgent.toLowerCase();
    
    // Return true if the user agent includes the "canvas" string
    return userAgent.includes("canvas"); 
  }
</script>

You can now trigger the native API functions when the user browses your website in the app, by wrapping the code with the isApp() function.

Cart Badge

The Cart Badge feature should be triggered whenever the number of products in the user cart changes, this is how you should use it:

<script type="text/javascript">
	nativeFunctions.updateBadge($tabIndex, $badgeValue);
</script>

The tabIndex refers to the position of the tab where the cart badge should be displayed. If your app displays the "Cart" tab as the second tab in the bottom navigation, then you will want to use "2" as the value for that parameter.

The badgeValue refers to the number that should be displayed in the badge, and it should be updated as the user adds or removes products from his cart.

The final code should look like this:

<script type="text/javascript">
  function isApp() {
  	// Get the browser user agent and convert it to lower case
    const userAgent = navigator.userAgent.toLowerCase();
    
    // Return true if the user agent includes the "canvas" string
    return userAgent.includes("canvas"); 
  }
  
  if(isApp) {
  	// Get actual cart item count using code from your website, here we are using 3 as a placeholder
    let cartItems = 3;

    // Call updateBadge only if the count has changed, again you will want to use your website code to determine when to trigger the following code
    if (cartItems !== previousCartItemCount) { 
    	// Update the badge in the second tab of your app's bottom navigation
        nativeFunctions.updateBadge(2, cartItems);
        
        // Update for next comparison
        previousCartItemCount = cartItems;
    }
  }
</script>

Tab Refresh

When updating the badge with the number of products in the cart, you will also want to trigger a page refresh on the tab that displays the cart page, so the next time the user goes to that tab he can see all the latest products in it.

For this, we can use the nativeFunctions.updateTab($tabIndex) function, as follows:

<script type="text/javascript">
  function isApp() {
  	// Get the browser user agent and convert it to lower case
    const userAgent = navigator.userAgent.toLowerCase();
    
    // Return true if the user agent includes the "canvas" string
    return userAgent.includes("canvas"); 
  }
  
  if(isApp) {
  	// Get actual cart item count using code from your website, here we are using 3 as a placeholder
    let cartItems = 3;

    // Call updateBadge only if the count has changed, again you will want to use your website code to determine when to trigger the following code
    if (cartItems !== previousCartItemCount) { 
    	// Update the badge in the second tab of your app's bottom navigation
        nativeFunctions.updateBadge(2, cartItems);
        
        // Triggers a refresh on the second tab of your app's bottom navigation
        nativeFunctions.updateTab(2);
        
        // Update for next comparison
        previousCartItemCount = cartItems;
    }
  }
</script>

Cart Abandonment

The Cart Abandonment feature also integrates with the number of products in the user's cart, so you can use a similar piece of code to configure it.

The specifics of the Cart Abandonment notifications (title, message, link, delay) must be adjusted directly in the app configuration, but scheduling the notifications is something that must happen on the website side.

The logic we will use for this is very simple, when there is one or more products in the cart we will schedule the notifications, when there are no products we will cancel any scheduled notifications. The idea is to schedule the notifications whenever the user adds something to his cart, and cancel any scheduled notifications when he removes all products or completes a purchase.

<script type="text/javascript">
  function isApp() {
  	// Get the browser user agent and convert it to lower case
    const userAgent = navigator.userAgent.toLowerCase();
    
    // Return true if the user agent includes the "canvas" string
    return userAgent.includes("canvas"); 
  }
  
if (isApp) {
	// Get actual cart item count (replace this placeholder)
    let cartItems = 3;

    // Call the following functions only if the cart item count has changed, again you will want to use your website code to determine when to trigger the following code
    
    // If there is 1 or more products in the cart, schedule the notifications
    if (cartItems > 0) {
        nativeFunctions.scheduleLocalNotifications();
    }

    // If there are no products in the cart, cancel all scheduled notifications
    if (cartItems === 0) {
        nativeFunctions.cancelLocalNotifications();
    }
}
</script>

Integrating With Your Website

Collaborate with your website developer to implement the provided code snippets into your site's codebase.

You will want to get his assistance to determine the best way to get the number of products in the user cart, and also to use events to trigger the badge and notification logic whenever the number of products in the cart changes.

‍