erp Centro de Ayuda

- La configuración que se va realizar es para enviar a OBUMA las ventas realizadas en Shopify mediante webhook.

Cambios para el Checkout

Ir a la sección Configuración .

Clic en Pantalla de pago, luego en la sección Información del cliente, en la opción Nombre de la empresa selecciona en obligatorio, esta configuración es para que en la pantalla de pago (Checkout) se muestre el campo Empresa (posteriormente se hará el cambio del nombre de Empresa por RUC), se recomienda marcar la opción obligatorio para que OBUMA pueda registrar el RUC de la empresa.

Ir a la sección Tienda online, en el lado superior aparece Tema activo (Tema actual). Dentro de este apartado hacer clic en los Tres puntos, luego hacer clic en Editar el contenido del tema predeterminado.

Filtrar por la palabra empresa. En la parte de Checkout contact, digitar dentro del campo Company label la sigla RUC, luego clic en Guardar.

Esta configuración va permitir que en el Checkout el cliente registre su RUC, una vez la venta sea pagada esta información es enviada OBUMA vía webhook.

Cambios para el Carrito de compras

Este cambio es para las tiendas que tienen los siguientes temas: Dawn, Spotlight, Craft, Crave, Taste, Sense, Studio, Ride, Colorblock, Refresh, Origin, Publisher, Trade. En el carrito de compras se incluirá las opciones para Boleta, Factura (Razón social, Giro). Si no tienes estos temas puedes saltarte al punto de Obtener key de Tipo de documento.

Ir a Tienda Online y seleccionar Editar Código.

En la carpeta sections en el archivo main-cart-items.liquid agregar este código en la parte final de la etiqueta , luego Guardar.

Código para el archivo sections/main-cart-items.liquid:

<div>
<b><h2>Tipo de documento</h2></b>
<span>
<label for="Quantity-btn-boleta">
<input id="Quantity-btn-boleta" class="document-type-selector"
type="radio" name="attributes[shoppingcart-tags]" value="boleta" checked="checked" data-index="btn-boleta">
<span style="font-size: 24px; color: #F30727; font-weight: bold;">Boleta</span>
</label>
<label for="Quantity-btn-factura">
<input id="Quantity-btn-factura" class="document-type-selector"
type="radio" name="attributes[shoppingcart-tags]" value="factura" data-index="btn-factura">
<span style="font-size: 24px; color: #F30727; font-weight: bold;">Factura</span>
</label>
</span>
</div>
<div class="factura">
<div id="cn-billing-menu" class="billing-menu" style="display: none; height: 0px;">
<p>
<label for="Quantity-razon"><small>Razon social</small></label>
<input id="Quantity-razon" style="width: 100%; padding: 5px; border: #ccc solid 1px; border-radius: 0px;" required="required"
type="text" name="attributes[razon]" placeholder="Ingresa tu Razón social" data-index="razon">
</p>
<p>
<label for="Quantity-giro"> <small>Giro</small></label>
<input id="Quantity-giro" style="width: 100%; padding: 5px; border: #ccc solid 1px; border-radius: 0px;" required="required"
type="text" name="attributes[giro]" placeholder="Ingresa tu giro" data-index="giro">
</p>
</div>
</div>

En la carpeta layout en el archivo theme.liquid agregar este código en la parte final de la etiqueta, luego clic en Guardar.

Codigo para el archivo layout/theme.liquid

{% if template != 'cart' %}
<script>
document.addEventListener('DOMContentLoaded', function() {
let checkoutbtninterval = setInterval(function(){
var x=document.querySelectorAll("button[name='checkout'], button.shopify-payment-button__button, button.shopify-payment-button__button--unbranded");
var WPD_RedirectToCart = function(e) {
e.stopPropagation();
e.preventDefault();
window.location = '/cart';
};
for (var i = 0; i < x.length; i++) {
x[i].addEventListener('click', WPD_RedirectToCart, false);
}
},500)
});
</script>
{% endif %}

En la carpeta layout en el archivo theme.liquid agregar este código en la parte final de la etiqueta, luego clic en Guardar.

Codigo para el archivo layout/theme.liquid

<script>
document.addEventListener('DOMContentLoaded', function(){
if( document.querySelector('.document-type-selector') ){
var actions = {
"factura": function () {
document.querySelector(".billing-menu").style.display = "block";
var billingMenu = document.getElementById("cn-billing-menu");
billingMenu.style.height = "170px";
},
"boleta": function () {
var billingMenu = document.getElementById("cn-billing-menu");
billingMenu.style.transition = "height 0.3s";
billingMenu.style.height = "0px";
setTimeout(function() {
document.querySelector(".billing-menu").style.display = "none";
}, 300);
}
};
document.querySelectorAll('.document-type-selector').forEach(e => {
e.addEventListener('change', function(){
actions[this.value]();
})
})
var facturaCheckbox = document.getElementById('Quantity-btn-factura')
var boletaCheckbox = document.getElementById('Quantity-btn-boleta')
facturaCheckbox.addEventListener('change', function(){
if( facturaCheckbox.checked ){
document.getElementById('Quantity-razon').setAttribute('required', 'required')
document.getElementById('Quantity-giro').setAttribute('required', 'required')
}
})
boletaCheckbox.addEventListener('change', function(){
if( boletaCheckbox.checked ){
document.getElementById('Quantity-razon').removeAttribute('required')
document.getElementById('Quantity-giro').removeAttribute('required')
}
})
}
})
</script>

Como resultado en el carrito de compras se mostrará:

Obtener key de Tipo de documento

La KEY-TIPO-DOCUMENTO es para enviar este dato via Webhook, para obtener este dato nos dirigimos en el navegador en lado superior en los 3 puntos, después en Mas Herramientas/Herramientas del desarrollador

Luego dar click en el seleccionador (en la imagen se muestra con el numero 1), para después seleccionar el elemento donde esta la factura o boleta, en este caso seleccionamos factura (en la imagen se muestra con el numero 2). Después de seleccionar se muestra el elemento, en su atributo “name” tiene este valor name=”attributes[shoppingcart-tags]”, la KEY-TIPO-DOCUMENTO es el valor que está dentro de attributes que en este caso es shoppingcart-tags. Entonces KEY-TIPO-DOCUMENTO=shoppingcart-tags

Crear Webhook en Shopify

Ahora se va crear el webhook, para ello ir a Configuración.

Seleccionar Notificaciones, en el lado inferior clic en Crear webhook, esta configuración es la que envía a Obuma los pedidos cada vez que se ejecuta una venta online en Shopify.

Seleccionar Crear webhook 

Ir a Obuma en la configuración de Shopify en la parte inferior encontrará la URL que se utilizará para formar el webhook.

- En el campo Evento seleccionar Creación de pedido.
- En el campo Formato seleccionar Json.
- En el campo URL agregar URL copiado anteriormente + ?id_tipo_documento=KEY-TIPO-DOCUMENTO ; la url seria para este caso https://obuma.cl/obuma2.0/webservices/shopify/get_post.php?id_tipo_documento=shoppingcart-tags ; luego clic en Guardar