Blogger Store: Opción página para comprobación y solicitud de pedido con formulario

A continuación explicaré cómo cambiar el funcionamiento de los botones que aparecen originalmente en el carro y que pasan los datos a PayPal o remiten un pedido por correo electrónico tras indicarnos el comprador su dirección de email. Tras el cambio, esos botones nos llevarán primero a una una página estática intermedia que mostrará un resumen de los artículos seleccionados y desde la que se podrá hacer la petición definitiva.

También modificaremos el script para adicionalmente poder montar en esa página un formulario que pedirá más datos y que así nos llegue todo lo necesario de primeras, evitando tener que volver a contactar de nuevo con el comprador para pedirle dirección, teléfono, etc.

En la demo de la plantilla podéis ver un ejemplo de todo esto.

Aunque didácticamente quizás no sea lo más adecuado, voy a describiros las modificaciones que tenéis que hacer, en un orden que permitirá que vuestra tienda esté fuera de servicio el menor tiempo posible aunque os atranquéis. Apenas un par de minutos que es lo que se tarda en hacer el último y definitivo paso.

Configurar el contenido de la página estática

Lo primero sería crear una página estática con un título adecuado; "Compruebe su pedido", "Realizar pedido", "Enviar carro" o cualquier otro que se os ocurra. Doy por supuesto que todos sabéis acceder al escritorio y crear una, pero por si acaso, aquí una captura autoexplicativa.

Parte HTML

En esta página habrá que incluir varias cosas y como parte de ellas será código HTML, mejor hacerlo todo desde la pestaña HTML del editor.

Por comodidad para futuros mantenimientos, empezamos con la parte dónde se cargarán los artículos que en ese momento figuran en el carro. Es el mismo sistema que usábamos desde plantilla, pero incluyendo estas cajas con esas clases concretas en la página haremos que salgan directamente en su cuerpo y no en la cesta de la parte superior.

En el carro: <span class="simpleCart_quantity"></span> item(s)
<br/>
<br/>
Precio total: <span class="simpleCart_total"></span> + <span class="simpleCart_shippingCost"></span> de gastos de envío
<br />
<div class="simpleCart_items"></div>
<div class="clear"></div>
<div align="center">
(<span style="color: #cc0000;">*</span>) Dato requerido

A continuación iría una tabla con todos los datos que queremos solicitar (formulario) y unos avisos sobre los que serán obligatorios. Importante respetar los nombres e identificadores usados para los input porque luego tendremos que usar exactamente los mismos cuando modifiquemos el JavaScript.

<br />
<br />
<table>
<tbody>
<tr><td>Nombre (<span style="color: #cc0000;">*</span>): </td><td><input id="nombre" name="nombre" style="width: 400px;" type="text" value="" /></td></tr>
<tr><td><br /></td></tr>
<tr><td>Teléfono (<span style="color: #cc0000;">*</span>): </td><td><input id="telefono" name="telefono" style="width: 120px;" type="text" value="" /></td></tr>
<tr><td><br /></td></tr>
<tr><td>e-Mail (<span style="color: #cc0000;">*</span>): </td><td><input id="remite" name="remite" style="width: 400px;" type="text" value="" /></td></tr>
<tr><td><br /></td></tr>
<tr><td>Dirección: </td><td><input id="direccion" name="direccion" style="width: 400px;" type="text" value="" /></td></tr>
<tr><td><br /></td></tr>
<tr><td>Cód.Postal: </td><td><input id="codigo" name="codigo" style="width: 70px;" type="text" value="" /> Ciudad: <input id="ciudad" name="ciudad" style="width: 150px;" type="text" value="" /></td></tr>
<tr><td><br /></td></tr>
<tr><td>Provincia: </td><td><input id="provincia" name="provincia" style="width: 150px;" type="text" value="" /> País: <input id="pais" name="pais" style="width: 150px;" type="text" value="" /></td></tr>
<tr><td><br /></td></tr>
<tr><td>Observaciones: </td><td><input id="observaciones" name="observaciones" style="width: 400px;" type="text" value="" /></td></tr>
</tbody></table>
<br />
<div id="error" style="color: #cc0000;"></div>
<span style="font-size: x-small;"><b><span style="color: red;">* Los datos requeridos son necesarios para que la empresa de reparto pueda contactar con usted </span></b></span>

