Cree diseños personalizados en el tema PrestaShop

En este blog, aprenderemos cómo agregar diseños personalizados a un tema de PrestaShop existente. PrestaShop ya tiene algunos diseños predefinidos, como ancho completo, dos columnas, tres columnas, etc. Sin embargo, si necesita agregar un diseño nuevo, puede crear diseños personalizados. Para agregar un diseño personalizado, necesitamos crear un archivo en la carpeta de plantillas/diseños del tema y editar el archivo config/theme.yml. Editar archivos en temas existentes no es un enfoque recomendado porque cuando actualice el tema, los cambios se perderán. Por lo tanto, crearemos un tema hijo. PrestaShop admite la funcionalidad de temas secundarios, lo que significa que puede ampliar el comportamiento del tema principal. Para crear un tema secundario en PrestaShop, creamos una carpeta debajo de la carpeta de temas y le asignamos el nombre que desee en letras minúsculas (por ejemplo, «mitema»). Cree otra carpeta en «mytheme» y asígnele el nombre «config». En la carpeta «config», cree un nuevo archivo llamado «theme.yml» y coloque el siguiente contenido en este archivo: parent: nombre clásico: mytheme display_name: Mi tema para la versión de diseño: 1.0.0 activo: use_parent_assets: true meta: compatibilidad: desde: 8.1.0 hasta: ~ diseños_disponibles: diseño personalizado: nombre: Descripción del diseño personalizado: Este es un diseño personalizado ancho completo del diseño: nombre: Descripción de ancho completo: Sin columnas laterales, ideal para páginas sin distracciones como páginas de productos. diseño-ambas-columnas: nombre: Tres columnas descripción: Una columna central grande y 2 columnas laterales. diseño-columna-izquierda: nombre: Dos columnas, columna pequeña a la izquierda descripción: Dos columnas con una columna pequeña a la izquierda diseño-columna-derecha: nombre: Dos columnas, columna pequeña a la derecha descripción: Dos columnas con una pequeña columna de la derecha Aquí hemos ampliado el tema «clásico» predeterminado de PrestaShop. También puede visitar el siguiente enlace para comprender los parámetros del archivo theme.yml en detalle: https://devdocs.prestashop-project.org/8/themes/getting-started/theme-yml En los parámetros de diseños_disponibles, tenemos definimos nuestro nombre y descripción del diseño personalizado: diseño personalizado: nombre: Descripción del diseño personalizado: Este es el diseño personalizado Ahora necesitamos crear este archivo de diseño en la carpeta plantillas/diseños, así que cree esta carpeta y cree un archivo llamado diseño personalizado .tpl todo dentro de la carpeta plantillas/diseños e inserte el siguiente contenido: {extends file=’layouts/layout-both-columns.tpl’} {block name=’content_wrapper’}

{hook h=»displayContentWrapperTop»} {nombre del bloque=’content’}

¡Hola Mundo! Este es el texto estándar HTML5.

{/block} {hook h=»displayContentWrapperBottom»}

{/block} Nota: El nombre del archivo de diseño debe ser el mismo que el definido en el archivo theme.yml. En el archivo custom-layout.tpl, ampliamos el diseño del tema principal (clásico) layout-both-columns.tpl. Puede ver el tema secundario recién agregado en la lista de temas (Diseño > Tema y logotipo > Tema), active el tema secundario y haga clic en «Elegir diseño»: después de hacer clic en «Elegir diseño», se abre una nueva ventana y verá el tema personalizado. opción de diseño en el menú desplegable: de eso se trata este blog. Si tiene algún problema o inquietud, no dude en mencionarlo en la sección de comentarios. Me gustaría ayudar. Además, puede explorar nuestros servicios de desarrollo PrestaShop y una amplia gama de módulos PrestaShop de calidad. Para cualquier duda contáctanos al [email protected].

About Francisco

Check Also

¿Cuánto cuesta crear una aplicación como Costco?

Con el tamaño del mercado en rápido crecimiento de la industria del comercio electrónico, intentar …

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *