Blogger Store: Instalación, ajustes y crear productos

Cómo en este sitio pretendemos que cualquiera, por pocos conocimientos que tenga, sea capaz de hacer cualquier cosa de las que proponemos, vamos a ampliar la información sobre la plantilla Blogger Store.

Intentaremos explicar desde cómo se instala, hasta cómo incorporar la opción para enviar un pedido por e-mail, pasando por su configuración, arreglar unos pequeños fallos que hay en ella y proponiendo algunas posibles mejoras.

Ya hablamos hace un tiempo de ella y seguimos considerando que es una muy buena opción para montar una tienda online en Blogger. El resultado es bastante bueno y sobre todo, requiere muy poco trabajo.

El tutorial es muy extenso, así que lo he dividido en tres partes. Desde aquí mi agradecimiento a Josiño, que ha colaborado muy activamente proponiendo mejoras, creando código y probando los resultados. De hecho, si no hubiera sido por su constancia, esta entrada y las siguientes posiblemente seguirían entre mis borradores por los siglos de los siglos.

Sin más preámbulo...

Instalar la plantilla.

Descargamos la plantilla a nuestro ordenador desde JavaTemplates, BTemplates o directamente desde este enlace. Descomprimimos el contenido de la carpeta .zip y nos aparece una carpeta con varios ficheros. El que nos interesa de momento es bloggerstore-v2.xml. Nos fijamos en qué carpeta se nos queda.

Accedemos a nuestro escritorio Blogger, nos vamos al apartado Plantilla y allí veremos arriba a la derecha un botón con la leyenda Crear copia de seguridad/Restablecer.

Pinchando en él podremos seleccionar un fichero desde nuestro disco duro. Nos vamos a la segunda parte de la ventana emergente (Sube una plantilla desde un archivo de tu equipo) y con Seleccionar, buscamos bloggerstore-v2.xml. Con Subir terminamos de instalar la plantilla. Ya podemos echar un vistazo al blog. Lo veremos correctamente pero sin productos.

Configuraciones desde el escritorio

Vamos al Escritorio y desde allí a 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>

Esto último que hemos hecho es para que en todos los posts que creemos a partir de ahora, nos salga la estructura HTML necesaria para que los productos se muestren correctamente con sus datos. Lo veremos más adelante.

Si vais a usar una moneda distinta de $ y puesto que esto último hace las veces de una plantilla-modelo, para no andar cambiando a cada publicación el símbolo, podéis hacerlo ahora.

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.

Y ya que estamos por aquí, podemos ir a Idioma y formato y configurar el Idioma y la Zona horaria.

Botón arriba a la derecha: Guardar configuración

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):

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

Para pruebas podéis usar este fichero:
http://dl.dropbox.com/u/57549161/scripts/simpleCart2.js

Ajustes slider

Esta plantilla lleva un slider en la parte superior que muestra las entradas más recientes. Es decir, los nuevos productos que vamos incorporando. Para que podamos ver el efecto del visor sin interferencias, hay que hacer unos primeros ajustes del script que controla eso desde 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. Si tenemos menos de los ahí ponga, el visor hará cosas raras. 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";. Entre las comillas tenemos que poner la dirección de la imagen que queremos que se vea cuando algún producto no tenga imagen ilustrativa en la entrada correspondiente. Esto es sólo por si acaso, porque lo razonable sería que siempre incluyerais una imagen en todas las entradas, aunque fuera esta misma imagen-comodín.


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>

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=SGD

Dó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 verde:

<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.

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

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