Cómo crear una rejilla adaptable sin plugins, sólo con HTML y CSS

¡Hola chavalada!

Con todo el tema este del #RETOTSA [2] estamos unos cuantos aprendiendo un buen capazo a base de dudas y respuestas en el grupaco de los 300 de Telegram, y entre muchas de las dudas surge el tema de crear la rejilla de productos o categorías para los TSA-commerce.

Me han preguntado varias veces con qué plugin lo hago yo, ¡pero er menda no usa plugins y ni siquiera wordpress para sus propios TSAs!

¿Cómo? ¿Pero por qué no usas WordPress?

Porque para algo tan «estático» como los TSAs, a mi personalmente, me parece más engorroso tener una base de datos, tener que hacer copias de seguridad, actualizar core, temas y plugins, etc. etc. etc. Y vamos, que trabajando directamente con HTML la velocidad de carga por lo general mejora bastante.

Va, me dejo de chorradas y voy al grano: lo hago directamente con código HTML y CSS. Algo muy sencillo y limpio (al final pongo un enlace a una demo de ejemplo).

Primero hablaré del código HTML, la estructura que tiene que tener y una plantilla de base en una simple herramienta que podéis usar vosotros mismos para agilizar mucho mucho mucho el proceso; y después el código CSS.

Si no entiendes nada de código, no temas, te lo explico para que lo puedas aplicar a pesar de ello, siguiendo los pasos no deberías tener problemas. No obstante, algunas aclaraciones haré, ya que a mi me hubiese gustado recibirlas antes de saber esto.

Código HTML

Para el código HTML lo que necesitamos es algo así:

Obviamente esto es un ejemplo y se puede hacer de muchas otras maneras o añadiendo y quitando elementos, pero para que lo entendáis, los elementos que nos importan son las etiquetas ul y li con sus class y valores rejilla y producto respectivamente, el resto es lo que queráis que tenga dentro de cada elemento de la rejilla.

Para este ejemplo, ya que escribo esto principalmente para los que quieren aplicarlo a los TSAs, he colocado para cada elemento lo que se le suele poner a cada producto:

• 1 enlace que envuelve a todos los elementos, con los atributos rel nofollow para tener contento a Mr. Google y target _blank para que se abran en pestañas diferentes y no se vayan de nuestro sitie.
• 1 imagen con ancho y alto de 200px y un atributo alt.
• 1 encabezado h3 con el nombre del producto.
• 1 párrafo donde está contenido el precio.

Todo lo que está encerrado dentro de <li>...</li> es replicable, así que puedes copiar y pegar tantos como necesites, siempre y cuando dejes todos los productos envueltos en <ul class="rejilla">...</ul>.

Repito: esto se puede cambiar por lo que le plazca a uno.

Herramienta y plantilla para acelerar el proceso

Para estos productos que replicamos como base, sería genial aprovechar una hoja de cálculo donde tengamos cada uno por línea y cada columna con su información correspondiente, donde ir copiando y pegando luego donde corresponda en el HTML, ¿no?

¡Pues te lo dejo más mascado todavía!: a esa misma hoja de cálculo le puedes añadir una columna más con unas formulitas para que te devuelva automáticamente el código HTML que necesitas, ¡listo para copiar y pegar!

En el siguiente enlace podéis ver y copiar una plantilla de Spreadsheets (el Excel de Google) en vuestra cuenta de Google Drive y editarla a vuestro gusto:

Plantilla Spreadsheets

Modificar esas fórmulas (las que hay en las celdas amarillentas) es bastante simple y fácil de entender si manejas un poco de HTML, ya que lo único que hago es concatenar códigos a modo de textos (los que hay entre comillas dobles) con los valores de cada columna mediante el símbolo &.

A partir de aquí, lo único que hay que hacer es rellenar datos en sus columnas correspondientes y copiar cualquier celda amarillenta (que es donde están las fórmulas) y pegarlas, dentro de la misma columna, en las filas donde haya datos, poniendo siempre tras la última un </ul> como se ve en el ejemplo de la plantilla.

Para terminar, solamente hay que seleccionar y copiar todas las celdas con contenido de la última columna y pegarla donde queramos.

Detalles:

• El resultado de los códigos de la última columna se obtienen en una sola línea por cada producto para evitar que spreadsheet genere comillas adicionales al copiar (si usais spreadsheet a menudo para cosas así, seguramente esto os resulte familiar).
• En las fórmulas he puesto los valores HTML entre comillas simples para que no se vea muy caótico, ya que poner comillas dobles como texto dentro de otras comillas dobles se deberían duplicar de por sí para que no de error, quedando un grupo de comillas dobles bastante confuso. Pero vamos, que así con comillas simples es más que válido para copiar y pegar.

¿Dónde poner el código HTML?

Si usáis un editor visual, deberías buscar algún botoncico que te permita escribir directamente en código. En el caso de WordPress, al escribir un post o página, lo tienes al lado de donde pone Visual, donde indica HTML.

Ojo: Tras pegar los datos en la zona de HTML de WordPress, si vuelves al modo visual y otra vez al modo HTML, verás que te lo descuadra un poco, pero el resultado finalmente será el mismo.

Si os paráis a pensar un poco, las posibilidades que tiene esta «tontería» de concatenar información a modo de códigos es… ¡cremita! ¡Y ni os cuento con el resto de fórmulas especiales de spreadsheet! Esto que os he puesto aquí es algo súper simple en comparación a como lo hago yo con mis TSAs, pero se trata de daros a conocer las herramientas para que cada uno se monte su propio sistema de trabajo lo mejor que pueda ?.

Código CSS

Ahí va el código CSS con algunas noticas bastante aclaratorias por si no sabéis del tema:

Por defecto lo he dejado para que muestre un máximo de 4 columnas a partir de 992px de ancho de ventana y que se vallan reduciendo el número de esas columnas a partir de las resoluciones especificadas, hasta 425px, donde sólo quedaría una columna.

Sobra decir que podéis modificar lo que os salga de los pendientes reales. Por ejemplo, podéis quitar las resoluciones mínimas o cambiar los porcentajes de los widths para que muestren tantas columnas como queráis.

¿Dónde poner el código CSS?

Si tenéis WordPress actualizado a la última versión, es tan fácil como copiar y pegar este código en: Apariencia > Personalizar > CSS adicional

Ale, sus dejo una demo para que veáis cómo se ve en este mismo sitio web:

Demo

Si hay suficientes peticiones y/o comentarios probablemente explique cómo scrapear la información de los productos para completar la información infinitamente más rápido.

¡Un saludo!

PD: tengo pendiente grabar un vídeo explicando todo esto más detalladamente, ¡pero es compliqueire estando de viaje! ?