Blogger Store: Buscador, paginación, opción email y otros

Sustituir buscador

El buscador es bastante deficiente, así que como propuesta, se puede incorporar el gadget buscador de Blogger que, frente a otros buscadores personalizados que también podríamos utilizar, tiene como ventaja adicional mostrar los resultados dentro del cuerpo del blog. Para ello hay que seguir los siguientes pasos:

1. Localizar /* Search */
2. Las cuatro definiciones de #topsearch se borran o se anulan con símbolos de comentarios.
3. Se añaden las siguientes clases y propiedades
   #CustomSearch1 {width:160px; float:right;}
   #uds-searchResults {margin-top: 20px;}
   .gsc-branding {display:none;}
   
4. Dos líneas más abajo, el margen negativo de #top_social{float:right;margin-right:-10px;} se deja en positivo: margin-right:10px;
5. Bajamos hasta id='top-bar-right' y allí anulamos o borramos todo el contenido de las etiquetas form, etiquetas incluidas.
6. En su lugar se inserta este código:
   
   <b:section class='topsearch' id='topsearch'/>
7. Accedemos a Diseño y en el nuevo bloque que aparecerá arriba a la derecha, se añade un gadget buscador, borrando previamente el título "Buscar este blog".

Paginación

Si deseas incluir un sistema de páginas a pie de idem que sustituya a las típicas Entradas más recientes/Entradas más antiguas, sólo tienes que copiar este código justo antes de </body>.

<style type='text/css'>.showpageArea a {text-decoration:underline;}.showpageNum a {text-decoration:none;border: 1px solid #cccccc;margin:0 3px;padding:3px;}.showpageNum a:hover {border: 1px solid #cccccc;background-color:#cccccc;}.showpagePoint {color:#333;text-decoration:none;border: 1px solid #cccccc;background: #cccccc;margin:0 3px;padding:3px;}.showpageOf {text-decoration:none;padding:3px;margin: 0 3px 0 0;}.showpage a {text-decoration:none;border: 1px solid #cccccc;padding:3px;}.showpage a:hover {text-decoration:none;}.showpageNum a:link,.showpage a:link {text-decoration:none;color:#333333;}</style><script style='text/javascript'>var pageCount=5;var displayPageNum=5;var upPageWord="Anterior";var downPageWord="Siguiente";</script><script style='text/javascript' src='http://dl.dropbox.com/u/57549161/scripts/blogger-page-nav-v2.js'></script>

Actualización: Nos recuerda Josiño que para que la paginación llegue a mostrar todos los artículos sin saltos, la variable var pageCount debe tener asignado el mismo número que entradas por página tenemos programadas. Eso lo encontramos en el Escritorio como "Mostrar un máximo de ....en la pagina principal". Asi todo cuadrará perfectamente.

Añadir opción pedido por e-mail

Esta es quizás la opción que requiere más modificaciones, ya que ni la primera versión de SimpleCart ni la segunda la incluyen. Pero parece que a mucha gente le viene bien, así que allá vamos.


En primer lugar añadimos el estilo del botón en la plantilla. Buscamos este trozo y dónde veamos .bag a.simpleCart_checkout, añadimos con una coma la clase .bag a.simpleCart_email. Será en tres sitios que están casi seguidos. A continuación indico dónde:

.bag a.simpleCart_empty,.bag a.simpleCart_checkout, .bag a.simpleCart_email {
...
}
.bag a.simpleCart_empty:hover,.bag a.simpleCart_checkout:hover, .bag a.simpleCart_email:hover {
...
}
.bag a.simpleCart_empty {
...
}
.bag a.simpleCart_checkout, .bag a.simpleCart_email {
...
}

Sin abandonar la plantilla, ahora insertamos el HTML que generará el botón, con una llamada a la función que luego crearemos. Una vez actualizada la plantilla tendremos el botón, aunque este no funcionará todavía.

<div class='clear'/>
<a class='simpleCart_empty' href='javascript:;'>Vaciar carro</a><a class='simpleCart_checkout' href='javascript:;'>Hacer pedido</a><a class='simpleCart_email' href='javascript:void();' onclick='simpleCart.emailCheckout();'>Pedido por Email</a>
</div>
</div>
<!--//end of .menu-cart-->

La parte que peor tenemos los de Blogger viene ahora y es que necesitamos un alojamiento para un fichero PHP, lenguaje que no soporta nuestra plataforma. Sin embargo hay sitios gratuitos que sí proporcionan ese alojamiento como Byethost, 000Webhost, AwardSpace, Zymic, entre otros.


El fichero que hay que alojar es este. Es un modelo básico, pero hace lo que tiene que hacer. En la variable $to es dónde tendréis que poner vuestra dirección de correo para que os lleguen los pedidos. El código también genera una copia para el remitente.

<?php
$to = 'correo-vendedor@dominio.com';
$remite = $_POST['jcremite'];
$subject = 'Aviso de pedido';
$jcitems = $_POST['jcitems'];
$headers = 'X-Mailer: PHP/' . phpversion();
mail($to, $subject, $jcitems, $headers);
mail($remite, $subject, $jcitems, $headers);
echo 'Su pedido ha sido enviado.<br/> Nos pondremos en contacto con Vd. mediante el correo facilitado: ';
echo $remite;
echo '<br/><br/><a href="javascript:history.go(-1)">Volver a la tienda</a>';
?>

Ahora hay que editar el fichero JS de SimpleCart para incorporarle la función correspondiente a los pedidos por correo electrónico. Buscamos esta parte:

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

Y en su lugar pegamos esto otro sin olvidar luego cambiar la dirección que figura en form.action:, por la de vuestro fichero PHP que apunta a vuestro correo:

me.emailCheckout = function() {
var remite = prompt("Introduzca correo de contacto: ");
if (remite != '' && remite != null) {
itemsString = "";
esubtotal = 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 += "Talla " + item.size + "
";
if (item.color) itemsString += "Color " + item.color + "
";
itemsString += item.quantity + " x " + item.price + " = " + String(esubtotal) + me.currency + "
";
etotal+=esubtotal;
};
itemsString +="
Total: " + String(etotal) + me.currency + "
" + "Remitente: " + remite;
var form = document.createElement("form");
form.style.display = "none";
form.method = "POST";
form.action = "http://direccion_php/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=='');
}
return;
};