Terminando ya con la parte HTML, añadimos los botones que permitirán el envío definitivo del pedido indicando adicionalmente la forma de pago, así como otro que irá directamente a PayPal. No guardamos todavía porque aún hay más cosas que añadir.

<hr />
<h4>
Confirme el pedido eligiendo la forma de pago</h4>
<br />
<br />
<a class="simpleCart_email" href="javascript:void();" onclick="formapago = 'Transferencia'; simpleCart.emailCheckout();">Transferencia</a>
<br />
<br />
<a class="simpleCart_email" href="javascript:void();" onclick="formapago = 'Contra-reembolso'; simpleCart.emailCheckout();">Contra-reembolso<span style="color: red;">*</span></a>
<br />
<br />
<a class="simpleCart_checkout" href="javascript:void();">Paypal</a><br />
<br />
</div>

Llamadas al script

Como dije, seguimos en la edición de la página. Ahora llega el turno de la utilidad de SimpleCart que hace que se muestren los datos referentes a todos y cada uno de los artículos escogidos por el cliente y añadidos al carro. Es esta que veis a continuación y que llama a la función cartHeaders.

<script type="text/javascript">simpleCart.cartHeaders = ['thumb_image','Quantity_input','increment','decrement','name','size','Total'];</script>

Las palabras clave que hay entre los corchetes hacen que se muestre para cada artículo -respectivamente en este mismo orden- la miniatura, la cantidad solicitada, los botones de incremento/decremento de cantidad, el nombre del artículo, la talla (para el caso de que la hubiéramos usado) y el precio parcial que corresponde al montante de cada artículo.

Evidentemente en esta parte si podéis modificar, añadir o eliminar los datos que creáis necesarios de entre los que estéis usando en vuestra tienda.

CSS especial para la página

Esto lo podríamos poner en la plantilla pero como sólo sirve para esta página, lo haremos sobre ella y así nos ahorramos tener que usar condiciones. También nos permitirá desmontar todo fácilmente si alguna vez queremos volver a lo original.

Lo que principalmente hace es ocultar el carro original para evitar problemas, tabular un poco los datos de los artículos y dar estilo a los botones, entre otras cosas menores.

