Explicación de la temática de PrestaShop

Podría decirse que Prestashop es la solución de comercio electrónico de código abierto número 1 en la web. Ofrece innumerables funciones, complementos y temas, pero su falta de buena documentación ha dado a los recién llegados la percepción de que es inaccesible. En este artículo, lo guiaré en el proceso de creación de su propio tema personalizado, así como en la creación y personalización de los módulos de Prestashop..

Prestashop se ejecuta en PHP y mySQL, y se basa en el motor de Smarty para sus "Plantillas" (páginas). No te preocupes, si no estás familiarizado con Smarty. Básicamente, lo utilizas para crear páginas con secciones de marcador de posición y Prestashop rellena la información cuando se carga la página. Es fácil pasar a la transición, si has usado algo como manillares o plantillas de subrayado.

Voy a asumir que ya has descargado e instalado Prestashop. Si no, puedes descargar la última versión; tienen un video instructivo que puedes ver para aprender cómo configurarlo.


Registro de su tema

Su sitio debería tener un aspecto similar al de la siguiente imagen, si configura Prestashop con la configuración predeterminada.

El proceso de crear su propio tema comienza con la creación de una carpeta. En el explorador de archivos que elija, navegue hasta el directorio raíz de Prestashop y encontrará una carpeta llamada temas. Dentro de temas carpeta, cree un nuevo directorio con el nombre de su tema. Voy a llamar mía, "Demo".

Si agrega una imagen de su plantilla a esta carpeta y la nombra preview.jpg, Prestashop debería encontrar y agregar automáticamente su plantilla al back-end. Si no lo hace, o si prefiere agregar la imagen más tarde, puede agregar el tema manualmente. Para ello, ve a la Temas opción bajo el Preferencias menú, y haga clic en Añadir nuevo en la cima. Una vez completado, verá su tema en el centro de la página. Habilítelo simplemente haciendo clic en él y presionando la tecla Salvar botón.

Agrega tu (s) logo (s) mientras estás aquí; Puede encontrar esta opción en la parte inferior de la página. Es posible que deba aumentar el límite de carga de archivos en Prestashop (o incluso en el archivo de configuración de PHP) si tiene una imagen muy grande..


Curso intensivo en Prestashop

Smarty es un motor de plantillas para PHP, que facilita la separación de la presentación de la lógica de la aplicación..

Como mencioné anteriormente, Prestashop usa Smarty para generar las páginas; Así, todos los archivos de plantilla tienen una .tpl extensión. Hay muchas páginas que debes crear para tener un tema completo; tome un momento y vea la lista de archivos.

En última instancia, la funcionalidad de su tema determina qué páginas debe implementar. Estas páginas se basan en los archivos en la carpeta de controladores, y puede anular los controladores predeterminados o agregar sus propios controladores personalizados para que se ajusten a su tema. Pero eso está más allá del alcance de este artículo. Entre los controladores en controladores \ directorio frontal Son dos archivos de plantilla que se cargan automáticamente: header.tpl y footer.tpl.

El contenido principal de su sitio será cargado por módulos con la ayuda de "Hooks".

Hay dos tipos de ganchos en Prestashop: ganchos de acción y de pantalla. Ambos funcionan de la misma manera, pero difieren en su propósito. Un gancho básicamente le da al usuario un medio para adjuntar un código personalizado a una fuente externa. En el caso de un gancho de acción, cualquier código adjunto al gancho se ejecuta cuando se llama al gancho. Por ejemplo, Prestashop viene con un gancho predeterminado llamado acciónProductoAgregar que se ejecuta al agregar un producto. Por lo tanto, puede adjuntar un módulo a este gancho si desea enviar un boletín por correo electrónico cada vez que se agrega un nuevo producto..

Un gancho de visualización es muy similar, pero en lugar de conectar una función a un evento, se conecta una función a un lugar específico en la plantilla. En otras palabras, Prestashop llamará a su módulo por un punto específico (por ejemplo, barra lateral derecha), y todo lo que devuelva se colocará en la página. Puede ver todos los ganchos registrados actualmente yendo a la Módulos> Posiciones página en la parte de atrás del administrador.

