Configurar Oct8ne en entornos ‘desacoplados’ o ‘headless’

Configurar Oct8ne en entornos headless


Como configurar Oct8ne en entornos ‘desacoplados’ o ‘headless’


La arquitectura del comercio headless (o desacoplado) es la desvinculación de la capa de presentación del front-end de un sitio web (que incluye elementos como colores y estilos de texto, imágenes, gráficos y tablas, botones, etc.) de la funcionalidad de comercio electrónico del back-end (precios, infraestructura, seguridad, pago, etc.).

Los desarrolladores pueden utilizar la tecnología de front-end que elijan para ofrecer experiencias de contenido de alta calidad y conectar una solución de comercio electrónico en el back-end que gestione todas las funciones comerciales.

Si este es tu caso,la instalación de Oct8ne es diferente.

No solo consiste en instalar el plugin Oct8ne en las platafromas que damos soporte sino que además serán necesarias configuraciones addicionales.

Veamos los pasos a seguir!


Paso 1  - Instalar plugin que corresponda

Se debe instalar el plugin que corresponda, siempre y cuando la parte BACK de la tienda esté construída con alguna de las siguientes plataformas: Enlaces de descarga aquí.

-Woocommerce (WP)

https://oct8ne.com/es/marketplace-wordpress


-Prestashop

https://oct8ne.com/es/marketplace-prestashop


-Magento 1

https://oct8ne.com/es/marketplace-magento


-Magento 2

https://oct8ne.com/es/marketplace-magento-2


-Shopify

https://oct8ne.com/es/marketplace-shopify





Paso 2 – Instalar el codigo script en la pagina FRONT

En condiciones normales, el plugin de Oct8ne ya realizaría este proceso, pero al tratarse de un entonro de naturaleza ‘headless’, este proceso se  tiene que programar en la parte FRONT.

En este mismo documento encontrará, mas abajo, el ANEXO A , donde se explica detalladamente como introducir dicho código.


Paso 3 – Notificar a Oct8ne.

Una vez realizado los 2  pasos anteriores, será necesaria una configuración addicional por parte de Oct8ne. Se deberá enviar un email a Oct8ne, especificando las urls tanto del BACK como del FRONT.

EL mail se debe enviar a support@oct8ne.com o al comercial que gestiona tu cuenta.


Como norma general, no tardamos más de 24H / 48H aproximadamente para aplicary desplegar  dicha correccion a nuestros servidores. Ten paciencia. ¡Gracias! 😉




ANEXO A

Se debe introducir el siguiente código de script de forma que esté presente en todas las páginas en las que desee que el chat esté disponibles. Normalmente esto se puede conseguir introduciendo el script en la página maestra o layout de su sitio web, aunque dependiendo de la plataforma podrían existir otras formas de hacerlo.

<script  type="text/javascript">

  var oct8ne = document.createElement("script");

  oct8ne.type = "text/javascript";

  oct8ne.server = "OCT8NE-SERVER-HERE";

  oct8ne.src = 
     (document.location.protocol=="https:"?"https://":"http://")
     + [OCT8NE-STATIC-SERVER-HERE]api/v2/oct8ne.js'
     + '?' + (Math.round(new Date().getTime() / 86400000));


  oct8ne.async = true;

  oct8ne.license = "YOUR-LICENSE-HERE";

  oct8ne.baseUrl = "//yourdomain.com";
  oct8ne.checkoutUrl = oct8ne.baseUrl + "/checkout";

  oct8ne.loginUrl = oct8ne.baseUrl + "/login";

  oct8ne.checkoutSuccessUrl = oct8ne.baseUrl + "/checkout/success";
  oct8ne.locale = "en-US";

  oct8ne.currencyCode = "USD";

  oct8ne.apiVersion = "2.4";

  oct8ne.platform = "shopify";


  oct8ne.currentProduct = { 
      id: "84", 
      thumbnail: "http://myserver.com/img/thumbs/84.jpg" 
   };


  var s = document.getElementsByTagName(“script”)[0];

  s.parentNode.insertBefore(oct8ne, s);

