PrestaShop: Personalización

Organización de los hooks o ganchos en la portada

Prueba ahora LinkedIn Learning sin cargo y sin compromiso.

Prueba gratis Mostrar modalidades de suscripción
La colocación de los distintos bloques de las páginas se basa en lo que se llaman hooks, que son contenedores distribuidos por las plantillas del tema instalado. En este vídeo vamos a aprender a distinguir los más importantes.

Transcripción

Ya sabemos que gracias a "live edit", tenemos una ayuda aproximada sobre los distintos bloques que tenemos dentro de la página. De todas formas, necesitamos más información, hace falta saber un poco más. ¿Por qué? Pues porque, por ejemplo, igual que me parecen estos bloques de información, de bloque selector de idioma, etcétera, sin embargo no sé de dónde está saliendo este buscador o este carrito, no viene marcado en ningún sitio. O el logotipo o, por ejemplo, en la parte de abajo no tengo ninguna información acerca de todo lo que está ocurriendo dentro de este "footer". Así que necesitaremos algo más. Ese algo más, de entrada, va a ser una explicación acerca de cómo se configuran estos temas. Cada tema va a tener una serie de zonas, de áreas, que van a ser los "hooks", que van a ser los sitios donde nosotros podemos montar los distintos módulos. Eso se ve reflejado dentro del apartado de Módulos y servicios, en Posiciones de los módulos. En él vemos una serie de apartados que vienen marcados con una línea alrededor, con el título en azul claro. Y dentro de él hay una serie de módulos. Bueno, pues cada uno de esos elementos es un 'hook'. Y dentro de cada 'hook', podemos tener ninguno, alguno o muchos módulos instalados. En realidad, hay muchos 'hooks' distintos. Hay algunos que ni siquiera admiten el meter elementos visuales dentro de ellos. De hecho, mostrar los 'hooks' invisibles añadiría todos esos que efectivamente lo único que hacen es meter ciertos tipos de funcionalidades que no son, digamos, visuales. Luego por otra parte, también hay que tener en cuenta otra cosa y es que estos 'hooks' que están apareciendo aquí, en realidad, son todos los del sitio entero. Quiero decir, no son solo los del Home Page, no son solo los 'hooks' que se van a aplicar aquí, sino también cuando yo me vaya a una vista de producto o cuando vaya navegando por ejemplo por mis datos de cuenta, todos ellos van a aparecer aquí. Entonces, puede ser que en un momento dado lleguemos a un 'hook' concreto en el que veamos módulos que, sin embargo, en este diseño de la Home no van a aparecer. De hecho, se pueden configurar algunos módulos para que salgan solo en algunas páginas. De todas formas, si me voy moviendo de arriba a abajo, pues vemos que hay montones de módulos instalados en los diferentes 'hooks', de hecho hay montones de 'hooks'. Así que voy a necesitar alguna herramienta más que me permita saber un poco dónde se van organizando cada uno de esos elementos. Hay más opciones, por ejemplo, una de las posibilidades que tengo es ver cómo está montado el código HTML de la página. Ese código me va a dar pistas. Si pulso con el botón derecho y selecciono Inspeccionar elemento con "firebug", voy a tener de un vistazo rápido todo el código HTML de esa página. No hace falta saber lenguaje HTML, simplemente hace falta entender que el HTML está estructurado en etiquetas, que están metidas unas dentro de otras. Para eso sirven estos 'más' y 'menos', para desplegar una etiqueta y ver qué contenido tiene dentro. Entonces, de esta manera, podemos ver fácil cómo van metiéndose unos elementos dentro de otros. O sea, cuál es la estructura jerárquica en la que está construida esta página HTML. Todas ellas tienen una etiqueta 'body', dentro de la cual viene la página. Ese 'id' sirve para identificar únicamente un elemento de la página, y nos va a dar pistas sobre precisamente esto: sobre los módulos y sobre también los ganchos. El nombre de cada uno de ellos no va a coincidir exactamente o no tiene por qué coincidir exactamente con ni el gancho ni con el módulo. Pero, sin embargo, sí nos va a dar pistas que van a ser interesantes. Todas las páginas van a tener un contenedor que envuelve todo, un "wrap". De hecho aquí tenemos un "main wrap center" y luego dentro de él un "main wrap". Esto ocurre en este tema en concreto. Si abrimos otro tema diferente nos encontraremos con que la estructura será parecida, pero no tiene por qué ser igual. Y luego dentro del "main wrap" sí que vamos a tener algo que ya es más interesante. Y es que vamos a tener tres elementos distintos que van a ser el "header", que vemos que es todo este cabecero, de aquí hacia arriba. De aquí hacia abajo, toda la parte central hasta llegar al "footer", es el "columns container". Y luego en la parte de abajo que va a estar este —voy a irme hacia abajo— "footer container". Lo voy a seleccionar y aquí lo vemos. Así que, por ejemplo, si estoy interesado en ver qué es lo que está ocurriendo dentro de ese "footer", bueno pues podría irme a las Posiciones de los módulos para buscar un 'hook' donde se vayan a meter los contenidos. Podría buscar por "footer". Y aquí vemos que aparece un "display footer". —voy a cerrar el "firebug"— y dentro de ese "display footer" de hecho voy a tener varios elementos. Me debería de fijar en tres: Bloque CMS, Bloque Mi cuenta, en el pie de página, y Bloque Social. Si me vuelvo atrás y vuelvo a utilizar el "firebug" sobre alguno de estos elementos, bien, pues tenemos una sección que dice que varios "links", aquí lo podemos ver, que no me da ninguna pista, pero por ejemplo sí que tenemos un elemento que me da pista, que se este "social block". Luego, por otro lado, también los otros dos me pueden dar pistas por su nombre. Por ejemplo, Mi cuenta, pues Mi cuenta debería de coincidir seguro —sé que es así— debería de coincidir con el Bloque mi cuenta, al pie de página. El pie de página es el "footer". O sea que estamos viendo que realmente sí que se puede encontrar cómo están organizados los elementos dentro de los temas. Es muy importante también recordar que cada tema va a tener configuraciones distintas. Algunos de los temas, los buenos, suelen tener documentación en la que me explican cómo debería de ir colocando los distintos elementos en los distintos sitios, pero no todos lo tienen. Así que es bueno entender cómo están organizados estos temas, para luego poder recolocar nosotros los distintos elementos o para entender cómo puedo configurar un elemento concreto. Y también, por supuesto, para aquellos que sepan algo de HTML o que no le tengan miedo, que de hecho no hay que tenerle miedo porque es muy fácil, pues también está la posibilidad de irse al "template" concreto, por ejemplo al "template" de la página, de Page, y dentro de él, pues coger y cortar el código de un sitio y ponerlo en otro. Y así hacer que los 'hooks' que tiene ese tema cambien de posición. Esto de todas formas ya sería una posibilidad un poquito más avanzada. Puede parecer que hay muchos módulos y que hay muchos 'hooks', realmente es así. Pero si elegimos un tema y nos ponemos a trabajar con él, lo primero que se suele hacer es hacerme un esquema, con un boli y un papel, en el que vaya dibujando dónde están los diferentes 'hooks' que voy a ir modificando e ir apuntando dentro de ellos los módulos que hemos añadido o que tenemos colocados en ello. Eso nos va a servir para que, después de dos meses, si queremos hacer una modificación cualquiera, tengamos una referencia fácil sobre cómo podemos hacer esos cambios que queremos realizar.

PrestaShop: Personalización

Haz triunfar tu tienda Prestashop aprendiendo a crear ofertas, aplicar descuentos en los envíos, o a mejorar los motores de búsqueda para que todos vean tus productos.

2:13 horas (29 Videos)
Actualmente no hay comentarios.
 
Software:
Fecha de publicación:3/10/2016

Este curso video2brain está disponible como descarga y para ser visualizado online. ¡Pero no hace falta que decidas entre las dos opciones! Al comprar el curso, disfrutarás de ambas posibilidades.

La descarga te permite ver las lecciones sin estar conectado/a a internet y supone una navegación fácil y ágil entre capítulo y capítulo. Si vas a trabajar en diferentes ordenadores o si no quieres descargarte el curso completo, entra en la web con tus datos de acceso y disfruta directamente de tus vídeos online. Te deseamos que disfrutes de este curso y te resulte de mucha utilidad.

Estamos a tu disposición si tienes cualquier tipo de duda o pregunta.