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