Comercio electrónico con PrestaShop: Módulos

Creación del formulario con la plantilla Smarty

¡Prueba gratis durante 10 días

nuestros 1152 cursos !

Prueba gratis Mostrar modalidades de suscripción
La forma correcta de crear contenidos es a partir de las plantillas. En este vídeo vamos a usar una plantilla Smarty para crear un formulario que sirva para definir si se van a mostrar comentarios o no en nuestro módulo.

Transcripción

Es evidente que el apartado de configuración realmente no es suficiente, más que nada porque no configura nada. Vamos entonces a crear ahora un formulario utilizando Smarty para poder configurar cómo quiero que se visualice después en la parte del producto este módulo de fotos de clientes. La idea va a ser la siguiente: voy a permitir o no que se puedan añadir comentarios, aparte de añadir esa fotografía. Eso significa que debería de tener unos 'radio buttons' o un 'checkbox', cualquiera de las dos opciones me podría valer, para permitir que se active o se desactive esa opción. ¿Y cómo vamos a hacer esto? Pues es muy fácil: dentro del TPL que se ocupa de esa configuración, del 'Get Content', tendré que ir añadiendo poco a poco mi formulario. Lo primero de todo utilizaré 'Fieldset' y dentro de ese 'Fieldset' es donde voy añadir por un lado la leyenda, en la que voy a explicar qué configuracion es, en este caso esta configuración del módulo de fotos, etc. Y luego voy a añadir un panel dentro del cual es donde voy añadir ese formulario. Es interesante ir viendo que voy a utilizar Bootstrap. Eso significa que voy añadiendo clases que van a servir para dar aspecto de manera automática a los distintos elementos que voy añadiendo. Dentro de ese panel voy a poner un cabecero para el panel y después de este cabecero voy a añadir una leyenda. Esta leyenda se compone de, por un lado, el texto 'configuración' y, por otro lado, estoy añadiendo un pequeño icono. Estos iconos van a estar todos dentro de la carpeta de Imágenes de la instalación y dentro de ella, en la carpeta Admin, voy a tener toda una serie de iconos con los distintos elementos típicos de la administración. O sea, flechas, ruedas dentadas como es este caso, calendarios, etc., etc., etc. Y van a ser todos utilizables simplemente desde :/IMG. El sentido de esos dos puntos es porque la ruta de este TPL se va a contar a partir desde la carpeta Modules. No desde la carpeta interna donde está, sino desde esa Modules. Por eso están esos dos puntos y a partir de aquí el resto. Una vez añadida esa leyenda, paso a añadir el formulario. En este formulario no voy a añadir ninguna acción porque en realidad el control de qué es lo que va a ocurrir no va estar metido dentro del formulario, sino metido dentro del botón de envío de los datos. Añadiré un grupo, utilizo este 'Form Group' para meter dentro de él los elementos del formulario, que van a ser por un lado un 'Label', o sea por un lado el texto "añadir comentario". Es interesante ver de nuevo como ustoy utilizando clases de Bootstrap, en este caso pues le estoy explicando que para cuando el tamaño sea lo bastante grande, que me ponga ese 'Label' con una ancho de 3 columnas. Y luego además voy a añadir 'radio buttons' que ocupen 9 columnas para ese tamaño grande a partir de él, y estos radios a los que les voy a añadir también un segundo icono en este caso el 'Enable', que es el típico "check" verde. Voy a ponerlo como imagen previamente, después voy a añadir el radio y después voy añadir el 'Label'. Importante en este caso: yo necesito tener claro qué valores son los que voy a transmitir después a la configuración, a este 'Get Content', que es el que se va a ocupar de recibir lo que se envíe en el formulario. En mi caso yo quiero que el valor de poner en marcha los comentarios esté en 1 o en 0, así que he añadido de nombre el 'enable comment' con el valor 1 para este 'radio button' y con el 'Label' relacionado "sí". Bueno pues ahora añado el equivalente para "no". En este caso he puesto un icono de imagen que es las aspas rojas, para indicar que estás seleccionando un "no". Y por otro lado he cambiado el valor a un valor 0. Y por último pongo ese texto "no". Esta parte del formulario estaría lista, pero como digo, ahora necesito poder enviar el formulario, así que voy a necesitar un botón Submit. Voy a añadir una nueva parte del panel. igual que tenía el 'Panel Heading', ahora voy a utilizar el 'Panel Footer', y dentro de este ¡Panel Footer' voy añadir el botón. Este botón que tiene las clases típicas de botón de Bootstrap, que es de tipo de envío, con el texto "guardar". Falta todavía una cosa. Como digo, este botón es el que se va a ocupar de enviar los contenidos del formulario, así que le voy a aplicar un nombre y ese nombre va a ser fundamental. Le voy a poner de atributo 'name photo client _form'. Es bueno utilizar, para todo lo que sea transmitir datos, para todo lo que sean funciones, etcétera, clases específicas de CSS... Es bueno añadir el prefijo con el nombre del módulo, para que así no pueda haber otro módulo que esté utilizando exactamente el mismo nombre. Así que por eso estoy utilizando este Photo client guión bajo y luego en este caso "form". Podría haberlo llamado por ejemplo "configuración" o como hubiera querido. Lo importante sobre todo es recordar este nombre. Una vez hecho esto, ahora necesitaré recuperar los datos dentro de este 'Get Content'. Y esto lo haré más adelante utilizando la clase 'Tools'. En cualquier caso, con estos contenidos ya guardados, si vuelvo otra vez a cargar este formulario, veremos que se ha transformado en: primero el rótulo que puso encima 'Configuración del módulo de fotos clientes2. Después ese 'Configuración', que de hecho debería de ponerlo en castellano, y luego este 'Label' de "añadir comentario" con un verdadero o falso. Y por último este botón de Guardar. Como vemos es todo completamente correcto. En todo caso, lo único que va a hacer falta ahora va a ser recuperar ese dato y hacer que estén conectados tanto los datos guardados dentro de este 'Get Content', como el formulario y el 'radio button'.

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.