Personalmente, me parece mejor comenzar con un tema HTML estándar. Esto no es un requisito, pero lo recomiendo por varias razones:

  • Le permite ver inmediatamente los enlaces que necesita y cómo dividir su contenido.
  • Le proporciona una dirección clara de los archivos de plantilla que debe crear, así como una idea de lo que será el contenido estático y lo que debería ser un módulo. También te permite añadir preview.jpg archivar de inmediato.

La siguiente imagen es una imagen de mi plantilla HTML de ejemplo:

Y aquí puedes ver cómo lo dividiré en ganchos Prestashop:


Creación de los parciales de la plantilla

Ahora vamos a crear el header.tpl archiva en tu directorio de temas y rellénalo con el encabezado de tus temas. Esto incluye el doctype, Área, y todo lo que desee que aparezca en todas las páginas del cuerpo. Aquí hay un ejemplo header.tpl expediente:

   Sitio prestashop  if isset ($ css_files) foreach from = $ css_files key = css_uri item = media  / foreach / if if isset ($ js_files) foreach from = $ js_files item = js_uri  / foreach / if   
$ HOOK_TOP
Imagen de cabecera

Hay algunas cosas que señalar en este código. He prefijado el nombre del archivo CSS con $ css_dir. Esta es una variable de Smarty que apunta a una carpeta, llamada css dentro del directorio de tu tema, donde todos tus archivos CSS deberían ir.

La siguiente línea usa Smarty para cada loop para agregar todos los archivos CSS de los módulos habilitados. Vale la pena señalar que, si creas un archivo CSS llamado global.css en el css directorio, el bucle agrega automáticamente ese archivo a la página.

Unas líneas más tarde, otra. para cada bucle procesa los archivos JavaScript en el js Directorio y los agrega a la página. En la última sección, abro el elemento del cuerpo y defino un gancho para el módulo del menú. Por último, termino mostrando el logo del sitio..

A menos que sea un veterano de Prestashop, probablemente se esté preguntando de dónde voy a encontrar estas variables. Como dije anteriormente, desafortunadamente no hay documentación de Prestashop, pero sí proporcionan una herramienta de depuración que puede iniciar agregando depurar a cualquiera de los archivos de plantilla. Cuando abra la página correspondiente en su navegador, aparecerá una ventana emergente que contiene una lista de todas las variables para esa plantilla específica. Esto le permite identificar rápidamente (con ctrl / cmd-F ayuda) qué variables están definidas, así como sus valores..

Ahora vamos a crear el footer.tpl modelo. Voy a mantener esto simple y simplemente cerrar el y elementos, pero siéntase libre de agregar cualquier cosa que desee mostrar en la parte inferior de cada página. Esto puede incluir cualquier cosa, desde enlaces a JavaScript personalizado; No hay límites a lo que podrías poner aquí..

El último archivo que quiero implementar es el index.tpl expediente. Este es el archivo de "página de inicio" que se muestra cuando un usuario accede a la raíz de su sitio. En el tema predeterminado de Prestashop, las barras laterales se cargan en el header.tpl archivo, y la plantilla de índice real solo contiene una llamada a la displayHome gancho. Esto está bien si desea que las barras laterales estén en todas las páginas, pero nuevamente, me gustaría enfatizar que los ganchos se implementan a su propia conveniencia. No tiene que implementar ningún gancho, y puede agregar sus propios ganchos personalizados si necesita más que la funcionalidad estándar.

Al crear su página de índice, debe decidir qué partes son estáticas y qué partes deben cargarse dinámicamente a través de módulos. Quité el menú principal del encabezado porque eso es algo que quería controlar con un módulo. Así que coloqué un gancho donde quería el menú y puedo crear un módulo que se adjunte a este gancho. Puede cargar varios elementos con el mismo gancho. No hay razón para agregar varios enganches juntos, y puede administrar el orden de los módulos de un enganche en el back-end bajo Módulos> Posiciones.

Localización

