Checkout
VTEX
Order Placed - Facturación
Botón para abrir modal window con formulario
<![CDATA[
<div class="check_facturacion">
<a href="#facturacion_wrapper" class="btn btn-primary" data-toggle="modal">
<div>¿Deseas Facturar?</div>
</a>
</div>
]]>
Formulario Footer
<![CDATA[
<div id="facturacion_wrapper" class="modal fade hide" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<section style="padding:20px;">
<div id="modal-wrapper">
<div class="modal-header"><h3>Datos de Facturación</h3></div>
<form action="" class="form" method="post" name="" id="" style="margin-bottom:0;">
<div class="modal-body">
<div class="form-group">
<label>No. de Pedido</label>
<input name="id" value="" class="form-control" type="text" placeholder="No. de Pedido" id="id" required="required"/>
</div>
<div class="form-group">
<label>Razon Social</label>
<input name="razonSocial" value="" class="form-control" type="text" placeholder="Razón Social" id="razonSocial" required="required"/>
</div>
<div class="row">
<div class="col-xs-6">
<div class="form-group">
<label>RFC</label>
<input name="documentRfc" id="documentRfc" value="" class="form-control" type="text" placeholder="RFC" required="required"/>
</div>
</div>
<div class="col-xs-6">
<div class="form-group">
<label>Código Postal</label>
<input name="codigoPostal" id="codigoPostal" value="" class="form-control" type="text" placeholder="Código Postal" required="required"/>
</div>
</div>
</div>
<div class="form-group">
<label>Dirección</label>
<input name="direccionFactura" id="direccionFactura" value="" class="form-control" type="text" placeholder="Dirección de Facturación" required="required"/>
</div>
<div class="row">
<div class="col-xs-6">
<div class="form-group">
<label>Ciudad</label>
<input name="ciudad" id="ciudad" value="" class="form-control" type="text" placeholder="Ciudad" required="required"/>
</div>
</div>
<div class="col-xs-6">
<div class="form-group">
<label>Estado</label>
<input name="estado" id="estado" value="" class="form-control" type="text" placeholder="Estado" required="required"/>
</div>
</div>
</div>
<div class="form-group">
<label>Email</label>
<input name="email" id="email" value="" class="form-control" type="text" placeholder="Email" required="required"/>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal" style="color:#333;">Cancelar</button>
<input type="submit" value="enviar" name="enviar" id="send_facturacion" class="btn btn-primary"/>
</div>
</form>
</div>
</section>
</div>
]]>
Scripts Google Tag Manager
Nota: Es necesario cargar la librería jquery.validity.min.js
Importante: Es necesario cambiar "nombretienda" por el nombre de la tienda VTEX en la URL de la llamada Ajax ej. "masluz" o "tottomexico"
<![CDATA[
<script type="text/javascript" src="/arquivos/jquery.validity.min.js"></script>
<script type="text/javascript">
$(function(){
console.log('OrderPlaced from Google Tag Manager');
$('#id').val(getParameterByName('og'));
$.validity.setup({ outputMode:"label" });
$('#send_facturacion').click(function(e){
e.preventDefault();
datosFacturar();
});
});
function datosFacturar(){
if(validate_ajax()){
var datos = {};
datos.id = $('#id').val();
datos.razonSocial = $('#razonSocial').val();
datos.documentRfc = $('#documentRfc').val();
datos.direccionFactura = $('#direccionFactura').val();
datos.codigoPostal = $('#codigoPostal').val();
datos.ciudad = $('#ciudad').val();
datos.estado = $('#estado').val();
datos.email = $('#email').val();
$.ajax({
accept: 'application/vnd.vtex.ds.v10+json',
contentType: 'application/json; charset=utf-8',
crossDomain: true,
data: JSON.stringify(datos),
type: 'POST',
url: '//api.vtexcrm.com.br/nombretienda/dataentities/FE/documents',
beforeSend: function(){
$('#modal-wrapper').html('<img src="/arquivos/ajax-loader.gif" />');
},
success: function(data){
$('#modal-wrapper').html('<h2>Información enviada</h2><p>Su información ha sido enviada con exito</p>');
setTimeout(function(){ $('#facturacion_wrapper').modal('hide'); }, 5000);
}
});
}
}
function getParameterByName(name) {
name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
results = regex.exec(location.search);
return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}
function validate_ajax() {
$.validity.start();
$("#id").require('El número de pedido es requerido');
$("#razonSocial").require('Razón social es requerida');
$("#documentRfc").require('El RFC es requerido');
$("#direccionFactura").require('Dirección de facturación es requerida');
$("#codigoPostal").require('Código Postal es requerido');
$("#ciudad").require('Ciudad es requerida');
$("#estado").require('Estado es requerido');
$("#email").require('El Email es requerido').match('email','Debe tener formato de email');
var result = $.validity.end();
return result.valid;
}
</script>
]]>
CSS
<![CDATA[
.check_facturacion{ display:none; }
.body-order-placed .check_facturacion{ display:block; position: absolute; top: -250px; right: 150px; }
.body-order-placed .modal-backdrop{ background:#000; }
.body-order-placed .form-group{ margin-bottom:10px; font-size:14px; }
.body-order-placed #facturacion_wrapper .form-control{ margin-bottom:0px; display:block; width:100%; }
.body-order-placed .container{ max-width:100%; }
.body-order-placed .row{ margin-right:-15px; margin-left:-15px; }
.body-order-placed .row:after{ display:block; clear:both; }
.body-order-placed .col-xs-6{ width:50%; float:left; padding:0px 15px; box-sizing:border-box; }
]]>