Implement the Locator & Pages for mobile apps

    Last updated on September 21st, 2023

    Introduction

    The store-locator can be added to mobile apps through the use of WebViews.  This article shows how to integrate the storefinder for both iOS and Android apps. 

     

    This article will not go into details about how to customize behaviour of the WebView. The storefinder has multiple links and actions, where customization is needed. For example:

    • On click on the route button on the location page the default map app of the phone should open up
    • On click on a product on a location page, it should open the default browser and move to the url
    • On click on the call button on the location page, it should guide the user towards calling that number (depending on the flow of each mobile OS)
    • When entering the storefinder, the mobile phone should ask the user for permission for the geolocation to then show the distance to the user to the locations in the locations list
    • On click on Facebook/Instagram/(other social icons) the user should be directed to those social apps

    This needs to be done by the development team which implements the storefinder. 

     

     

    iOS with Swift:


    Step 1

    Import Webkit inside ViewController.swift

    import WebKit


    Step 2

    Extend the ViewController with WKUIDelegate

    class ViewController: UIViewController, WKUIDelegate{


    Step 3

    Create an instance of webkit webview

    let webViewComponent = WKWebView()
     


    Step 4

    Extend the webkit WebView to the whole screen (via viewDidLayoutSubviews)

    override func viewDidLayoutSubviews() {
            super.viewDidLayoutSubviews()
            webViewComponent.frame = view.bounds
            
        }

     


    Step 5

    Load the storefinder inside viewDidLoad

    override func viewDidLoad() {
            super.viewDidLoad()
            view.addSubview(webViewComponent)
            
            let html = """
                        <htmlElement>
                            <meta name=\"viewport\" content=\"user-scalable=no, width=device-width\">
                            <![CDATA[<html><script
                                src="https://locator.uberall.com/locator-assets/storeFinderWidget-v2.js"
                                type="text/javascript"
                            ></script>
                            <div
                                style="min-height:600px;"
                                id="store-finder-widget"
                                data-key="YOUR_KEY"
                            /></html>]]>
                        </htmlElement>
                        """
            webViewComponent.uiDelegate = self
            webViewComponent.loadHTMLString(html, baseURL: nil)
            
        }

     

     

    Full code of ViewController.swift:

    import UIKit
    import WebKit
    
    class ViewController: UIViewController, WKUIDelegate{
    
        let webViewComponent = WKWebView()
        
        override func viewDidLoad() {
            super.viewDidLoad()
            view.addSubview(webViewComponent)
            
            let html = """
                        <htmlElement>
                            <meta name=\"viewport\" content=\"user-scalable=no, width=device-width\">
                            <![CDATA[<html><script
                                src="https://locator.uberall.com/locator-assets/storeFinderWidget-v2.js"
                                type="text/javascript"
                            ></script>
                            <div
                                style="min-height:600px;"
                                id="store-finder-widget"
                                data-key="YOUR_KEY"
                            /></html>]]>
                        </htmlElement>
                        """
            webViewComponent.uiDelegate = self
            webViewComponent.loadHTMLString(html, baseURL: nil)
            
        }
        
        override func viewDidLayoutSubviews() {
            super.viewDidLayoutSubviews()
            webViewComponent.frame = view.bounds
            
        }
    }

     

    Android with Kotlin:


    Step 1

    Add a user permission (marked in red) to perform network operations to the AndroidManifest.xml

    AndroidManifest.xml

    <?xml version="1.0" encoding="utf-8"?>
    <manifest xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools">
        <uses-permission android:name="android.permission.INTERNET"></uses-permission>
    
        <application
            android:allowBackup="true"
            […]
        </application>
    
    </manifest>

     

    Step 2

    Setup the layout with a WebView that takes up the whole screen

    activity_main.xml

    <?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity">
    
    
        <WebView
            android:id="@+id/webView"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />
    </RelativeLayout>


    Step 3

    Import packages (marked in red) to MainActivity.kt

    • webkit.WebView
    • webkit.WebViewClient
    • import the app resources through the R class from your application package (show example of our code)
       

    MainActivity.kt

    package com.example.uberallwebviewlocator_android
    
    import android.os.Bundle
    import android.webkit.WebView
    import android.webkit.WebViewClient
    import androidx.appcompat.app.AppCompatActivity
    import com.example.uberallwebviewlocator_android.R.*
     


    Step 4

    Start the storefinder by taking the mainview layout and loading the storefinder data (marked in red)

    MainActivity.kt

    class MainActivity : AppCompatActivity() {
        override fun onCreate(savedInstanceState: Bundle?) {
            super.onCreate(savedInstanceState)
            setContentView(layout.activity_main)
    
            val html = "<htmlElement>\n" +
                    "<meta name=\\\"viewport\\\" content=\\\"user-scalable=no, width=device-width\\\">\n" +
                    "<![CDATA[<html><script\n" +
                    "src=\"https://locator.uberall.com/locator-assets/storeFinderWidget-v2.js\"\n" +
                    "type=\"text/javascript\"\n" +
                    "></script>\n" +
                    "<div\n" +
                    "style=\"min-height:600px;\"\n" +
                    "id=\"store-finder-widget\"\n" +
                    “data-key=\”YOUR_KEY\"\n" +
                    "®/></html>]]></htmlElement>"
    
            val webView = findViewById<WebView>(R.id.webView)
            webView.webViewClient = WebViewClient()
            webView.loadData(html, "text/html; charset=UTF-8", null)
            webView.settings.javaScriptEnabled = true
        }
    }

     

    Full code of MainActivity.kt

    package com.example.uberallwebviewlocator_android
    
    import android.os.Bundle
    import android.webkit.WebView
    import android.webkit.WebViewClient
    import androidx.appcompat.app.AppCompatActivity
    import com.example.uberallwebviewlocator_android.R.*
    
    
    class MainActivity : AppCompatActivity() {
        override fun onCreate(savedInstanceState: Bundle?) {
            super.onCreate(savedInstanceState)
            setContentView(layout.activity_main)
    
            val html = "<htmlElement>\n" +
                    "<meta name=\\\"viewport\\\" content=\\\"user-scalable=no, width=device-width\\\">\n" +
                    "<![CDATA[<html><script\n" +
                    "src=\"https://locator.uberall.com/locator-assets/storeFinderWidget-v2.js\"\n" +
                    "type=\"text/javascript\"\n" +
                    "></script>\n" +
                    "<div\n" +
                    "style=\"min-height:600px;\"\n" +
                    "id=\"store-finder-widget\"\n" +
                    “data-key=\”YOUR_KEY\"\n" +
                    "®/></html>]]></htmlElement>"
    
            val webView = findViewById<WebView>(R.id.webView)
            webView.webViewClient = WebViewClient()
            webView.loadData(html, "text/html; charset=UTF-8", null)
            webView.settings.javaScriptEnabled = true
        }
    }

     

     

    Was this article helpful?

    Save as PDF