PrestaShop: Módulos

Aplicando JS y CSS a nuestro módulo de Prestashop

¡Prueba gratis durante 10 días

nuestros 1244 cursos !

Prueba gratis Mostrar modalidades de suscripción
También se utiliza el contexto, en este caso el del controlador, para añadir archivos CSS y JavaScript a las plantillas aplicadas a los distintos hooks del módulo. En este caso lo usaremos para aplicar estilos y una nueva funcionalidad a nuestro módulo.

Transcripción

En nuestro módulo, hemos añadido un poco de HTML basado en plantillas. Es obvio que este HTML debería de estar controlado de alguna manera, tanto por CSS como JavaScript, para poder hacer que tenga mejor aspecto y, por otro lado, para que tenga más funcionalidad. De hecho en mi módulo se ve que, bueno, hay cosas que hace automáticamente, como el añadir una pequeña leyenda de imagen añadida. Pero vemos que los elementos aparecen todos descolocados, con diferentes tamaños, parecen el formulario mezclado con estas imágenes... O, dicho de otra manera, no sale correctamente. Vamos a ver entonces cómo podemos añadir CSS y JavaScript para hacer que esto aparezca mejor y, por otro lado, también para por ejemplo hacer que cuando se haga clic sobre la imagen, pues esta aparezca en pantalla. Veamos cómo hacerlo. En realidad, es muy fácil: es utilizar el contexto y dentro de los posibles contextos que hay, el 'controler'. Ese me va a dar dos métodos que sirven para cargar archivos de CSS y JavaScript donde yo los quiera poner. Y esto es un concepto interesante también, porque me va a permitir cargar los archivos que yo quiero en los 'hooks' en los que los necesito. Por ejemplo, en mi módulo tengo solamente dos hooks, este 'getContent' –aunque realmente el 'getContent' es más bien una cuestión de configuración, pero bueno– y luego tengo el 'DisplayProductTabContent', este sí que es un 'hook'. Bueno, pues si yo quiero que en cualquier punto concreto de la tienda se utilice un CSS o un JavaScript, lo que necesito es utilizar su 'hook' y dentro de él al final, como decía, utilizar el contexto '$this->context' del controlador 'controller' y utilizar alguno de los dos métodos, que puede ser, como decía, el 'addCSS' o que puede ser también el 'addJS'. En el primero, pues tendré que añadir la ruta de un archivo CSS. En el segundo, pues la ruta de un archivo obviamente JavaScript. Esa ruta la puedo organizar como quiera literalmente. Puedo poner, por ejemplo, dentro de la carpeta Views, a parte de esa carpeta Templates, bueno, pues puedo crear una nueva carpeta CSS, puedo crear una nueva carpeta JS, y dentro de esta carpeta CSS puedo crear un nuevo archivo de tipo CSS, que voy a guardar dentro de la carpeta CSS, que voy a llamar 'fotocliente.css'. Lo mismo voy a hacer con la carpeta JS y voy a guardarlo dándole el nombre 'fotocliente.js'. Para vincular tanto este 'fotocliente.css' como este 'fotocliente.js', necesito pasarle la ruta. Esa ruta es básicamente seguir la misma ruta donde está montado. Quiero decir: 'views/css/fotocliente.css'. Y eso mismo también ponerlo en el caso del JavaScript, pero con ciertas modificaciones. Esta ruta, si la utilizo según viene, no la va a encontrar, porque necesita saber dónde está almacenado ese módulo. Entonces para eso, además de esa ruta, puedo añadir una variable propia de la clase 'module' que es la clase 'path'. Así que puedo añadir, como digo, '$this_path'. Y a este, eso sí, añadirle todo el resto de la ruta, y con eso voy a conseguir que sepa que tiene que encontrar esos dos archivos dentro de 'modules/fotocliente y luego ya /views, etc. Bueno, pues hemos conseguido que añada esos dos archivos, ahora se trata de ponerle los CSS y el JavaScript. El CSS ya lo tengo preparado. En realidad, básicamente consiste en hacer –voy a abrir el código necesario– pues que cada uno de los bloques de productos estos que se van creando, estos bloques de cliente, tenga una entidad como bloque separado del siguiente y luego, por otro lado, pues voy a hacer que el comentario tenga un poquito de fondo y que tenga un poco de "padding", para que aparezca un poco más holgado más bonito, que el "text area" del formulario sea un poco más grande y luego he añadido un poquito de código CSS simplemente para hacer que cuando se haga clic en las imágenes, esas aparezcan centradas. Y para ello, entonces, también voy a tener que editar este archivo de JavaScript. Va a ser muy fácil. Dentro de PrestaShop, tenemos instalado GQuery, así que utilizando GQuery va ser muy fácil que me detecte cada una de las imágenes. Si me voy a la plantilla, veremos que las imágenes que se están cargando tienen todas la clase 'fotocliente_img', bueno pues voy a pedir que todas ellas al hacer clic recuperen la ruta de la imagen y añadan sobre el HTML una imagen, que va a parecer centrada con el borde gris y que cuando se haga clic sobre ella se vuelva a cerrar. Bien, pues si ahora recargo esta página, y aquí aparecen las imágenes ya con la imagen a un lado, con el comentario al otro, la imagen a un lado, el comentario al otro... y luego ya el formulario colocado debajo. Sobre este CSS, pues puedo ir añadiendo cualquier tipo de modificación y, como vamos a ver, voy a tener ya el control total sobre cómo se va a visualizar ese módulo. Por ejemplo, puedo ponerle que el "border" sea de 2 píxels sólido y que sea de un gris oscuro. Bien, pues recargando de nuevo veremos ahora que la imagen va a aparecer formateada con ese aspecto. Recapitulando, podemos añadir CSS y Java Script todos los que queramos dentro de los 'hooks' utilizando simplemente 'controller->addCSS' y 'controller->addJS'.

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.