La última característica específica de Prestashop que debe considerar son las herramientas de localización de Prestashop. Prestashop le permite traducir fácilmente su sitio a múltiples idiomas usando una función Smarty, llamada l. Lo usas reemplazando una cadena estándar con la l Función, pasando la cadena como parámetro. Aquí hay un ejemplo de una

Elemento, tanto con y sin traducción:

* Sin herramienta de traducción * 

Suscribete a nosotros!

* Con herramienta de traducción *

l s = "¡Suscríbete a nosotros!"

Incluso si actualmente no planea traducir su sitio, es un pequeño cambio que le permite traducir fácilmente sus páginas si más tarde decide hacerlo. Una vez que realice estos cambios en sus plantillas, puede ir al Localización> Traducciones página en el back-end y haga clic en la nacionalidad que desea traducir.

Agregar idiomas no predeterminados es simple, y lo cubro en la segunda sección de la página (apropiadamente llamado "Agregar / Actualizar un idioma").

Otro beneficio del uso de la localización de Prestashop es la lista de frases que le ofrece Prestashop. En lugar de recorrer todo el sitio, puede simplemente entregar la lista de frases a un hablante nativo de su idioma deseado e ingresar rápidamente los valores, sin tocar nunca su tema..

Ahora ingrese el HTML específico de su página de inicio al index.tpl, y asegúrese de suministrar los ganchos que desea utilizar. Recuerde usar el depurar Función Smarty, si necesita ver las variables están disponibles para su plantilla.

Ahora puede abrir un navegador y navegar a la raíz de su sitio. El mío se parece a esto:

Puede que no parezca mucho, pero ha creado la capa exterior de su plantilla. Si su plantilla parece un montón de objetos, es probable que tenga muchos módulos instalados. Por defecto, Prestashop habilita muchos módulos; Recomiendo ir a la página de módulos y desinstalar todos los módulos. No se preocupe por perderlos, ya que puede reinstalarlos haciendo clic en el botón de instalación junto al módulo deseado.

Al crear un tema de Prestashop, notará que los módulos son responsables de aproximadamente el 90% del contenido. Hay módulos que muestran los productos, módulos para el carrito de compras, etc. Una parte importante de ser un programador de Prestashop incluye, al menos, un conocimiento práctico sobre cómo personalizar el aspecto de los módulos..


Módulos

Los módulos en Prestashop no son lo mismo que los widgets de Wordpress.

Los módulos en Prestashop no son lo mismo que los widgets de Wordpress; Los módulos de Prestashop solo se pueden conectar a los ganchos que el creador del módulo especifique. Por ejemplo, si crea un módulo que muestra un bloque "suscribirse al boletín de noticias" y lo configura para ir en cualquiera de las barras laterales, no puede colocarlo en el área del pie de página..

Esto puede parecer engorroso, pero hay una muy buena razón para esto: cuando crea un módulo, proporciona una función separada para cada uno de los ganchos que desea usar. Por ejemplo, si un módulo de menú puede comportarse de manera diferente según su ubicación en la plantilla.

Esto te da mucho espacio para personalizar un módulo..

Esta práctica tiene mucho más sentido si consideras otro tipo de ganchos: ganchos de acción. Obviamente, no desea que la función que se ejecuta cuando agrega un nuevo producto se ejecute cuando un usuario le compre un producto. Lo mismo se aplica para mostrar ganchos; Cada gancho tiene su propia función, lo que te permite hacer lo que quieras con él..

Al crear un tema, hay dos formas de agregar módulos. La primera opción es crear tu propio módulo. Esta es la opción más tediosa, pero obtienes mucho más control en el producto final. Por otro lado, hay más de 2000 módulos en el catálogo de módulos oficiales (y aún más en sitios de terceros). Las posibilidades son buenas, puedes encontrar algo que se adapte a tus necesidades.

Su segunda opción es instalar un módulo ya hecho; Prestashop le da la opción de personalizar su apariencia anulando los archivos de plantilla. Esta es la mejor opción, si realmente no desea comenzar a codificar su propio módulo, y le permite concentrarse en el lado gráfico. Voy a cubrir ambas opciones; así que vamos a empezar con el primero.


