Comercio electrónico con PrestaShop: Módulos

Asociar los hooks a plantillas para mostrar contenidos

¡Prueba gratis durante 10 días

nuestros 1145 cursos !

Prueba gratis Mostrar modalidades de suscripción
Con el hook configurado, el siguiente paso que debemos dar es utilizar la función que realiza la ejecución del hook en el módulo, con una plantilla que defina el código HTML que se ha de dibujar en ese hook.

Transcripción

Voy ahora a asociar una plantilla a este 'hook' que he creado dentro del módulo. Para asociar plantillas a funciones, pues se utiliza el mismo método que utilicé dentro de la función Get Content. Así que copio esta última línea y la voy a reutilizar. Básicamente consiste en pedir que devuelva y dentro de devolver que utilice la función Display para buscar un archivo que tenga un nombre determinado. ¿Qué nombre debería de ponerle? Es una costumbre poner el mismo nombre que el nombre del 'hook' en el que se va a mostrar. Así que voy a sustituir este Get Content, por ese Display Product Tab Content. En realidad no tiene importancia. Quiero decir, como estoy definiendo aquí ese nombre, pues podría ponerle cualquier otro nombre, lo que pasa es que es una buena costumbre respetar este tipo de detalles. Por otro lado, necesito también entonces crear esa plantilla, así que para ello me voy a ir dentro de la carpeta del módulo, dentro de Foto cliente, en Views, en Templates, y dentro de Templates, en Hook. Y aquí voy a crear un nuevo archivo de plantilla. ¿Qué nombre le he de poner? Evidentemente, este Diplay Product Tab Content, punto, TPL. Así que voy a seleccionarlo, voy a pulsar en Guardar y dentro de guardar, voy a ponerle de nombre este que decía. Lo voy a guardar en esa carpeta Hook, está todo correcto. Lo guardo, y aquí tengo ya esta plantilla preparada. En esta plantilla puedo poner por supuesto cualquier cosa, y voy a comenzar añadiendo un encabezamiento. Por cierto, es interesante utilizar todas las clases propias de Prestashop porque así voy a poder recuperar todos los tipos de formas de visualización propias de los distintos elementos de Prestashop controladas desde los temas. Esto quiere decir, si yo cambio de tema, si utilizo este tipo de clases luego consigo que al cambiar de tema, este encabezamiento aparezca según está pensado para el nuevo tema. Si pusiese mis propias clases, pues me encontraría con que no saldría exactamente igual. Con lo cual es importante respetar este tipo de clases para dar el aspecto concreto de los distintos tipos de elementos. Dentro de la documentación de Prestashop se pueden encontrar las diferentes clases más habituales. En este caso como digo, el encabezamiento del producto. También otra forma de encontrar las clases necesarias puede ser dentro de la propia tienda, pulsando con el botón derecho y mirando a ver las clases aplicadas en los diferentes elementos. Una vez añadido el encabezamiento necesito crear un formulario. Y para ello voy a crear un nuevo bloque. Igual que estoy diciendo que es bueno reutilizar algunas de las clases propias del sistema, también es cierto que puedo crear yo mis propias clases y más adelante puedo añadir archivos CSS que sirvan para controlar cómo se van a ver los elementos que yo tengo metidos en mi módulo. Así que por eso, en este caso, voy a añadir la clase "Foto cliente bloque". Se puede ver que le he añadido ese "Foto cliente, guión bajo" con la idea de que así no haya clases que se llamen igual. Es una buena costumbre para los diferentes módulos utilizar siempre un prefijo. Dentro de este bloque voy añadir el formulario. Como siempre no voy a utilizar acción, porque voy a definir cuándo se recuperan sus datos gracias al botón de Envío. De todas formas, este formulario es un poco distinto al anterior porque lo que necesito es enviar fotografías. O sea, el cliente va a poder subir su propia foto. Así que voy a tener que seleccionar un "Enctype" del tipo "Multipart Form Data", para poder efectivamente subir esas fotografías con el método "post", y le he añadido también un identificador. Una vez hecho esto, añado un "Form Group", la típica clase propia de Bootstrap para entender que esto es un grupo de elementos de formulario, y bueno pues por utilizar un poco más allá lo que es Bootstrap y Prestashop, pues voy a definir cómo se debería de ver para diferentes tamaños de pantalla. Así que le puedo decir que para los tamaños muy pequeños ocupe el total de lado a lado y que cuando la pantalla seade tamaño medio en adelante, pues que a partir de ahí utilice solamente 4 columnas. Voy a añadir un "label" con Foto, dos puntos, y después voy a añadir un campo de selección de archivos, que es el que va a permitir al cliente seleccionar la imagen que quiere subir. Da igual el "name" y el identificador, simplemente hay que respetarlo luego cuando recupere esos datos, eso sí, "The type file". Y por otro lado añado un segundo "Form Group" sobre este "Form Group" puedo aplicarle también clases para definir cómo se va a visualizar. Por ejemplo, ancho completo en caso de que sea muy pequeño y a partir de tamaños medios, pues que ocupe 8 columnas. ¿Qué estoy consiguiendo con ello? Pues que en tamaños pequeños aparezca primero el Form Group encima de lo que es el selector de archivos y el segundo Form Group aparezca debajo, que es el que va a llevar el comentario. Pero en caso de que el tamaño sea medio y en adelante, lo que consigo es que uno ocupe 4 columnas y el otro ocupe 8, con lo cual suman 12, así que van a caber juntos. O sea, dicho de otra manera: va a aparecer por un lado a la izquierda un elemento y a la derecha va a aparecer el otro. Añadiré un "Label" que será el comentario y luego un "Text Area", que sirve para que el usuario pueda escribir ese comentario. Una vez hecho eso, necesito añadir el botón de envío. Así que añado un retorno de carro y añado ya el bloque para añadir ese botón. Le voy a añadir también una clase específica, porque luego más adelante quiero modificar un poco sus características. Y luego me queda añadir ese botón. Ese botón con todas las características típicas del botón. En este caso, en vez de ponerle un 'Value' con el valor que quiera como se haría con la etiqueta 'Input', pues lo que voy hacer es hacerlo un poco más complejo. Entonces poniendo el texto "enviar" y luego un pequeño icono para que quede un poco más bonito. Para terminar el formulario, como decía en realidad cuándo se va a recuperar la acción de este formulario se va decidir dependiendo de este botón. Así que a este botón le voy a tener que añadir un atributo 'Name'. En este caso 'Foto cliente submit photo". Esto es lo que va a servir para después recuperar dentro del módulo, utilizando el 'Tools isSumit', los datos de este formulario. Como siempre, le ha añadido un prefijo para que quede claro que forma parte de mi módulo. Si ahora quiero ver el resultado de lo que acabo de hacer, tendré que irme a Chrome y dentro de Chrome recargar la página. Es probable que una vez que recargue la página, descubra que realmente no se ve ningún cambio, así que a veces es necesario desinstalar el módulo y volverlo a instalar para poder ver la caché refrescada. Si me voy a cualquiera de los vestidos, pues aquí vemos en la parte de abajo cómo efectivamente ahora me aparece este apartado Fotos de clientes con ese "header" del propio de Prestashop. Y debajo, pues todo el formulario con el selector de archivos, el comentario y el botón de Enviar. Todo esto lo recolocaré más adelante cuando añadamos CSSs.

Comercio electrónico con PrestaShop: Módulos

Introdúcete en la programación de módulos de Prestashop, empezando por conceptos básicos imprescindibles para crear bloques funcionales dentro de este CMS de comercio electrónico.

2:49 horas (33 Videos)
Actualmente no hay comentarios.
 
Software:
Fecha de publicación:12/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.