{"id":2565,"date":"2012-09-27T11:28:21","date_gmt":"2012-09-27T11:28:21","guid":{"rendered":"http:\/\/www.apprentalonline.es\/blog\/?p=2565"},"modified":"2012-09-27T11:28:21","modified_gmt":"2012-09-27T11:28:21","slug":"crear-un-tema-en-prestashop-parte-1","status":"publish","type":"post","link":"https:\/\/www.k3bone.com\/blog\/2012\/09\/crear-un-tema-en-prestashop-parte-1\/","title":{"rendered":"Crear un tema en PrestaShop  &#8211; Parte I"},"content":{"rendered":"<p><a href=\"https:\/\/www.k3bone.com\/blog\/wp-content\/uploads\/2012\/09\/prestashop-tema.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-2510\" src=\"https:\/\/www.k3bone.com\/blog\/wp-content\/uploads\/2012\/09\/prestashop-tema.jpg\" alt=\"crear un tema en Prestashop\" width=\"940\" height=\"300\" \/><\/a><\/p>\n<p>Despu\u00e9s de darle un vistazo a la parte del\u00a0<a title=\"Crear un theme PrestaShop\" href=\"http:\/\/www.apprentalonline.es\/blog\/2012\/09\/crear-un-tema-en-prestashop-introduccion\/\" target=\"_blank\" rel=\"noopener\"><span><span>funcionamiento<\/span> de un tema en <span>PrestaShop<\/span>, su estructura o algunas pr\u00e1cticas recomendadas<\/span><\/a><span>, vamos a adentrarnos un poco m\u00e1s en como crear un tema en <span>PrestaShop<\/span> bas\u00e1ndonos en la copia del que se nos ofrece por defecto.<\/span><\/p>\n<p>El <strong><span>sistema de temas de <span>PrestaShop<\/span><\/span><\/strong>, tambi\u00e9n llamados <strong><span><span>themes<\/span><\/span><\/strong>, <strong><span><span>templates<\/span><\/span><\/strong> o <strong>plantillas<\/strong>, consta de un motor de plantillas llamada <a title=\"Smarty\" href=\"http:\/\/www.smarty.net\/\" target=\"_blank\" rel=\"noopener\"><span><span>Smarty<\/span><\/span><\/a><span> con la que se pueden crear plantillas con poco conocimiento y del que hablaremos un poco m\u00e1s a delante en esta serie de <span>tutoriales<\/span>.<\/span><\/p>\n<p>Hoy, hablaremos de los siguientes puntos:<\/p>\n<ul>\n<li><span>Copiar el tema por defecto de <strong><span>PrestaShop<\/span><\/strong><\/span><\/li>\n<li>Modificando el CSS<\/li>\n<li><span>Algunos cambios para crear\u00a0tema en <strong><span>PrestaShop<\/span> 1.5<\/strong><\/span><\/li>\n<li>Crear Captura y probar<\/li>\n<li><span>Estructura de un tema en <strong><span>PrestaShop<\/span><\/strong><\/span><\/li>\n<li>Integraci\u00f3n de un\u00a0tema en <strong>PrestaShop<\/strong><\/li>\n<\/ul>\n<p>Comencemos &#8230;.<\/p>\n<h2><span>Copiar el tema por defecto de <span>PrestaShop<\/span><\/span><\/h2>\n<p><span>Para no partir de cero y guiarnos un poco en la creaci\u00f3n del tema, vamos a copiar el\u00a0tema que viene por defecto en <strong><span>PrestaShop<\/span><\/strong> y le cambiamos el nombre:<\/span><\/p>\n<p><img decoding=\"async\" style=\"margin: 0px auto 10px; float: none;\" src=\"http:\/\/imageshack.us\/a\/img42\/1089\/nuevothemeprestashop.jpg\" alt=\"\" \/><\/p>\n<p>Para hacer la copia nos vamos a la ruta \/themes dentro de nuestro PrestaShop, copiamos la carpeta \u201c<strong><span><span>PrestaShop<\/span><\/span><\/strong>\u201d y le cambiamos el nombre por ejemplo a \u201c<strong><span><span>RentalOnline<\/span><\/span><\/strong>\u201d.<\/p>\n<h2>Modificando el CSS<\/h2>\n<p>Lo primero que vamos hacer, una vez hemos copiado el\u00a0tema por defecto, es modificar el archivo CSS que se encuentra en <em><strong><span>\/<span>theme<\/span>\/<span>RentalOnline<\/span>\/<span>css<\/span><\/span><\/strong><\/em>, concretamente abrimos el archivo <strong><span>\u201cglobal.<span>css<\/span>\u201d<\/span><\/strong>. Si lo que queremos es modificar el dise\u00f1o de la p\u00e1gina de mantenimiento, tendremos que ubicarnos en \u201c<strong><span><span>maintenance<\/span>.<span>css<\/span>\u201d<\/span><\/strong>.<\/p>\n<blockquote><p><span>Por supuesto se da por hecho que para crear un tema <span>PrestaShop<\/span> es fundamental tener conocimiento de CSS.<\/span><\/p><\/blockquote>\n<p>Para a\u00f1adir im\u00e1genes tenemos que hacerlo dentro de la ruta de nuestro tema y en concreto en la carpeta <strong><em><span>\/<span>img<\/span><\/span><\/em><\/strong>.<\/p>\n<h2><span>Algunos cambios para crear un tema en <span>PrestaShop<\/span> 1.5<\/span><\/h2>\n<p>Para <strong><span>crear un\u00a0tema en <span>PrestaShop<\/span> 1.5<\/span><\/strong><span> hay que dar un paso m\u00e1s para que os funcione, no basta con copiar la carpeta y seleccionar tu\u00a0tema en las preferencias.<\/span><\/p>\n<p>Ahora, dentro de <em>Preferencias\/Temas<\/em><span>, tenemos que a\u00f1adir nuestro\u00a0tema desde el bot\u00f3n que hay en la parte superior derecha \u00ab<\/span><strong><em>A\u00f1adir Nuevo<\/em><\/strong>\u00ab, como pod\u00e9is ver en la imagen:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" src=\"http:\/\/imageshack.us\/a\/img845\/8349\/nuevothemeprestashop15.png\" alt=\"\" width=\"640\" height=\"361\" \/><\/p>\n<p>Y en la ventana que se nos muestra, debemos indicar el nombre de la plantilla y el nombre del directorio, que en nuestro caso, ser\u00e1 para los dos campos: \u00ab<strong><span><span>RentalOnline<\/span><\/span><\/strong>\u00bb<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" src=\"http:\/\/imageshack.us\/a\/img193\/9691\/nuevothemeprestashop152.png\" alt=\"\" width=\"640\" height=\"301\" \/><\/p>\n<p><span>Hacemos <span>clic<\/span> en \u00ab<\/span><strong>Guardar<\/strong>\u00bb y ya nos aparecer\u00e1 nuestro tema para seleccionarlo (ver siguiente imagen):<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" src=\"http:\/\/imageshack.us\/a\/img341\/9099\/guardartema.png\" alt=\"\" width=\"640\" height=\"248\" \/><\/p>\n<h2>Crear Captura y probar<\/h2>\n<p><span>Para ayudar a visualizar el tema en el panel de administraci\u00f3n, es necesario que todos los\u00a0temas tengan un archivo <span>preview<\/span> en la carpeta ra\u00edz del tema con el siguiente nombre: <\/span><strong>preview.jpg <\/strong><span>con un tama\u00f1o de 100&#215;100 <span>p\u00edxeles<\/span>.<\/span><\/p>\n<p>Para verificar que hemos hecho las cosas bien, vamos a nuestro panel de administraci\u00f3n, accedemos a la pesta\u00f1a \u00ab<em>Temas<\/em><span>\u00bb y la <span>subpesta\u00f1a<\/span> \u00ab<\/span><em>Aspecto\/Preferencias<\/em><span>\u00ab, seleccionamos nuestro nuevo tema \u00ab<span>RentalOnline<\/span>\u00bb y Guardamos.<\/span><\/p>\n<p>Si todo ha ido bien, deber\u00edamos ver nuestra plantilla funcionando en la parte <em><span><span>frontend<\/span><\/span><\/em><span> de nuestra <span>web<\/span>.<\/span><\/p>\n<h2><span>Estructura de un tema en <span>PrestaShop<\/span><\/span><\/h2>\n<p><span>Hemos creado un tema sin cambiar absolutamente nada del c\u00f3digo aun, tan s\u00f3lo lo hemos preparado con unos archivos b\u00e1sicos copiados del\u00a0tema por defecto y ahora procederemos a modificar los que nos hagan falta para darle nuestro estilo.<\/span><\/p>\n<p>Para ello antes tenemos que conocer un poco la <strong><span>estructura de un\u00a0tema en <span>PrestaShop<\/span><\/span><\/strong>:<\/p>\n<table>\n<tbody>\n<tr>\n<th>Archivo o carpeta<\/th>\n<th>Descripci\u00f3n<\/th>\n<\/tr>\n<tr>\n<td><span><span>preview<\/span>.<span>jpg<\/span><\/span><\/td>\n<td><span>Esta imagen es utilizada como una vista preliminar en el selector \u00abTema\u00bb de la <span>sub<\/span>-pesta\u00f1a \u201cAspecto\u201d en la pesta\u00f1a \u00abPreferencias\u00bb. Esta imagen es obligatoria, ya que sin ella el tema no puede ser seleccionado. Obviamente, debe reflejar el dise\u00f1o del tema, no su ?? <span>logo<\/span> o el nombre del dise\u00f1ador&#8230;<\/span><\/td>\n<\/tr>\n<tr>\n<td>404.tpl<\/td>\n<td>Utilizado cuando la p\u00e1gina solicitada no es encontrada (error HTTP 404).<\/td>\n<\/tr>\n<tr>\n<td><span><span>address<\/span>.<span>tpl<\/span><\/span><\/td>\n<td>Utilizado al agregar o editar una direcci\u00f3n del cliente.<\/td>\n<\/tr>\n<tr>\n<td><span><span>addresses<\/span>.<span>tpl<\/span><\/span><\/td>\n<td>Utilizado al enumerar las direcciones de un cliente.<\/td>\n<\/tr>\n<tr>\n<td><span><span>authentication<\/span>.<span>tpl<\/span><\/span><\/td>\n<td>Utilizado al identificar a un usuario o crear una nueva cuenta de usuario.<\/td>\n<\/tr>\n<tr>\n<td><span><span>best<\/span>-sales.<span>tpl<\/span><\/span><\/td>\n<td>Utilizado para enumerar las mejores ventas.<\/td>\n<\/tr>\n<tr>\n<td><span><span>breadcrumb<\/span>.<span>tpl<\/span><\/span><\/td>\n<td>Utilizado para encontrar la ruta de navegaci\u00f3n.<\/td>\n<\/tr>\n<tr>\n<td><span><span>category<\/span>.<span>tpl<\/span><\/span><\/td>\n<td>Utilizado para enumerar todos los productos de una categor\u00eda espec\u00edfica.<\/td>\n<\/tr>\n<tr>\n<td><span><span>category<\/span>&#8211;<span>tree<\/span>&#8211;<span>branch<\/span>.<span>tpl<\/span><\/span><\/td>\n<td>Utilizado s\u00f3lo por el bloque de Categor\u00eda.<\/td>\n<\/tr>\n<tr>\n<td><span><span>category<\/span>&#8211;<span>cms<\/span>&#8211;<span>tree<\/span>&#8211;<span>branch<\/span>.<span>tpl<\/span><\/span><\/td>\n<td>&#8230;<\/td>\n<\/tr>\n<tr>\n<td><span><span>cms<\/span>.<span>tpl<\/span><\/span><\/td>\n<td><span>Utilizado para p\u00e1ginas informativas (<span>sub<\/span>-pesta\u00f1a CMS&gt;\u00bbHerramientas\u00bb).<\/span><\/td>\n<\/tr>\n<tr>\n<td>contact-form.tpl<\/td>\n<td>Utilizado por el formulario de contacto.<\/td>\n<\/tr>\n<tr>\n<td><span><span>discount<\/span>.<span>tpl<\/span><\/span><\/td>\n<td>Utilizado al enumerar todos los boletos de descuento para un solo cliente.<\/td>\n<\/tr>\n<tr>\n<td><span><span>errors<\/span>.<span>tpl<\/span><\/span><\/td>\n<td><span>Utilizado al mostrar errores. <span>Potencialmente<\/span> llamado por todas las p\u00e1ginas.<\/span><\/td>\n<\/tr>\n<tr>\n<td>footer.tpl<\/td>\n<td>Pie de p\u00e1gina.<\/td>\n<\/tr>\n<tr>\n<td><span><span>guest<\/span>&#8211;<span>tracking<\/span>.<span>tpl<\/span><\/span><\/td>\n<td>Utilizado cuando un visitante no tiene una cuenta conocida en el sitio, pero desea que su cuenta sea rastreada \u2013 por lo tanto necesita crear una cuenta para ingresar.<\/td>\n<\/tr>\n<tr>\n<td><span><span>header<\/span>.<span>tpl<\/span><\/span><\/td>\n<td>Encabezado de la p\u00e1gina<\/td>\n<\/tr>\n<tr>\n<td><span><span>history<\/span>.<span>tpl<\/span><\/span><\/td>\n<td>Utilizado cuando se enumera el historial de pedidos de un cliente.<\/td>\n<\/tr>\n<tr>\n<td><span><span>identity<\/span>.<span>tpl<\/span><\/span><\/td>\n<td>Utilizado cuando un cliente edita su informaci\u00f3n personal.<\/td>\n<\/tr>\n<tr>\n<td><span><span>index<\/span>.<span>php<\/span><\/span><\/td>\n<td><span>Archivo en blanco, los visitantes <span>pre<\/span> visualizar el contenido de la carpeta.<\/span><\/td>\n<\/tr>\n<tr>\n<td>index.tpl<\/td>\n<td>P\u00e1gina de bienvenida.<\/td>\n<\/tr>\n<tr>\n<td><span><span>maintenance<\/span>.<span>tpl<\/span><\/span><\/td>\n<td>Utilizado cuando el sitio se encuentra en modo de mantenimiento.<\/td>\n<\/tr>\n<tr>\n<td><span><span>manufacturer<\/span>.<span>tpl<\/span><\/span><\/td>\n<td>Utilizado al enumerar todos los productos de un solo fabricante.<\/td>\n<\/tr>\n<tr>\n<td><span><span>manufacturer<\/span>&#8211;<span>list<\/span>.<span>tpl<\/span><\/span><\/td>\n<td>Utilizado al enumerar todos los fabricantes.<\/td>\n<\/tr>\n<tr>\n<td><span><span>my<\/span>&#8211;<span>account<\/span>.<span>tpl<\/span><\/span><\/td>\n<td>P\u00e1gina de bienvenida para la cuenta de un cliente.<\/td>\n<\/tr>\n<tr>\n<td><span><span>new<\/span>&#8211;<span>products<\/span>.<span>tpl<\/span><\/span><\/td>\n<td><span>Utilizado al enumerar productos que fueron agregados de \u00faltimo al <span>carrito<\/span>.<\/span><\/td>\n<\/tr>\n<tr>\n<td>order-address.tpl<\/td>\n<td>Utilizado durante el proceso de compra: Paso 1, elecci\u00f3n de direcciones (entrega, facturaci\u00f3n).<\/td>\n<\/tr>\n<tr>\n<td><span><span>order<\/span>&#8211;<span>carrier<\/span>.<span>tpl<\/span><\/span><\/td>\n<td>Utilizado durante el proceso de compra: Paso 2, elecci\u00f3n m\u00e9todo de transporte.<\/td>\n<\/tr>\n<tr>\n<td><span><span>order<\/span>&#8211;<span>confirmation<\/span>.<span>tpl<\/span><\/span><\/td>\n<td>Utilizado durante el proceso de compra: \u00daltimo paso, confirmaci\u00f3n del pedido (previo pago).<\/td>\n<\/tr>\n<tr>\n<td><span><span>order<\/span>&#8211;<span>detail<\/span>.<span>tpl<\/span><\/span><\/td>\n<td>Utilizado para mostrar el contenido del pedido de un cliente.<\/td>\n<\/tr>\n<tr>\n<td><span><span>order<\/span>&#8211;<span>follow<\/span>.<span>tpl<\/span><\/span><\/td>\n<td>Utilizado cuando un cliente necesita solicitar una devoluci\u00f3n del producto.<\/td>\n<\/tr>\n<tr>\n<td><span><span>order<\/span>&#8211;<span>opc<\/span>.<span>tpl<\/span><\/span><\/td>\n<td>&#8230;<\/td>\n<\/tr>\n<tr>\n<td><span><span>order<\/span>&#8211;<span>opc<\/span>&#8211;<span>new<\/span>&#8211;<span>account<\/span>.<span>tpl<\/span><\/span><\/td>\n<td>&#8230;<\/td>\n<\/tr>\n<tr>\n<td><span><span>order<\/span>&#8211;<span>payment<\/span>.<span>tpl<\/span><\/span><\/td>\n<td>Utilizado durante el proceso de compra: Paso 3, elecci\u00f3n del modo de pago.<\/td>\n<\/tr>\n<tr>\n<td><span><span>order<\/span>&#8211;<span>return<\/span>.<span>tpl<\/span><\/span><\/td>\n<td>Utilizado para mostrar los detalles de la devoluci\u00f3n de un producto de un cliente.<\/td>\n<\/tr>\n<tr>\n<td><span><span>order<\/span>&#8211;<span>slip<\/span>.<span>tpl<\/span><\/span><\/td>\n<td>Utilizado para mostrar vales de cr\u00e9dito del cliente.<\/td>\n<\/tr>\n<tr>\n<td><span><span>order<\/span>&#8211;<span>steps<\/span>.<span>tpl<\/span><\/span><\/td>\n<td>Barra de progreso del proceso de compra.<\/td>\n<\/tr>\n<tr>\n<td><span><span>pagination<\/span>.<span>tpl<\/span><\/span><\/td>\n<td>Utilizado por todas las p\u00e1ginas que enumeran productos. Muestra el bot\u00f3n de paginaci\u00f3n, permiten saltar a la p\u00e1gina siguiente\/anterior de productos.<\/td>\n<\/tr>\n<tr>\n<td><span><span>password<\/span>.<span>tpl<\/span><\/span><\/td>\n<td>Utilizado cuando un cliente necesita cambiar su contrase\u00f1a.<\/td>\n<\/tr>\n<tr>\n<td><span><span>prices<\/span>&#8211;<span>drop<\/span>.<span>tpl<\/span><\/span><\/td>\n<td>Utilizado para enumerar todas las promociones actuales.<\/td>\n<\/tr>\n<tr>\n<td><span><span>product<\/span>.<span>tpl<\/span><\/span><\/td>\n<td>Utilizado para mostrar los detalles de tan s\u00f3lo un producto.<\/td>\n<\/tr>\n<tr>\n<td><span><span>product<\/span>&#8211;<span>list<\/span>.<span>tpl<\/span><\/span><\/td>\n<td>Utilizado por todas las p\u00e1ginas que enumeran productos. Muestra la lista actual de los productos.<\/td>\n<\/tr>\n<tr>\n<td><span><span>product<\/span>&#8211;<span>sort<\/span>.<span>tpl<\/span><\/span><\/td>\n<td>Utilizado por todas las p\u00e1ginas que enumeran productos. Muestra un men\u00fa que permite organizar y filtrar productos.<\/td>\n<\/tr>\n<tr>\n<td><span><span>products<\/span>&#8211;<span>comparison<\/span>.<span>tpl<\/span><\/span><\/td>\n<td>&#8230;<\/td>\n<\/tr>\n<tr>\n<td><span><span>scenes<\/span>.<span>tpl<\/span><\/span><\/td>\n<td>Utilizado para mostrar detalles de una escena dentro de una categor\u00eda de producto.<\/td>\n<\/tr>\n<tr>\n<td><span><span>search<\/span>.<span>tpl<\/span><\/span><\/td>\n<td>Utilizado para enumerar resultados de una consulta de b\u00fasqueda.<\/td>\n<\/tr>\n<tr>\n<td><span><span>shopping<\/span>&#8211;<span>cart<\/span>.<span>tpl<\/span><\/span><\/td>\n<td><span>Utilizado para enumerar productos del <span>carrito<\/span> de un cliente.<\/span><\/td>\n<\/tr>\n<tr>\n<td>shopping-cart-product-line.tpl<\/td>\n<td><span>Utilizado para mostrar una <span>s\u00f3la<\/span> hilera del <span>carrito<\/span>.<\/span><\/td>\n<\/tr>\n<tr>\n<td>sitemap.tpl<\/td>\n<td>Utilizado para mostrar el mapa de sitio.<\/td>\n<\/tr>\n<tr>\n<td><span><span>store<\/span>_<span>infos<\/span>.<span>tpl<\/span><\/span><\/td>\n<td>&#8230;<\/td>\n<\/tr>\n<tr>\n<td><span><span>stores<\/span>.<span>tpl<\/span><\/span><\/td>\n<td>&#8230;<\/td>\n<\/tr>\n<tr>\n<td><span><span>supplier<\/span>.<span>tpl<\/span><\/span><\/td>\n<td>Utilizado para enumerar todos los productos de un s\u00f3lo proveedor.<\/td>\n<\/tr>\n<tr>\n<td><span><span>supplier<\/span>&#8211;<span>list<\/span>.<span>tpl<\/span><\/span><\/td>\n<td>Utilizado para enumerar todos los proveedores.<\/td>\n<\/tr>\n<tr>\n<td><span><span>thickbox<\/span>.<span>tpl<\/span><\/span><\/td>\n<td>Utilizado para acercar la imagen de un producto.<\/td>\n<\/tr>\n<tr>\n<td>\/cache<\/td>\n<td>&#8230;<\/td>\n<\/tr>\n<tr>\n<td><span>\/<span>css<\/span><\/span><\/td>\n<td>Contiene todos los archivos de hojas de estilo para el tema. El archivo <tt><span>global.<span>css<\/span><\/span><\/tt> se dedica la dise\u00f1o de casi todo el sitio. A menos que sepa exactamente lo que est\u00e1 haciendo, no manipule estos archivos.<\/td>\n<\/tr>\n<tr>\n<td><span>\/<span>img<\/span><\/span><\/td>\n<td>Contiene todas las im\u00e1genes del tema. Debe remplazar estas im\u00e1genes con sus creaciones respectivas. Si no sabe qu\u00e9 hacer con ellos, mantenga los archivos originales.<\/td>\n<\/tr>\n<tr>\n<td><span>\/<span>js<\/span><\/span><\/td>\n<td>Contiene todos los archivos del tema JavaScript. A menos que sepa exactamente lo que est\u00e1 haciendo, no debe manipular estos archivos.<\/td>\n<\/tr>\n<tr>\n<td><span>\/<span>lang<\/span><\/span><\/td>\n<td><span>Contiene todos los archivos de traducci\u00f3n. Estos son generados por la herramienta de traducci\u00f3n de <span>back<\/span>&#8211;<span>office<\/span> y no se deben editar <span>directamente<\/span>. Si la traducci\u00f3n necesita edici\u00f3n, <span>trasl\u00e1dese<\/span> a la secci\u00f3n \u201cModificar traducciones\u201d de la <span>sub<\/span>-pesta\u00f1a \u201cTraducciones\u201d en la pesta\u00f1a \u00abHerramientas\u00bb del <span>back<\/span>&#8211;<span>office<\/span> y seleccione \u00abTraducciones de <span>front<\/span> <span>office<\/span>\u00ab.<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h2>Integraci\u00f3n de un tema en PrestaShop<\/h2>\n<p><span>Para poder modificar o crear un\u00a0tema en <span>PrestaShop<\/span> hay que saber ubicar los m\u00f3dulos y <span>hooks<\/span>, as\u00ed que primero vamos a explicar que es cada cosa y despu\u00e9s veremos donde se ubican.<\/span><\/p>\n<p><strong>Hooks<\/strong><span>: Son parte de c\u00f3digo que te permite crear m\u00f3dulos para interactuar con los <span>displays<\/span> o eventos. Estos <span>Hooks<\/span>, que en realidad con contenedores,\u00a0permiten recuperar eventos o cambiar la pantalla.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone\" src=\"http:\/\/imageshack.us\/a\/img534\/534\/hooks.png\" alt=\"\" width=\"640\" height=\"487\" \/><\/p>\n<p><span>Para usar un <span>hook<\/span>, hay que ir a la clase del m\u00f3dulo y crear un m\u00e9todo est\u00e1tico p\u00fablico a partir de la palabra \u00ab<span>hook<\/span>\u00bb seguido del nombre del \u00ab<span>hook<\/span>\u00ab, por ejemplo \u00ab<\/span><strong>hookRentalOnline<\/strong>\u00ab.<\/p>\n<p><span>Hay dos tipos de <span>hooks<\/span>, <\/span><span style=\"text-decoration: underline;\"><em>Hooks de Acci\u00f3n<\/em><\/span><span> (por ejemplo enviar un <span>mail<\/span> cuando el cliente crea un usuario) o <\/span><span style=\"text-decoration: underline;\"><em>Hooks de Vista<\/em><\/span> (por ejemplo, para mostrar un m\u00f3dulo en una columna).<\/p>\n<p><strong>M\u00f3dulos<\/strong><span>: Los m\u00f3dulos nos permiten\u00a0a\u00f1adir <span>funcionalidades<\/span> a nuestra tienda los cuales podr\u00e1n ser colocados en contenedores de nuestra p\u00e1gina <span>web<\/span>, los conocidos <span>Hooks<\/span>.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone\" src=\"http:\/\/imageshack.us\/a\/img827\/6493\/modulos.png\" alt=\"\" width=\"640\" height=\"110\" \/><\/p>\n<p>Existen distinos tipos de m\u00f3dulos:<\/p>\n<ul>\n<li>Forma de Pago<\/li>\n<li>Columna Izquierda<\/li>\n<li>Columna Derecha<\/li>\n<li>P\u00e1gina Principal<\/li>\n<li>Cabecera<\/li>\n<li>Pi\u00e9 de P\u00e1gina<\/li>\n<li>Pi\u00e9 del Producto<\/li>\n<li>Factura<\/li>\n<\/ul>\n<p><span>En la siguiente parte del <span>tutorial<\/span>, empezaremos a modificar el tema para obtener el estilo que queremos conseguir.<\/span><\/p>\n<p>\u00cdndice de nuestro monogr\u00e1fico sobre <strong>Crear un tema en PrestaShop<\/strong>:<\/p>\n<ol>\n<li><a title=\"Crear un tema en PrestaShop \u2013 Introducci\u00f3n\" href=\"http:\/\/www.apprentalonline.es\/blog\/2012\/09\/crear-un-tema-en-prestashop-introduccion\/\" target=\"_blank\" rel=\"noopener\">Crear un tema en PrestaShop &#8211; Introducci\u00f3n<\/a><\/li>\n<li><a title=\"Crear un tema en PrestaShop  - Parte I\" href=\"http:\/\/www.apprentalonline.es\/blog\/2012\/09\/crear-un-tema-en-prestashop-parte-1\" target=\"_blank\" rel=\"noopener\">Crear un tema en PrestaShop\u00a0 &#8211; Parte I<\/a><\/li>\n<\/ol>\n<p><strong>Informaci\u00f3n Relacionada: <\/strong><a title=\"Tu tienda online con Prestashop desde 5,45\u20ac\/mes!\" href=\"http:\/\/www.apprentalonline.es\/prestashop.php\" target=\"_blank\" rel=\"noopener\"><strong><\/strong><span>Tu tienda <span>online<\/span> con <span>Prestashop<\/span> desde 5,45\u20ac\/mes!<\/span><\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Despu\u00e9s de darle un vistazo a la parte del\u00a0funcionamiento de un tema en PrestaShop, su estructura o algunas pr\u00e1cticas recomendadas, vamos a adentrarnos un poco m\u00e1s en como crear un tema en PrestaShop bas\u00e1ndonos en la copia del que se nos ofrece por defecto. El sistema de temas de PrestaShop, tambi\u00e9n llamados themes, templates o [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":2510,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[42,34,36],"tags":[77,60,58,29,205,201,202,30],"class_list":["post-2565","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-prestashop","category-programacion-de-sitios-web","category-web-apps","tag-comercio-electronico-2","tag-customizacion","tag-plantilla","tag-prestashop","tag-prestashop-1-5","tag-tema","tag-theme","tag-tiendas-online"],"featured_image_src":{"landsacpe":false,"list":false,"medium":false,"full":false},"_links":{"self":[{"href":"https:\/\/www.k3bone.com\/blog\/wp-json\/wp\/v2\/posts\/2565","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.k3bone.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.k3bone.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.k3bone.com\/blog\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.k3bone.com\/blog\/wp-json\/wp\/v2\/comments?post=2565"}],"version-history":[{"count":0,"href":"https:\/\/www.k3bone.com\/blog\/wp-json\/wp\/v2\/posts\/2565\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.k3bone.com\/blog\/wp-json\/wp\/v2\/media?parent=2565"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.k3bone.com\/blog\/wp-json\/wp\/v2\/categories?post=2565"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.k3bone.com\/blog\/wp-json\/wp\/v2\/tags?post=2565"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}