Creando tu propio módulo

Construiremos un módulo que muestre una cantidad configurable de productos en la página de inicio. Esto se basa libremente en el módulo de acciones, pero mi módulo irá un poco más a las clases subyacentes de Prestashop para, con suerte, darle una visión más profunda del proceso..

Primero, crea una carpeta en el módulos directorio, y luego crear un archivo PHP dentro de él con el mismo nombre que la carpeta. Cuando abres el módulos En esta carpeta, verá una convención de nomenclatura, donde todos los módulos que muestran únicamente el contenido comienzan con la palabra "bloque". Esto, por supuesto, no es un requisito, pero tiene sentido. Nombraré mi carpeta blockdisplayproducts, Y dentro de él crearé el archivo PHP con el mismo nombre..

Abre el archivo PHP y define la clase de módulos:

name = 'blockdisplayproducts'; $ this-> tab = 'front_office_features'; $ this-> version = 1.0; $ this-> author = 'Gabriel Manricks'; $ this-> need_instance = 0; padre :: __ construir (); $ this-> displayName = $ this-> l ('Display Products Module'); $ this-> description = $ this-> l ('Muestra una cantidad configurable de productos para la página de inicio.'); 

Los módulos de Prestashop están orientados a objetos; por lo tanto, tienes que crear una clase para tu módulo. El nombre de su clase debe ser la versión en camello del nombre de su carpeta..

En la parte superior del archivo, puede ver un Si declaración. Esto asegura que el archivo no se cargue directamente a través del navegador. A continuación, su clase debe subclasificar directamente la clase Módulo o subclase un difunto de la clase Módulo.

Dentro del constructor, configuramos las propiedades del módulo. Prestashop utiliza esta información para mostrar en el back-end:

  • nombre es un "nombre de código" único, y no es el nombre real que se muestra en el back-end.
  • lengüeta le dice a Prestashop la categoría del módulo. Puede encontrar una lista completa de categorías abriendo el Controladores \ Admin \ AdminModuleController.php expediente.
  • autor, nombre y versión son autoexplicativos.
  • necesidades_instancia le dice a Prestashop que cree una instancia de su variable al acceder a la página de módulos. Por lo general, esto no es obligatorio, pero si su módulo necesita mostrar un mensaje o registrar algo cuando la página de módulos está activa, entonces debería cambiar esto a un 1.

Las dos últimas líneas configuran el nombre de visualización y la descripción reales para su módulo, y utilizan el mismo método de localización para poder traducirlos a diferentes idiomas. Estas dos líneas deben ir después de la inicialización de los padres según el orden preferido de Prestashop utilizado por sus módulos oficiales.

El siguiente paso es anular el método de instalación. Aquí es donde podemos especificar los enlaces que necesitamos, así como las opciones predeterminadas para nuestro módulo. Si falla alguna de las configuraciones, entonces la instalación fallará.

Este módulo está destinado a la página de inicio, así que lo conectaré al enlace de inicio. También queremos agregar un archivo CSS al encabezado, lo que significa que también debemos agregar el gancho del encabezado. Si vas al back-end debajo de la Módulos> Posiciones En la página, puede encontrar los nombres técnicos de los ganchos (que es lo que especificaremos aquí).

Justo después de la __construir() función, agregue lo siguiente:

función pública install () if (parent :: install () == false || $ this-> registerHook ('displayHome') == false || $ this-> registerHook ('displayHeader') == false || Configuración :: updateValue ('DP_Number_of_Products', 6) == false) devuelve false; devuelve verdadero 

Esto agrega los dos ganchos y establece el número predeterminado de productos en seis. Debe asignar a la propiedad un nombre único para que otros módulos no interfieran con sus valores. Un enfoque simple agrega el nombre o las iniciales de su módulo al principio del nombre.

Ahora puede instalar su módulo en la página de módulos, y debería instalarse correctamente si todo está configurado correctamente. Vaya a la página de posiciones, y se mostrará como se registró debajo de los dos ganchos.

