Implement the Locator & Pages for mobile apps

+ More

Table of Contents

Introduction iOS with Swift: Step 1 Step 2 Step 3 Step 4 Step 5 Full code of ViewController.swift: Android with Kotlin: Step 1 Step 2 Step 3 Step 4

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
    }
}

locate implement

Implement the Locator & Pages for mobile apps

Contact Us

Introduction

iOS with Swift:

Step 1

Step 2

Step 3

Step 4

Step 5

Full code of ViewController.swift:

Android with Kotlin:

Step 1

Step 2

Step 3

Step 4

Related Articles