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:
|
|
|
|
|
Dirección del servidor que se le suministró en el momento de registrarse como desarrollador
|
|
|
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.
|
|
|
Código de licencia que se le suministró en el momento de registrarse como desarrollador.
|
|
|
URL absoluta de la raíz de su sitio web.
|
|
|
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.
|
|
|
URL absoluta de la página de login de usuario en la plataforma de comercio electrónico.
|
|
|
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.
|
|
|
Código estándar del idioma/región seleccionado por el cliente del comercio electrónico, por ejemplo “en-US” o “es-ES”.
|
|
|
Código estándar de la moneda seleccionada actualmente por el cliente del comercio electrónico, por ejemplo “USD” o “EUR”.
|
|
|
Versión de la API implementada por el adaptador. En este documento, se corresponde con la versión: “2.4”
|
|
|
Dependiendo de la plataforma BACK que se use, esta variable será el nombre de la misma: “shopify” , “wordpress” , “magento2”, o “prestashop”
|
|
|
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.
|