Implementar ganchos es bastante simple; cree una función pública con la palabra "gancho" seguida del nombre del gancho. Vamos a empezar con el gancho de cabecera. Solo queremos que agregue un archivo CSS a nuestro tema. Aquí está la función completa:

función pública hookdisplayHeader ($ params) $ this-> context-> controller-> addCSS (($ this -> _ path). 'blockdisplayproducts.css', 'all'); 

Cree ese archivo CSS en su directorio de temas, y su plantilla debe cargarlo en el encabezado.

El siguiente gancho es un poco más complicado. Debería recuperar un cierto número de productos de la base de datos y cargarlos en un archivo de plantilla. La función para recuperar los productos no devuelve las imágenes o enlaces de los productos, por lo que tenemos que llamar a algunas funciones diferentes y 'construir' una variedad de productos. Aquí está la función completa:

función pública hookdisplayHome ($ params) $ languageId = (int) ($ params ['cookie'] -> id_lang); $ numberOfProducts = (int) (Configuration :: get ("DP_Number_of_Products")); $ productsData = Product :: getProducts ($ languageId, 0, $ numberOfProducts, "id_product", "ASC"); if (! $ productsData) devuelve "error"; $ productos = array (); $ link = new Link (null, "http: //"); foreach ($ productsData as $ product) $ tmp = Product :: getCover ($ product ['id_product']); array_push ($ products, array ('name' => $ product ['name'], 'author' => $ product ['manufacturer_name'], 'desc' => $ product ['description_short'], 'price' = > $ product ['price'], 'link' => $ link-> getProductLink (nuevo producto ($ product ['id_product'])), 'image' => $ link-> getImageLink ($ product ['link_rewrite' ], $ tmp ['id_image'])));  $ this-> smarty-> assign (array ('products' => $ products)); devuelve $ this-> display (__ FILE__, 'blockdisplayproducts.tpl'); 

Comienza por obtener la cantidad de productos para mostrar y la identificación de idioma del usuario. Luego hacemos una llamada para obtener el número asignado de productos a partir del primer producto registrado. Después de eso, nos aseguramos de que no haya problemas para que los productos salgan si existía. El siguiente bloque es la parte que mencioné anteriormente, que crea una matriz con todas las propiedades que necesitaremos al mostrar el elemento. Esto incluye la imagen y el enlace que no se devolvieron con el resto de los datos del producto. La última sección agrega la matriz de productos a Smarty y carga el archivo de plantilla de su elección. Nombré el archivo de plantilla y los archivos CSS con el mismo nombre que el módulo, pero esto no es un requisito; puedes nombrarlo como desees.

Si abres tu sitio ahora mismo, solo verás un mensaje, señalando "No se ha encontrado ninguna plantilla para el módulo blockdisplayproducts."Así que vamos a crear el archivo de plantilla dentro del directorio de nuestro módulo, nombrándolo de la misma manera que acaba de especificar en la función de enlace. Esta parte realmente depende de su diseño de temas específicos, pero aquí está mi archivo de plantilla:

si $ productos! == falso 

l s = "NUESTROS LIBROS" mod = "blockdisplayproducts"

foreach from = $ products item = product name = productLoop
$ product.name | strip_tags | escape: html: 'UTF-8'
$ product.author | upper | strip_tags | escape: html: 'UTF-8'
$ product.name | strip_tags | escape: html: 'UTF-8'
$ product.desc
$ $ product.price | string_format: "%. 2f"
l s = "View" mod = "blockdisplayproducts"
/ foreach / if

Dado que Prestashop utiliza plantillas de Smarty, tiene una serie de funciones de ayuda que puede utilizar al mostrar sus datos. Comenzamos con un Si función para asegurarse de que la matriz de productos está bien. Si es así, entramos en un para loop, generando el HTML especificado para cada uno. Estamos utilizando las funciones de ayuda incorporadas de Smarty para eliminar las etiquetas HTML y convertir el nombre de los autores en mayúsculas, y estamos utilizando otro método para dar formato al precio al número deseado de lugares decimales. Para ver una lista completa de modificadores, vea aquí.

