Bogger Store plantilla para Bloggerl

Blogger Store es una plantilla ideal para tener una tienda online en Blogger.
Es una plantilla gratuita que

dispone de:

Dos columnas,
Barra lateral derecha,
Diseño web 2.0
Iconos de marcadores sociales ect..

En este post vamos a explicar paso a paso como la podemos instalar facilmente en nuestro blog.
Como siempre digo antes de tocar nuestro código HTML es importante que tengamos un copia de seguridad por si algo nos nos sale bien.
Lo explico paso a paso en este post.

Instalar la plantilla.

Para descargar la platilla lo podemos hacer desde BTemplates o desde este enlace
Abrimos la carpeta zip y nos aparece una carpeta con varios ficheros y el que necesitamos es bloggerstore-v2.xml.

Nos guardamos este fichero en el disco duro de nuestro ordenador.
Cuando lo tengamos guardado nos vamos a nuestro escritorio de blogger

Tema > Crear / Restablecer copia de seguridad

y nos descargamos la plantilla que hemos guardado anteriormente es nuestro disco duro.

Configuraciones desde el escritorio

Vamos a configurar los post para que se muestren todos los datos necesarios.
También podemos cambiar el símbolo de la moneda que vamos a usar.

Antes de salir de aquí también marcamos arriba en Mostrar un máximo de..., un número múltiplo de cuatro para que los artículos cuadren bien en la página de Inicio y no queden huecos mas que cuando es imprescindible.

Para ello vamos a Escritorio y desde allí

Configuración > Entradas y comentarios > Plantilla de entrada > Añadir.

Dentro de la ventana emergente copiamos esto:



<div class="item_image">

<a href="url_imagen_producto"><img border="0" class="item_thumb" src="url_imagen_producto" /></a>

<span class="item_price">$00.00</span>

</div>

<select class="item_size">

<option value="S">Pequeña(S)</option>

<option value="M">Mediana(M)</option>

<option value="L">Grande(L)</option>

<option value="XL">Extra Grande(XL)</option>

</select>


<div class="item_Description">

Descripción del producto

</div>

Actualizar SimpleCart

Ahora nos vamos a Plantilla ► Edición HTML

Actualmente hay una nueva versión de este script que soluciona algunos problemas de la anterior y que también incluye algunas mejoras, así que proponemos usar esta última. Podéis descargarla desde la página de SimpleCart o directamente desde este enlace .

Una vez en vuestro disco duro tenéis que subir el fichero .js a un sitio que permita hotlink, como Google Code o Dropbox.

Tras eso hay que buscar la dirección del enlace y sustituirla por la original que se encuentra en esta línea (marcada en verde):

Dentro de la ventana emergente copiamos esto:



<script src='https://jt-scriptsource.googlecode.com/svn/trunk/simplecart.js' type='text/javascript'/>

Ajustes slider

Esta plantilla lleva un slider en la parte superior que muestra las entradas más recientes.

Ahora vamos ha hacer algunos ajustes

Plantilla > Edición > HTML> Continuar

Estamos editando la plantilla y allí buscamos

"product_image_number".

Ese es el número de productos que se mostrarán en el slider. Para las pruebas ponemos ahí un 2 en lugar del 9 que aparece.

Un par de líneas más arriba encontramos

product_image[0] = "/noimage.png"
"/noimage.png"

Esto noimage.png lo cambiamos par la URL de la imagen que queremos que apareazca, cuando no tengamos fotografia de ese producto.

Cuando tengamos mas entrada publicadas, ( productos), podremos volver aqui para poner un numero superior

Cuando estemos en real y tengamos más entradas publicadas (productos), podremos volver aquí para poner un número superior y que se vea una mayor cantidad de productos en el slider. Caben 6 por pantallazo, por lo que si ponemos ese número o menos, se mostrarán imágenes fijas. Para conseguir el efecto de deslizamiento habrá por tanto que poner más de 6.

Seguimos en la plantilla y buscamos curcular: false. Eso es una errata. Cambiamos curcular por circular.

Esa zona es la que controla los parámetros del slider. Combinando valores true/false en circular, infinite y auto, podremos conseguir distintos modos de mostrar las imágenes. No me prodigo más aquí porque es cuestión de saber inglés, probar y observar resultados. Para más información técnica sobre el carrusel, visitad la página del autor: carouselfed.

Configurar divisa y forma de pago

El código del script que controla todo el carro es SimpleCart. En el enlace tenéis la página del autor con detalles técnicos sobre el programa.

Siempre hay que hacer unos ajustes para que funcione correctamente por lo que tenemos que buscar poco después del <head> este trozo de código:



<script type='text/javascript'>

//<![CDATA[

