Locator & Pages für mobile Apps implementieren

German

+ More

Einführung

Der Store-Locator kann mobilen Apps über WebViews hinzugefügt werden. Dieser Artikel zeigt dir, wie du den Storefinder für iOS- und Android-Apps integrierst.

Dieser Artikel geht nicht ins Detail, wie du das Verhalten der WebView anpasst. Der Storefinder hat mehrere Links und Aktionen, bei denen Anpassungen nötig sind. Zum Beispiel:

Wenn du auf den Route-Button auf der Standortseite klickst, sollte die Standard-Karten-App des Telefons öffnen
Wenn du auf ein Produkt auf einer Standortseite klickst, sollte der Standard-Browser öffnen und zur URL navigieren
Wenn du auf den Anruf-Button auf der Standortseite klickst, sollte der Nutzer zum Anrufen dieser Nummer geleitet werden (abhängig vom Ablauf jedes mobilen Betriebssystems)
Wenn du den Storefinder öffnest, sollte das Mobiltelefon den Nutzer nach Berechtigung für die Geolokalisierung fragen, um dann die Entfernung des Nutzers zu den Standorten in der Standortliste anzuzeigen
Wenn du auf Facebook/Instagram/(andere Social-Icons) klickst, sollte der Nutzer zu diesen Social-Apps weitergeleitet werden

Dies muss vom Development-Team durchgeführt werden, das den Storefinder implementiert.

iOS mit Swift:

Schritt 1

Importiere Webkit in ViewController.swift

import WebKit

Schritt 2

Erweitere den ViewController um WKUIDelegate

class ViewController: UIViewController, WKUIDelegate{

Schritt 3

Erstelle eine Instanz von webkit webview

let webViewComponent = WKWebView()

Schritt 4

Erweitere die webkit WebView auf den ganzen Bildschirm (über viewDidLayoutSubviews)

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

Schritt 5

Lade den Storefinder in 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)
        
    }

Vollständiger Code von 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