Además, tenga en cuenta que al traducir cadenas aquí, debe ingresar el nombre de su módulo. Esto se debe a que la traducción no está vinculada a un tema, sino al propio módulo. Por otro lado, la l la función es específica de la plantilla; Por lo tanto, para que pueda encontrar su archivo de traducción, se requiere el nombre del módulo..

Ahora puede ver su sitio en el navegador; Si ha agregado algún producto, debería aparecer en la página de inicio ahora..

Ahora, nuestro módulo es completamente funcional, pero no hay manera de ajustar el número de productos devueltos. Para hacer esto, necesitamos agregar una función, llamada getContents. Si su módulo tiene esta función, entonces Prestashop agregará automáticamente un botón de configuración en la página de "módulos". Todo lo devuelto por esta función se mostrará en la página de configuración. Para comenzar, agregue la función a la clase del módulo y rellénela con lo siguiente:

función pública getContent () $ html = '
'; $ html. = '

'. $ esto-> displayName. 'Configuraciones

'; $ html. = '
'; $ html. = ". $ this-> l ('Número de productos para mostrar'). ': '; $ html. = ' '; $ html. = '
'; $ html. = '
'; devuelve $ html;

Esta función simplemente construye el HTML necesario para mostrar un formulario con un cuadro de número y el botón Guardar. De nuevo, estoy usando el $ este-> l () Método para que pueda traducir el módulo a otros idiomas en el futuro, en caso de que necesite hacerlo. He utilizado un campo numérico en el formulario HTML, pero tenga cuidado si está haciendo un módulo comercial. Todavía no es compatible con todos los navegadores. Dicho esto, si es para su uso personal, entonces siéntase libre!

La única otra cosa que podría parecer críptica es la Herramientas :: SafeOutput () Función que estamos invocando en la URL. Sinceramente, no estoy 100% seguro de lo importante que es esta llamada, pero lo que está haciendo es eliminar todas las etiquetas HTML y convertir los caracteres necesarios en entidades html..

Luego, vaya a la página de módulos y haga clic en el botón de configuración en su módulo. Serás recibido con el formulario que acabamos de hacer..

Puede ajustar el número y presionar guardar, pero aún no hemos escrito en la función de guardar, por lo que seguirá reiniciando a 6 (el valor que ya está guardado).

De vuelta en la función, agregue el siguiente código al principio de la función:

if (Tools :: isSubmit ('numProds')) Configuration :: updateValue ('DP_Number_of_Products', (int) (Tools :: getValue ('numProds'))); 

Esto verifica si el valor fue enviado, es decir, si el valor numProds existe como un $ _GET o $ _POST variable. Luego actualizamos la propiedad donde almacenamos el valor. El método Herramientas :: getValue acepta el nombre de un campo de formulario y, opcionalmente, una segunda cadena de lo que se devolverá si no se encontró el campo de formulario; a continuación, devuelve una cadena con formato con el valor que se envió. Es importante poner esto antes de generar el formulario HTML; de lo contrario, el formulario contendrá los valores antiguos como se adjuntan a los actualizados.

Con ese bit final de código, hemos completado el módulo. Lo único que debe hacer es agregar un ícono GIF 16x16 a su carpeta de módulos.

Ahora estamos listos para pasar a la siguiente opción para integrar módulos con su tema.


Anulación de módulos existentes

La segunda opción es usar un módulo existente y replantearlo de acuerdo a tus gustos. Esta opción es considerablemente más sencilla ya que solo necesita volver a crear los archivos ".tpl" del módulo.

