SimpleCart. Una tienda online... también para Blogger.

Hace unos pocos días me tropecé con este script que sirve para generar una especie de tienda online y que permite prescindir del uso de bases de datos. De esta manera se puede utilizar en plataformas que carecen de ellas como ocurre en Blogger. El tema de recordar lo que el usuario ha ido pinchando y que no desaparezca cada vez que se refresca o se cambia de página, lo han solucionado mediante unas cookies. Puede resultar primitivo y no muy seguro, pero el caso es que funciona y puede ser de utilidad en determinados casos, así que si tras ver esta demo os gusta el asunto, a continuación facilitamos los ficheros necesarios y explicamos brevemente cómo instalarlos.

1. En primer lugar, desde Elementos de Página añadimos un gadget tipo HTML/JavaScript (sin título para que este no sea visible). Para que no estorbe mucho lo creamos en la cabecera o en el pie de página. Allí copiamos todo el script adaptado para funcionar desde un gadget. Sin guardar, a continuación del código script, copiamos el estilo y las opciones configurables. Ya podemos guardar, aunque posteriormente tendremos que cambiar unos pocos datos.

Para una mayor facilidad a la hora de buscar algo, podríamos insertar el script en un gadget y el estilo en otro, sin ningún problema.

2. Ahora tenemos un par de opciones.

• A) Tienda visible en una sola página. Creamos una página estática y en ella insertamos la parte HTML (copiar HTML versión post).
• B) Tienda visible en todas las páginas. Añadimos un nuevo gadget HTML/JavaScript y allí insertamos el HTML (fichero HTML). Recomendable crearlo en cabecera o pie.

Desde ya, podemos ver una tienda en funcionamiento. Trastear si quereis con los botones de Añadir, Vaciar Carro y las pequeñas flechas en las miniaturas del carro, que sirven para incrementar/decrementar la cantidad de cada artículo solicitada. Incluso podeis pinchar en el botón PAYPAL para ver que conecta bien con dicho servicio, transfiriendo la lista de artículos seleccionados, su descripción y el importe total.

Ahora sólo resta configurarla con nuestros datos. Lo primero es buscar tras el estilo, la línea que contiene la variable simpleCart.email = "tupaypal@dominio.com"; Lo marcado en verde tiene que ser cambiado por vuestra propia cuenta PayPal.

Además es posible cambiar la moneda en la que se desea cobrar en la siguiente línea: simpleCart.currency = EUR;. Al principio del código del script hay una variable que contiene todo los códigos de las monedas admitidas en PayPal, entre las que se encuentran por ejemplo el peso mejicano (MXN) y el dólar USA (USD).

Una vez ajustadas estas dos cosas, teneis que poner vuestros artículos en lugar de los que se muestran en el ejemplo. Cada trozo de código como este, contiene la información necesaria para cada artículo distinto. Por tanto, será necesario un bloque con la misma estructura por cada artículo.

En verde lo que hay que personalizar. La primera imagen es la que se verá en el escaparate y la última la miniatura que se mostrará en el carro. Las etiquetas title, alt y el contenido del div item_name, deberán contener el nombre del artículo (en el ejemplo, Camiseta AA). El párrafo con clase item_Description, debe contener la descripción del artículo. Por último, el span item_price, es el que recoge el precio. Importante que los decimales se separen con notación inglesa, es decir, con un punto en lugar de una coma.

Para que se adapte al mayor número de plantillas posible sin tener que cambiar muchas cosas, he modificado un poco el estilo, el HTML y traducido los comentarios. Los valientes podeis adaptar todo esto a vuestro antojo, modificando el CSS para conseguir cosas como esta.

Hay muchas posibilidades porque todo funciona con las clases de los DIV's. Así, por ejemplo, se puede poner el escaparate en una página y el carro siempre visible en la barra lateral, como se puede ver en el blog de pruebas, tras haber seleccionado algún artículo previamente en la página de la tienda.. También he probado a poner enlaces en las imágenes y no hay problemas, así que casi seguro que hasta se podría usar algún tipo de ventana modal para mostrar una imagen ampliada.

Si disponeis de algún servicio de hosting bueno para los ficheros, alojarlos allí en lugar de en vuestra plantilla. Esto será especialmente util si la tienda la montais en una página, porque así no se llamará al script si no hace falta, aligerando la carga. No obstante ocupa poco más de 30k, así que tranquilos en cualquier caso. Los más avezados teneis los ficheros originales y toda la documentación del script en la página de SimpleCart (en inglés).

SimpleCart, encontrado vía TechieBlogger.