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

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 derecordar 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 veresta demo os gusta el asunto, a continuación facilitamos los ficheros necesarios y explicamos brevemente cómo instalarlos.

1. En primer lugar, desdeElementos de Página añadimos un gadget tipoHTML/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 elscript 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 deAñ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ónPAYPAL 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 variablesimpleCart.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.

!-- Crea un DIV CON LA CLASE "simpleCart_shelfItem" --
div class="simpleCart_shelfItem"
img src="http://img85.imageshack.us/img85/8136/tshirt1x.jpg" alt="Camiseta AA" title="Camiseta AA" class="item_image" /
h5 class="item_name"
Camiseta AA/h5
p class="item_Description"
Cualquier campo que quieras para tus artículos, puede ser generado creando una etiqueta con la clase "item_[field-name]"
/p
span class="item_price"26.00€/span
a id="s2" href="javascript:void();" class="item_add"Add to Cart/a
span class="item_thumb"http://img85.imageshack.us/img85/8136/tshirt1x.jpg/span
/div

En verde lo que hay que personalizar. La primera imagen es la que se verá en elescaparate y la última la miniatura que se mostrará en el carro. Las etiquetastitle,alt y el contenido deldivitem_name, deberán contener el nombre del artículo (en el ejemplo,Camiseta AA). El párrafo con claseitem_Description, debe contener la descripción del artículo. Por último, elspanitem_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 cosascomo 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 elblog de pruebas, tras haber seleccionado algún artículo previamente en la página de latienda.. 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 losficheros originales y todala documentación del script en la página deSimpleCart (en inglés).

SimpleCart, encontrado víaTechieBlogger.

Actualización: Ver cómo aplicar el envío por correo electrónico.

CosasParaMiBlogs

lunes, 12 de abril de 2010

SimpleCart. Una tienda online... también para Blogger. – Platform – Virtual

Popular Posts

Blogger news

Labels

Blog Archive