/* SIMPLE CART SETTING

>>>>>>>>>>>>>>>>>>>>>>>>*/

simpleCart.email = 'titulartienda@dominio.com';

simpleCart.checkoutTo = PayPal;

simpleCart.currency = USD;

simpleCart.cartHeaders = ['name','thumb_image','Quantity_input','increment', 'decrement','Total'];

//]]>

</script>

Realizamos estos cambios:

simpleCart.email: Sustituir por tu dirección de correo electrónico.

simpleCart.checkoutTo: Dejar PayPal para usar este método de pago o sustituir por GoogleCheckout si se desea este otro sistema.

simpleCart.currency: La divisa en la que se realizará el pago. Sustituir por las siglas que correspondan según la lista de abajo.

simpleCart.cartHeaders: No es necesario cambiar nada

No se pueden usar más divisas que estas:



Baht Thailandés=THB

Corona Checa=CZK

Corona Danesa=DKK

Corona Noruega=NOK

Corona Sueca=SEK

Dólar Australiano=AUD

Dólar Canadiense=CAD

Dólar Hong Kong=HKD

Dólar Neozelandés=NZD

Dólar Singapur=SGDDólar USA=USD

Euro=EUR

Florín Húngaro=HUF

Franco suizo=CHF

Libra Esterlina=GBP

Nuevo Sheqel Israelí=ILS

Peso Mexicano=MXN

Rupia Indonesia=IDR

Yen Japonés=JPY

Zloty Polaco=PLN

Creando un producto

Vamos a crear un producto de prueba para ver cómo va quedando la cosa y para comprobar cómo funciona esto de la Plantilla de entrada.

Preparamos una imagen del producto cuadrada y de un ancho de 150px o más. La archivamos en nuestro disco duro y después creamos una Entrada nueva. Observamos que nos sale un texto que es precisamente el grabado en el punto 3.

Para seguir un orden y que no se nos olvide nada, comenzamos con el título del post, que será la denominación del artículo. No debéis usar nombres muy largos para que no descuadre la cosa.

Después de darle título a la entrada, subimos la imagen que teníamos preparada.
De todo el código que Blogger nos mete, nos quedamos sólo con la primera dirección que es la de tamaño original. Lo demás no nos sirve para nada en este caso, copiamos esa dirección y borramos el resto. Sería lo que aquí marcamos en morado:



<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/b_Wkmcb-mfo/s1600/producto.jpg"
 imageanchor="1" style="margin-left:1em; margin-right:1em"><img 
border="0" height="200" width="200" 
src="http://3.bp.blogspot.com/b_Wkmcb-mfo/s200/producto.jpg" 
/></a></div>

Ahora llega el momento de rellenar la plantilla que tenemos en nuestra futura entrada, cambiando las cosas que veis aquí en negrita-verde por los datos reales (o inventados, ya que estamos probando). En orden serían la dirección de la imagen de antes, otra vez la misma dirección, el precio del producto sin olvidar poner el símbolo de la moneda y en último lugar, una descripción que puede ser tan extensa como queráis.

<div class="item_image">
<a href="url_imagen_producto"><img border="0" class="item_thumb" src="url_imagen_producto" /></a>
<span class="item_price">$00.00</span>
</div>
<select class="item_size">
<option value="S">Pequeña(S)</option>
<option value="M">Mediana(M)</option>
<option value="L">Grande(L)</option>
<option value="XL">Extra Grande(XL)</option>
</select>

<div class="item_Description">
Descripción del producto
</div>

Publicamos la entrada y ya vemos nuestro primer producto.

Con la primera versión de SimpleCart no podíamos diferenciar tallas, colores u otras variaciones posibles sobre el producto base, pero con esta nueva versión no hay problema. Como habéis visto en el ejemplo anterior en el que hemos indicado cuatro tallas posibles, se puede poder un desplegable con las opciones sobre el producto que queramos.

Para poner una segunda alternativa adicional, sólo habría que añadir otro select con la misma estructura pero con otra clase. Por ejemplo para colores, justo detrás del cierre del select podríamos poner otro con class="item_color" y detrás las opciones correspondientes.

Por otra parte si no necesitáis opciones, lo mejor es quitar de la plantilla para entradas que vimos en Primeras configuraciones, toda esta parte del select y así no lo tenéis que borrar cada vez que publicáis.

Para comprobar cómo funciona el slider repetimos este proceso hasta grabar un total de 8 productos (o replicamos el contenido de la entrada de prueba para ir más rápido). Luego vamos de nuevo a la plantilla para ajustar el valor de los productos a mostrar en el visor a 8, tal y como se explicó en el apartado Primeros ajustes slider de este tutorial.

Posteriormente, cuando estéis en real y tengáis más productos, podéis incrementar este número.

Indice HTML Plantillas