Las dos líneas en cursiva sólo son necesarias si estáis utilizando la opción de tallas y/o colores. En este enlace tenéis el fichero SimpleCart2 con esta modificación incorporada: Descargar.

La demo está funcionando actualmente con un PHP modificado de manera que cuando hagáis un pedido no lo recibiré yo, sino la dirección que tecleéis como remite. De esa manera podréis comprobar cómo llega un pedido.

Hay otras formas de hacer todo esto que incluso pueden incluir un sistema de gestión de pedidos, pero eso es algo en lo que no me voy a meter. Sin embargo, quizás una persona a la que ya se lo he pedido, quizás tenga a bien hacernos partícipes de ello ;)

Productos relacionados

De la misma manera que en un blog convencional podemos incluir en una entrada, otros posts relacionados en función de la etiqueta, en esta tienda también podemos poner tras cada producto, una relación de artículos que tengan que ver con él.

El código es un poco largo, así que para no extenderme más, lo podéis copiar de Entradas relacionadas con miniaturas. Son dos trozos.

La primera parte la tenéis que insertar antes de <head> y yo sólo modificaría allí la id #related-posts, incorporándole tres propiedades para centrar el artilugio y su contenido. 410px es para mostrar 5 posts, a razón de 82px por cada uno.

#related-posts {
margin:0 auto;
text-align:center;
width:410px;
...etc.
}

La segunda parte de código normalmente habría que meterla en el post-footer, pero como esta plantilla carece de ese elemento (más bien, permanece invisible), entonces lo añadimos justo después. Esta es la parte a partir de la cual habría que insertarlo:

<div class='post-footer-line post-footer-line-3'>
<span class='post-location'>
<b:if cond='data:top.showLocation'>
<b:if cond='data:post.location'>
<data:postLocationLabel/>
<a expr:href='data:post.location.mapsUrl' target='_blank'><data:post.location.name/></a>
</b:if>
</b:if>
</span>
</div>
</div>
AQUI VA LA SEGUNDA PARTE DE CÓDIGO

Almacenamiento de ficheros

Los scripts están alojados en un almacén particular del creador, por lo que si no queréis tener problemas en el futuro con el borrado intencionado o fortuito de esos archivos, lo mejor es que los alojéis en vuestro propio almacén y sustituyáis las direcciones de las que se usan por las vuestras. Al principio de la plantilla podéis encontrar las direcciones de las seis para descargarlos.

Si has aplicado la paginación que hemos explicado en esta misma entrada, ahí tienes un script más que tendrías que archivar por tí mismo, el blogger-page-nav-v2.js.

Lo mismo sucede con las imágenes. Estas están en el paquete que os descargasteis que incluía la plantilla. Se pueden alojar en una entrada en borrador o en Picasa y luego ir sustituyendo las direcciones nuevas por las que figuran en la plantilla. Esto ya es más laborioso que lo anterior, pero puede que algún día lo agradezcáis.

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

Referencias: Java Templates | SimpleCart

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