A mi tema de ejemplo todavía le falta un menú de navegación superior, así que personalicemos ese módulo. Para comenzar, habilite / instale el módulo en la página de 'módulos', llamado 'Menú horizontal superior'. El siguiente paso es crear una carpeta en su directorio de temas, llamada módulos. Dentro de él, cree otra carpeta con el nombre real del módulo; en nuestro caso, esto es blocktopmenu. Al cargar los archivos tpl de un módulo, Prestashop primero verifica si hay un archivo en el directorio de anulación del módulo de temas activados con el mismo nombre. Si es así, cargará la versión de los temas en lugar de la versión original. El archivo tpl del módulo de menú se llama blocktopmenu.tpl, así que tienes que crear un archivo con el mismo nombre en la nueva carpeta que acabamos de crear.

La forma más fácil de averiguar qué tipo de datos ofrece un módulo es echar un vistazo a su archivo tpl y ver qué datos utilizan, o cargar la información. depurar herramienta. Para acelerar las cosas, puedo decirles que este complemento solo ofrece una única variable, llamada MENÚ, que contiene una cadena con todos los elementos del menú combinados dentro de

  • etiquetas Ahora, por sí solo, esto no le da mucho margen de maniobra, cuando se trata de personalizar la apariencia. Pero, ¿qué pasa si desea agregar algo más además de un li etiqueta para cada elemento? Bueno, por suerte, Smarty al rescate! Este no es un artículo sobre Smarty, así que mantendré esta parte corta, pero, básicamente, usaremos una combinación de la función de reemplazar cadenas y la función de explosión de PHP para aislar los elementos individuales. A continuación, podemos construir el código HTML con un para cada lazo. Aquí está mi archivo de plantilla completado para este módulo:
      asignar var = valor tmpMenu = $ MENÚ | reemplazar: '
    • ': " asignar var = valor de los elementos ="
    • "| explode: $ tmpMenu foreach $ items as $ item if! $ item @ último
    • $ item
    • si ($ item @ index + 2)! = $ item @ total
      logo
      / if / if / foreach

    Ahora, este es un montón de código nuevo, así que lo revisaré línea por línea. Empieza abriendo div y ul etiquetas Estos son puramente por razones estéticas. A continuación, utilizamos un comando Smarty, llamado asignar. Esto hace exactamente lo que suena: asigna un valor a una variable. En la primera declaración de asignación, estamos eliminando la apertura li etiquetas, y, en el segundo, explotamos la cadena por el cierre li etiqueta. El resultado es una matriz que contiene una lista de enlaces de elementos de menú. Luego nos movemos hacia un para cada bucle, donde mostramos cada elemento dentro

  • Etiquetas: excepto, esta vez, hemos agregado una imagen de icono después de cada elemento del menú, excepto el último elemento del menú. Además, es posible que haya notado que estoy evitando el último valor de la matriz por completo. Esto se debe a que el último valor es solo un carácter de nueva línea.

    Si ha ejecutado todo correctamente hasta ahora, ahora puede crear un tema a su gusto y agregar algunas páginas al menú desde la página de "configuración" del módulo. Una vez que haya terminado, debe poder ir a su sitio y ver el menú funcionando como se esperaba!


    Conclusión

    Esta ha sido una revisión muy breve pero completa de las técnicas necesarias para crear temas de PrestaShop. En el transcurso del tutorial, he seguido los pasos necesarios para crear un tema multilingüe completo y dos formas diferentes de incluir módulos temáticos en su plantilla..

    En el futuro, le sugiero que se sumerja un poco más en Smarty, ya que ofrece una serie de características ocultas que realmente pueden ayudarlo. En cuanto a un buen lugar para aprender más sobre Prestashop, bueno, no hay mucho; Recomiendo leer la fuente. Al momento de escribir este artículo, la documentación de Prestashop es algo irregular en su cobertura de temas; Sin embargo, su código fuente está muy bien documentado. Otra excelente opción es examinar otros módulos y temas para obtener una comprensión más profunda de lo que Prestashop es capaz de hacer..

    Espero que hayas disfrutado leyendo este artículo. Si tiene alguna pregunta sobre el artículo en sí, o Prestashop en general, no dude en dejar un comentario a continuación.!

    ¿Necesitas temas de PrestaShop listos para usar? Echa un vistazo a ThemeForest!

  • Enlaces útiles: PrestaShop Plugins de CodeCanyon.