Implémenter Locator & Pages pour les applications mobiles

French

+ More

Introduction

Le localisateur de magasins peut être ajouté aux applications mobiles en utilisant les WebViews. Cet article montre comment intégrer le localisateur de magasins pour les applications iOS et Android.

Cet article ne détaillera pas comment personnaliser le comportement de la WebView. Le localisateur de magasins contient plusieurs liens et actions qui nécessitent une personnalisation. Par exemple :

En cliquant sur le bouton d'itinéraire de la page de localisation, l'application cartographique par défaut du téléphone doit s'ouvrir
En cliquant sur un produit de la page de localisation, il doit ouvrir le navigateur par défaut et accéder à l'URL
En cliquant sur le bouton d'appel de la page de localisation, il doit guider l'utilisateur vers l'appel de ce numéro (en fonction du flux de chaque système d'exploitation mobile)
En accédant au localisateur de magasins, le téléphone mobile doit demander à l'utilisateur la permission de géolocalisation pour afficher la distance aux emplacements dans la liste des emplacements
En cliquant sur les icônes Facebook/Instagram/(autres réseaux sociaux), l'utilisateur doit être redirigé vers ces applications sociales

Cela doit être fait par l'équipe de développement qui implémente le localisateur de magasins.

iOS avec Swift :

Étape 1

Importez Webkit dans ViewController.swift

import WebKit

Étape 2

Étendez le ViewController avec WKUIDelegate

class ViewController: UIViewController, WKUIDelegate{

Étape 3

Créez une instance de webkit webview

let webViewComponent = WKWebView()

Étape 4

Étendez la WebView webkit à l'ensemble de l'écran (via viewDidLayoutSubviews)

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

Étape 5

Chargez le localisateur de magasins dans 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)
        
    }

Code complet de 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="