Blogger Store: Personalización y solución de problemas

Personalizar los menús

Todos los menús vienen sin enlace de destino y es necesario conocer la estructura por si se necesita hacer submenús. En total son tres los que hay que configurar. El deslizamiento suave se consigue gracias a unas librerías que lleva incorporada la plantilla.

El primero que encontramos es el que tiene la id='top-nav'. En la plantilla tenéis que localizarlo y cambiar los enlaces vacíos (#) por los que os interesen a vosotros, adecuando los rótulos que originalmente vienen como Home, Category, Contact y About. Esta es una réplica de ese código para que se vea cómo se forma un submenú desplegable en vertical. Es el que lleva Category como texto y Category 1, Category 2 y Category 3 como sub-opciones. Como podéis ver, para crear un submenú sólo se trata de anidar una lista y asignarle la clase sub-menú para el estilo.

A modo de ejemplo se ha cambiado el enlace vacío (#) que venía en la primera opción para Home, por la variable que contiene la dirección a la página principal. También podríamos haber puesto directamente href='http://loquesea.blogspot.com'.

<ul id='top-nav'>
<li><a expr:href='data:blog.homepageUrl' title='Inicio'>Home</a></li>
<li><a href='#'>Category</a>
<ul class='sub-menu'>
<li><a href='#'>Category 1</a></li>
<li><a href='#'>Category 2</a></li>
<li><a href='#'>Category 3</a></li>
</ul>
</li>
<li><a href='#'>Contact</a></li>
<li><a href='#'>About</a></li>
</ul>

El segundo menú, el principal (más abajo, en rojo), tiene class='nav' y así es como lo encontraréis en la plantilla. Los submenús también se forman anidando nuevas listas, pero en esta ocasión no es necesario aplicar ninguna clase.


Queda el menú con enlaces a redes sociales de arriba a la derecha. Este tiene la id='top_social'. Igual que en los anteriores, hay que localizarlo en la plantilla, cambiar los enlaces y eliminar o añadir los que gustéis.

Cambiar colores y fuentes

Esta plantilla permite cambiar desde el diseñador Blogger los siguientes elementos:

• Color fondo laterales
• Fuente y color de texto
• Color descripción del blog
• Color de enlaces
• Color de fondo del menú
• Color de fondo del carro.

Banner/logo

Existe un espacio accesible como gadget desde la sección Diseño, que viene vacío de contenido. Está en la parte superior derecha y puede alojar un contenido de hasta 468x60px. El tamaño es el de un banner publicitario medio, pero también se puede utilizar para incluir el logo de la tienda o cualquier otra cosa que os venga bien.

Cambiar palabras inglesas a español

Ya que estamos por la plantilla se pueden cambiar las palabras en inglés por la de nuestro idioma. Teniendo marcada la casilla Expandir plantillas de artilugios, buscamos estas cadenas y sustituimos por las que se desee. Incluimos sugerencias.

• My Cart | En el carro
• Total Price | Precio total
• Add to Cart | Añadir (o Comprar)
• Empty Cart | Vaciar carro
• Checkout | Realizar pedido (hay varios; sólo el que está tras href='javascript:;'>Checkout)
• More Info | Más info
• Grid | Panel (buscar cadena href='#'>grid)
• Detail | Detalle

Problema con enlace "More Info"

Probando la plantilla observé que el More Info que aparece debajo de cada miniatura de producto en la página Inicio y que debería llevar a la página del producto, tenía un enlace vacío. Para arreglarlo y que funcione correctamente, hay que buscar la línea <a class='more_info' href='javascript:;'>More Info</a> y sustituirla por esta otra:

<a class='more_info' expr:href='data:post.url'>More Info</a>

Problema en el envío al añadir productos desde la página principal

En la página de Inicio, los títulos de los posts (el nombre de los artículos) contienen un enlace a la entrada dónde se describe el producto con más detalle. Ese enlace provoca que cuando se accede al Checkout, el título salega con código y que no se muestre adecuadamente. Si queréis resolver esto hay que buscar este trozo en la plantilla y eliminar todas las líneas que se muestran aquí tachadas. Eso elimina el enlace, pero como hemos incluido el "Más información" de antes, no debería afectar a la navegabilidad.

Hay dos partes en las que aparece. Una es la normal y otra es para la versión web. Podéis cambiar sólo la de web, ambas... o ninguna. A elegir.

<h3 class='post-title entry-title item_name'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<b:if cond='data:blog.url != data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>

Pequeños cambios/mejoras

Una ya le hemos hecho y ha sido al configurar la plantilla para las entradas. El código-modelo que propuse incluye un enlace para poder agrandar la imagen tanto en posts como en la página Inicio, del que carece la plantilla original. Si tenéis el lightbox activado en el escritorio Blogger, no tenéis que hacer nada más.


Para que independientemente de la longitud del título del post (nombre del artículo), la cabecera ocupe siempre la misma altura evitando así que descuadren todas las miniaturas de la página inicio, lo mejor es ponerle un alto fijo. Eso lo hacemos en la clase .grid h3, añadiendo las propiedades height:32px; y overflow:hidden;.

Esa altura nos permite utilizar títulos más largos, de hasta dos líneas, sin que se nos descuadre la cuadrícula de la página Home. Si cambiáis el tamaño de letra u optáis por hacer títulos de más o de menos de 2 líneas, entonces tendríais que ajustar esos 32px.

Si hacéis esto anterior para usar títulos más largos, también tendréis que modificar en el CSS de la plantilla la clase .bag .itemContainer, modificando el valor height: 130px; y pasándolo a 150px. Esto es para que en el carro de la compra, cuando se ve la lista de productos añadidos, el precio no se quede fuera del recuadro de cada producto.


Si se va a utilizar la descripción que iría debajo del nombre de la página, es necesario cambiar algunos valores CSS para que esta no se quede solapada con el título principal. Buscad en la plantilla la clase .description y cambiar el valor de top:-25px; por top: 0px;. Ahí mismo podéis cambiar el tamaño de fuente e incluso el deplazamiento horizontal. Este último ajustando el valor de left.


Si utilizáis tallas u otro tipo de variables para los productos y no todos tienen la misma cantidad de selectores (por ejemplo cuando alguno no tiene nada, otro sólo talla y otro por ejemplo, talla y colores), hay que incorporar un height en la clase .grid .post-body para que en la página Home los cuadrados de cada producto sean del mismo tamaño.

Serían 130px si hay un selector como máximo y 20px más por cada selector adicional en el producto que más lleve. En este caso hay que volver a cuadrar los botones de "Añadir" y "Más info" y la forma más fácil es ponerlos tras el pie del post.

Hay que buscar este trozo y cortar lo destacado en negrita. Sería todo el condicional:

<div class='post-body entry-content clearfix' expr:id='&quot;post-body-&quot; + data:post.id'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<a class='item_add' href='javascript:;'>Añadir</a>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<a class='more_info' expr:href='data:post.url'>Más info</a>
</b:if>
</b:if>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->

Lo pegamos en este otro sitio:

<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>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<a class='item_add' href='javascript:;'>Añadir</a>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<a class='more_info' expr:href='data:post.url'>Más info</a>
</b:if>
</b:if>
</div>
</b:includable>

Para volver a ajustar todo, en el CSS de a.item_add,a.more_info, eliminamos margin-top:10px; y en a.item_add, añadimos un margin-left:10px;. En .grid .item_price, el valor de top hay que cambiarlo a 150px.

Aprovechamos que estamos por aquí y le quitamos a a.item_add y a.more_info, el z-index:20; que tienen, pues ya no hace falta y se solapa por encima del lightbox cuando ampliamos las imágenes de los artículos. También podemos quitar los que llevan .nav li y .nav a.


Accediendo a la sección Diseño desde el Escritorio Blogger, podéis ver que hay varios gadgets no visibles añadidos en la parte superior izquierda. De ahí podéis quitar el de Seguidores y el Archivo del Blog, ya que en un principio no tienen ninguna utilidad en este tipo de páginas (tienda) y su carga demora la página.


Una cosa más sería localizar .ads-half-banner y añadirle un overflow: hidden; para que el contenido del espacio para banner nunca desborde el contenedor.

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