</script>



Nota:  El valor de [OCT8NE-STATIC-SERVER-HERE]es suministrado en el momento de registrarse como desarrollador.


Una buena ubicación para esta porción de script podría ser justo antes de finalizar la etiqueta <BODY> de la página web, aunque en cualquier caso depende de la maquetación de su sitio web.

En este código script es obligatorio establecer el valor de las siguientes propiedades con el valor correcto:

Required properties

server

string

Dirección del servidor que se le suministró en el momento de registrarse como desarrollador

src

String

URL absoluta hacia el archivo de scripts del API oct8ne que le será facilitada en el momento de registrarse como desarrollador. Puede diferir de la que se suministrará en entornos de producción. 


En el ejemplo de código anterior se añade un parámetro adicional a la URL para forzar la carga de la última versión del script al menos una vez al día.

license

String

Código de licencia que se le suministró en el momento de registrarse como desarrollador. 

baseUrl

String

URL absoluta de la raíz de su sitio web.

checkoutUrl

String

URL absoluta de la página de la plataforma de comercio electrónico a la que hay que redirigir al visitante para finalizar la compra.

loginUrl

String

URL absoluta de la página de login de usuario en la plataforma de comercio electrónico.

checkoutSuccessUrl

String

URL de la página mostrada al usuario justo después de finalizar su compra, habitualmente utilizada para agradecer al usuario su confianza y mostrarle información útil para el posterior seguimiento de su compra.

locale

String

Código estándar del idioma/región seleccionado por el cliente del comercio electrónico, por ejemplo “en-US” o “es-ES”.

currencyCode

String

Código estándar de la moneda seleccionada actualmente por el cliente del comercio electrónico, por ejemplo “USD” o “EUR”.

apiVersion

String

Versión de la API implementada por el adaptador. En este documento, se corresponde con la versión: “2.4”

platform

String

Dependiendo de la plataforma BACK que se use, esta variable será el nombre de la misma: “shopify” , “wordpress” , “magento2”, o “prestashop”

currentProduct

object

Objeto que describe el producto que está siendo visualizado, mediante  las propiedades: 

    id (identificador del producto) 

    thumbnail (URL de la miniatura del producto).



Nota: Debe establecer la propiedad currentProduct siempre que la página actual se corresponda a un producto, de forma que oct8ne pueda registrar la información del producto. En caso contrario no es necesario definirla.



    • Related Articles

    • Como configurar el buscador ‘EMPATHY’ en Prestashop.

      Oct8ne permite la integración del motor de búsqueda con Empathy, dentro del panel de Prestashop. Para que quede configurado correctamente se deben realizar estos 2 pasos: A.- Comprobar la url de Empathy. B.- Configurar el motor de búsqueda en el ...
    • Métodos públicos en Javascript

      Métodos públicos en Javascript – Oct8ne Oct8ne pone a disposicion de los clientes una serie de funciones javascript, ya establecidas, para poder realizar ciertos comportameintos. De esta forma, el cliente final, podrá inovocar aquellas funciones que ...
    • Como configurar la URL del tracking de pedidos en Prestashop

      El plugin de Oct8ne para Prestashop (desde la version 1.0.28) tiene la capacidad de acceder a los datos de pedidos de los clientes. La integración de Oct8ne con los pedidos de prestashop permite saber el numero o id de pedido, los productos que se ...
    • Como configurarOct8ne con Doofinder en Prestashop

      Oct8ne permite la integración del motor de búsqueda con Doofinder, dentro del panel de Prestashop. Para que quede configurado correctamente se deben realizar estos sencillos pasos. Antes de todo, como REQUISITO, es indispensable que Doofinder esté ...
    • Añadir en mi página de Facebook el botón de WhatsApp

      Una vez integrado un numero de WhatsApp en Oct8ne es posible que al intentar vincular un numero de WhatsApp con una página de Facebook no recibamos un código de verificación por parte de Facebook necesario para este proceso, a continuación, vamos a ...