Buenas tardes Negociantes, espero que hayan pasado unas excelentes fiestas en dias pasados en compañia de sus seres queridos 🎅👊

Entrando en materia, les comparto los pasos para configurar un plugin de Geolocalización, lo puedes encontrar aqui:  Descargar Plugin

Este plugin sirve para que nuestro cliente nos indique la ubicación de entrega con un PIN en el Mapa de Google al momento de realizar una compra en nuestro sitio web.

Esta solución es ideal si vendes en línea y utilizas woocommerce ya que como sabemos las direcciones aqui en Mexico no estan muy completas o son un poco complicadas de encontrar. Imaginemos una negocio de comida que desea entregar sus pedidos o una tienda de regalos que cuente con compras en línea es ideal.

¿Que necesitamos para que funcione correctamente?

  1. Debes tener una tienda en linea en WordPress con Woocommerce
  2. Comprar el plugin en Themeforest, aqui lo puedes comprar ($17dlls.):  Descargar Plugin
  3. Cuenta en Google Cloud para generar tu API de geolocalización
  4. Certificado de seguridad instalado en tu dominio o puedes utilizar el que regularmente te da gratis tu proveedor de hosting (Certificado de cPanel)
  5. Una taza de café bien cargado

¡Pasemos a la acción!

Una vez que compras el plugin directamente en themeforest y lo descargas viene comprimido, asi que es necesario descomprimirlo y quedará de la siguiente manera:

Al darle doble click entrarás a la carpeta PLUGIN y dentro encontrarás un archivo comprimido de nombre:  woocommerce-nw-location-picker.zip

Es importante mencionarte que ese archivo esta comprimido, no es necesario que lo descomprimas puesto que tu instalación de wordpress lo reconocerá sin problema.

Lo siguiente que haremos es en tu BACKEND de tu sitio web ve a la ruta:  PLUGINS -> AÑADIR NUEVO -> SUBIR PLUGIN

Estando en esa ruta de tu backend haz click donde dice “Seleccionar archivo” y buscas el plugin comprimido con extensión .zip, dale click en “Abrir“, despues “Instalar ahora” y por último “Activar Plugin

Hasta este punto ya lo tendremos instalado y activado, lo siguiente es la configuracion.

 

Para ir a la configuración es necesario ir a la siguiente ruta en tu BACKEND:   AJUSTES -> LOCATION PICKER y la configuración debe de quedar de la siguiente manera:

Nota: En el campo “Default Location Latitude” (& Longitude) ponemos la coordenada que deseamos que aparezca de forma predeterminada.

Para definir nuestra coordenada predeterminada vamos al siguiente enlace y ponemos el pin donde queramos mostrar la ubicacion predeterminada.

Ejemplo:   Click aqui para definir Latitud y Longitud

Para el ejemplo utilizare una coordenada de Hermosillo, Sonora, Mexico y la puedes ver en la siguiente imagen:

Hasta este paso, ya tenemos el plugin instalado y configurado, ahora necesitamos generar la API key en la plataforma de Google para utilizar sus servicios. 

Para ello es necesario que te registres en Google Cloud, te dejo el enlace directo:   https://cloud.google.com/maps-platform

Al registrarte te pedirá des de alta una tarjeta de debito o credito con la finalidad de que respaldo el uso que le das al servicio ya que tiene costo. Sin embargo, en este momento (Enero, 2020) te da lo equivalente a $300 dlls. mensuales que equivalen a una cantidad de consultas determinada, si vas iniciando, no será problema. Cuando tengas bastante tráfico será necesario que consideres esas solicitudes en tu costo de mantenimiento. Cada vez que un usuario llega hasta este punto donde hace la compra y le pide permitir la ubicación se traduce en una solicitud para google. 

Primeramente tienes que crear una API key, le puedes poner el nombre de tu proyecto. 

Como segundo paso es necesario que habilites los siguientes servicios en la API y lo haces de la siguiente manera:

MENU -> API Y SERVICIOS -> PANEL

Es importante mencionarte que en el campo desplegable debe de mostrarse el nombre del proyecto que creaste y como paso numero dos haces click en el boton “HABILITAR API Y SERVICIOS

Una vez que damos click en el boton de “HABILITAR API Y SERVICIOS” nos llevara a la biblioteca para buscarlos y prenderemos los siguientes servicios, uno por uno:

Buscamos uno por uno y le damos click en “HABILITAR”, una vez habilitado le damos regresar en el navegador y prendemos el siguiente, asi hasta prender los 4:

  • Geocoding API
  • Maps JavaScript API
  • Distance Matrix API
  • Maps Static API

Una vez habilitados los servicios, necesitamos crear las credenciales mediante la siguiente ruta:   MENU -> API Y SERVICIOS -> PANEL -> CREDENCIALES -> CREAR CREDENCIALES -> CLAVE DE API

Automaticamente nos genera una llave API y esta es la que pondremos en la configuracion de nuestro plugin

Hasta aqui hemos terminado la configuración y resta hacer la prueba.

Solo ve a tu tienda en linea, agrega un producto, lleva la compra hasta donde es necesario agregar la informacion de entrega, ahi pedira el navegador que permitas detectar tu ubicacion y se mostrara un PIN con la ubicacion de donde te encuentras en ese momento, a eso se le conoce como una solicitud de api, te pongo el ejemplo a continuacion.

Y al permitir detectar la ubicacion mas abajo nos mostrara el mapa con nuestra ubicacion aproximada, la cual podemos fijar a merced moviendo el pin.

Te recomiendo que forzes todo el tráfico hacia el protocolo https, solo es necesario instalar y activar el siguiente plugin:

Really Simple SSL

Te dejo el enlace directo:  https://wordpress.org/plugins/really-simple-ssl/

Esto es recomendable para que funcione correctamente y no se despliegue contenido con protocolo mixto, es decir http y https.

Espero que no te haya quedado alguna duda, en caso contrario puedes escribirme aqui en mi web o enviarme un correo a info@tijuanamovil.com

 

¡Nos vemos!
Oscar Ramirez

Comentarios via Facebook

Call Now Button
Recibe noticias en tu Email
Te enviamos consejos y herramientas para crecer tu negocio.
También odiamos el spam.
Chat con Oscar
¿Necesitas ayuda? 🙄
¡Hola!🖐 Pregúntame aquí sin compromiso
Powered by