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

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:

Localizar /* Search */
Las cuatro definiciones de #topsearch se borran o se anulan con símbolos de comentarios.
Se añaden las siguientes clases y propiedades
#CustomSearch1 {width:160px; float:right;}
#uds-searchResults {margin-top: 20px;}
.gsc-branding {display:none;}

Dos líneas más abajo, el margen negativo de #top_social{float:right;margin-right:-10px;} se deja en positivo: margin-right:10px;
Bajamos hasta id='top-bar-right' y allí anulamos o borramos todo el contenido de las etiquetas form, etiquetas incluidas.
En su lugar se inserta este código:
b:section class='topsearch' id='topsearch'/
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ípicasEntradas 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;}/stylescript style='text/javascript'var pageCount=5;var displayPageNum=5;var upPageWord="Anterior";var downPageWord="Siguiente";/scriptscript 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 variablevar pageCount debe tener asignado el mismo número que entradas por página tenemos programadas. Eso lo encontramos en elEscritorio 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/aa class='simpleCart_checkout' href='javascript:;'Hacer pedido/aa 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 comoByethost,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 enform.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.

Lademo 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 deEntradas relacionadas con miniaturas. Son dos trozos.

La primera parte la tenéis que insertar antes dehead 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 elpost-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, elblogger-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:

Referencias: Java Templates | SimpleCart

CosasParaMiBlogs

lunes, 19 de marzo de 2012

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

Sustituir buscador

Paginación

Añadir opción pedido por e-mail

Productos relacionados

Almacenamiento de ficheros

Popular Posts

Blogger news

Labels

Blog Archive

CosasParaMiBlogs

lunes, 19 de marzo de 2012

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

Sustituir buscador

Paginación

Añadir opción pedido por e-mail

Productos relacionados

Almacenamiento de ficheros

What's Related?

Popular Posts

Blogger news

Labels

Blog Archive