Implementar Locator & Pages para aplicaciones móviles

Spanish

+ More

Introducción

El localizador de tiendas se puede añadir a aplicaciones móviles mediante el uso de WebViews. Este artículo muestra cómo integrar el localizador de tiendas tanto para aplicaciones iOS como Android.

Este artículo no entrará en detalles sobre cómo personalizar el comportamiento del WebView. El localizador de tiendas tiene múltiples enlaces y acciones donde se necesita personalización. Por ejemplo:

Al hacer clic en el botón de ruta en la página de ubicación, se debe abrir la aplicación de mapas predeterminada del teléfono
Al hacer clic en un producto en una página de ubicación, debe abrir el navegador predeterminado e ir a la URL
Al hacer clic en el botón de llamada en la página de ubicación, debe guiar al usuario a llamar a ese número (según el flujo de cada SO móvil)
Al entrar en el localizador de tiendas, el teléfono móvil debe solicitar al usuario permiso de geolocalización para mostrar la distancia a las ubicaciones en la lista
Al hacer clic en Facebook/Instagram/(otros iconos de redes sociales), el usuario debe ser dirigido a esas aplicaciones de redes sociales

Esto debe realizarlo el equipo de desarrollo que implementa el localizador de tiendas.

iOS con Swift:

Paso 1

Importa Webkit dentro de ViewController.swift

import WebKit

Paso 2

Extiende el ViewController con WKUIDelegate

class ViewController: UIViewController, WKUIDelegate{

Paso 3

Crea una instancia de webkit webview

let webViewComponent = WKWebView()

Paso 4

Extiende el webkit WebView a toda la pantalla (mediante viewDidLayoutSubviews)

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

Paso 5

Carga el localizador de tiendas dentro de 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)
        
    }

Código completo 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