<style>.cartHeaders, .add a {display:none;}
#menu-wrapper .menu-cart {font-size:12px;}
.menu-cart {position: relative;font-size:16px;}
.menu-cart .bag {height:0; width:0; padding:0; overflow:hidden;}
.itemContainer {display: block;height: 105px;}
.itemQuantity, .itemname, .itemTotal, .itemsize, .itemthumb, .itemincrement, .itemdecrement {display:inline-block; *display:inline;zoom:1; padding:5px;line-height: 70px;vertical-align: middle;}
div.itemname {width: 260px;overflow: hidden;}
.itemsize { padding:0;}
.itemthumb img {width: 70px;height: 70px;float: left;padding: 5px;}
.itemTotal {width:70px; display:inline-block; text-align:right; }
.itemincrement, .itemdecrement {display: inline-block;*display:inline;zoom:1;padding: 0;height: 22px;}
div.simpleCart_items {background: #fefefe;padding: 5px 5px 0;}
.simpleCart_items .itemincrement a, .simpleCart_items .itemdecrement a {display: block;width: 20px;height: 20px;font-size: 20px;line-height: 20px;font-weight:bold;overflow: hidden;margin-bottom: -6px;border: 1px solid #ccc;background: white;text-align: center;}
.itemQuantity input[type="text"] {width: 20px;}
a.botonnar {font-size: 14px;}
a.simpleCart_empty, a.simpleCart_checkout, a.simpleCart_email {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYiPmM6N9I-UVGTTiB4U-Pb7kSRjDITa6UtN-8m9c5nFAACIOJWQb13MUy-ixRg-hSKQLtLWSkZ5JTefFLrn9aRzey29yz0CQuslQry-1rcW39mBE7N3_BfbQnjSMIkoK0aC11sQCkxlA/s1600/fade.png) repeat-x top left;color:#fff;font-size:14px;text-transform:uppercase;font-weight:700;border-radius:3px;margin-right:10px;padding:3px 8px;-moz-text-shadow:none;-webkit-text-shadow:none;-ms-text-shadow:none;text-shadow:none;}
a.simpleCart_empty:hover, a.simpleCart_checkout:hover, a.simpleCart_email:hover {background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgq2qx5ETlCYF-NIWiI03ttv-6Y8-bV6hj5R-2DMnquRgndjs_4c23czjxZqTXazXsG_0GI0qwunsB6_UNs5mwGw2FGAI9hWmrXjKRUhE9bC-MddskalwSutmoCNr6pgTnrAmPIxHgXrDU/h1600/fade-hover.png);}
a.simpleCart_empty {background-color:#ef9007;border:1px solid #c77f18;}
a.simpleCart_checkout, a.simpleCart_email {background-color:#8bbd13;border:1px solid #7aa514;}</style>

Ahora sí que podemos guardar la página. Si antes de seguir queremos comprobar que funciona bien y que todo se ve como queremos, sólo hay que simular una compra añadiendo unos cuantos productos al carro y luego visitar la página recién creada.

Como de momento no disponemos de ningún enlace o botón para acceder a ella, lo más rápido será que después de añadir esos artículos de prueba, desde ese mismo apartado Páginas del Escritorio, pasemos el puntero por encima del título de la página y pinchemos en el enlace que saldrá.

Modificar SimpleCart.js

Ahora toca acceder a nuestro fichero simplecart.js y modificarlo. En primer lugar necesitamos la dirección de nuestro fichero .php, aquel que en su momento creamos para añadir la funcionalidad de pedidos por email con SimpleCart. La anotamos y reservamos, como en las recetas de cocina.

Da igual que SimpleCart.js lo hubiéramos modificado previamente o no, porque lo vamos a reconstruir casi por completo. Lo que hay que borrar es todo lo que está entre las líneas que he marcado en color gris:

...
document.body.removeChild( form );
};
me.emailCheckout = function() {
...
me.customCheckout = function() {
return;
};
/******************************************************
data storage and retrival
******************************************************/
...

De esta manera habremos borrado todas las líneas de la función emailCheckout. Ahora las sustituimos por estas que pongo a continuación.

me.emailCheckout = function() {
var remite = document.getElementById("remite").value;
var nombre = document.getElementById("nombre").value;
var telefono = document.getElementById("telefono").value;
var direccion = document.getElementById("direccion").value;
var direccion = document.getElementById("direccion").value;
var codigo = document.getElementById("codigo").value;
var ciudad = document.getElementById("ciudad").value;
var provincia = document.getElementById("provincia").value;
var pais = document.getElementById("pais").value;
var observaciones = document.getElementById("observaciones").value;

if (remite != '' && remite != null && nombre != '' && nombre != null && telefono != '' && telefono != null) {
itemsString = "";
esubtotal = 0;
egastos = 0;
etotal = 0;
for( var current in this.items ){
var item = this.items[current];
esubtotal = item.quantity * item.price;
itemsString += item.name;
if (item.size) itemsString += " " + item.size + "\n";
itemsString += item.quantity + " x " + item.price + " = " + String(esubtotal) + " " + me.currency + "\n";
etotal += esubtotal;
};
itemsString += "\nSubtotal = " + etotal + " " + me.currency +"\n";
var gastos = me.shippingCost;
if (formapago == "Contra-reembolso") {
gastos += 8;
etotal += 8;
}
if (gastos){
itemsString += "Gastos de envio = " + gastos + " " + me.currency +"\n";
etotal += me.shippingCost;
} else {itemsString += "Gastos de envio = GRATIS\n";}
itemsString +="\nTOTAL: " + String(etotal) + me.currency + "\n\n" + "Remitente: " + remite;
itemsString +="\n\nNOMBRE: " + nombre + "\nTelefono: " + telefono;
itemsString +="\nDIRECCION: " + direccion;
itemsString +="\nCIUDAD/PAIS: " + codigo + " " + ciudad + " - " + provincia + " (" + pais + ")";
itemsString +="\n\nOBSERVACIONES: " + observaciones;
itemsString +="\n\nFORMA DE PAGO: " + formapago;


var form = document.createElement("form");
form.style.display = "none";
form.method = "POST";
form.action = "http://loquesea.com/email.php";
form.acceptCharset = "utf-8";
form.appendChild(this.createHiddenElement("jcitems", itemsString));
form.appendChild(this.createHiddenElement("jcremite", remite));

document.body.appendChild(form);
me.empty();
form.submit();
document.body.removeChild(form);
if (p == null || p=='');

}
else {
var error = document.getElementById("error");
var mensaje = "<b>Nombre, teléfono y email son imprescindibles para poder contactar con Vd.</b>";
error.innerHTML = mensaje;
}

return;
};
me.customCheckout = function() {
return;
};

Antes de guardar los cambios tendremos que sustituir la dirección que marqué en verde tras form.action (http://loquesea.com/email.php) por vuestra propia dirección, esa que os dije que reservaráis al principio de este apartado.


Una vez hecho ahora sí guardamos los cambios. Si vuestro hosting os cambia la dirección de alojamiento (por ejemplo http://yourjavascript.com lo hace) tendréis que tomar nota de esa nueva dirección de SimpleCart y nada más empezar el siguiente paso, cambiar la actual por la nueva en la plantilla.

Modificaciones en la plantilla

Aparte del posible cambio anterior referente a la dirección de simplecart.js, aquí ya no tendremos que hacer casi nada más, apenas cambiar los destinos de los botones que siguen apareciendo en el carro para que en lugar de ir a PayPal o directamente hacer el pedido por email, apunten a la página que hemos creado para todo esto.

El HTML que tenemos que modificar es fácil de localizar porque tiene un comentario que reza <!--//end of .menu-cart-->. Justo antes de él está lo necesario para construir el carro desplegable y los botones antes citados. Ahora tendrá que quedar justo así:

<div class='menu-cart'>
<a class='mycart' href='#'>En el carro : <span class='simpleCart_quantity'></span> Articulo(s)</a>
Precio total : <span class='simpleCart_total'></span>
+ Gastos: <span class='simpleCart_shippingCost'></span>
<div class='bag'>
<div class='simpleCart_items'></div>
<div class='clear'></div>
<a class='simpleCart_empty' href='javascript:;'>Vaciar carro</a>
<!-- ANULAMOS BOTON PAYPAL <a class='simpleCart_checkout' href='javascript:;'>Pedido prepago</a> -->
<a class='simpleCart_email' href='http://midominio.com/p/enviar-tu-pedido.html'>Pedido</a>
</div>
</div>
<!--//end of .menu-cart-->

Una vez sustituido el anterior código por este ya sólo restará cambiar la dirección que marqué de color por la de la página que construisteis en el primer paso. Una vez hecho ya podéis guardar los cambios.


Espero que todo os funcione bien a la primera pero si no os habéis saltado nada, estoy casi seguro de que será así.

Nos hemos puesto a fondo con esta plantilla y hemos publicado también los siguientes artículos:

• Plantilla para tienda online: Blogger Store
• Blogger Store: Instalación, ajustes y crear productos
• Blogger Store: Personalización y solución de problemas
• Blogger Store: Buscador, paginación, opción email y otros
• Blogger Store: Configurar gastos de envío e inclusión en pedidos email
• Blogger Store: Slider en IE, gastos en carro, productos desaparecidos y otros flecos
• Blogger Store: Opción página para comprobación y solicitud de pedido con formulario
• Blogger Store: Demo incorporando todas las modificaciones propuestas

Noviembre 2015
Los comentarios de todas estas entradas han sido cerrados por su excesiva extensión y porque en los existentes se ha contestado ya a las dudas más comunes que han ido surgiendo durante más de tres años.

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir

Twitter

Pinterest

Facebook

Linkedin

Copy URL

Compartir

Twitter

Pinterest

Facebook

Linkedin

Y muchos más artículos interesantes si nos sigues en...

• Google
• Facebook
• Twitter