Share
En este tutorial, exploraremos el concepto de diseños en OpenCart. Comenzaremos por explorar los diseños centrales disponibles en OpenCart y, a medida que avancemos, analizaremos cómo puede crear nuevos diseños. Además, veremos la asociación de diseños con productos, categorías y módulos..
Supongo que estás usando la última versión de OpenCart 2.0. Por supuesto, los diseños también están disponibles en versiones anteriores de OpenCart, pero nos quedaremos con la última versión, ya que la interfaz no es exactamente la misma que la de las versiones OpenCart 1.x.
Los "diseños" en OpenCart son el concepto de organización y provisión de plantillas para diferentes tipos de páginas en la parte delantera. ¿Qué significa cuando dices un "tipo" de página diferente? Si observa las diferentes páginas en OpenCart, notará que la "estructura" del diseño no es la misma en todas las páginas. Por ejemplo, el diseño de la página "listado de productos" no es el mismo que el de la página "detalles del producto".
Además, la estructura varía en las diferentes páginas como "Páginas de cuenta", "Página de contacto", "Página de pago", etc. Así que aquí es donde el diseño entra en escena. Puede decir que los diseños son las plantillas decorativas que preparan la página completa al llenar las ranuras y los módulos disponibles para ese diseño en particular..
Por otro lado, los diseños también son útiles en OpenCart para asignar diferentes módulos a la página. Por ejemplo, si desea mostrar un módulo "Banner" en la página de detalles del producto, puede hacerlo desde el back-end ya que el diseño del detalle del "producto" ya está disponible en el núcleo. OpenCart también le permite crear nuevos diseños desde el back-end para que pueda anular los diseños predeterminados asignados a las diferentes páginas del front-end..
Echemos un vistazo a los diseños incorporados disponibles en OpenCart. Dirígete al final de OpenCart. En la navegación, vaya a Sistema> Diseño> Diseños, que enumera los diseños centrales.
Como puede ver, hay una gran lista de diseños ya existentes. Haga clic en el Editar icono de la Casa diseño, como se muestra en la captura de pantalla anterior, para configurar los ajustes relacionados con el diseño.
Entendamos exactamente qué significa cada sección de la configuración.
Es sólo el nombre del diseño. Debe configurarse a un valor razonable ya que nos ayudará más adelante durante la asignación del módulo..
Lo importante aquí es el valor de la columna "Ruta", que sugiere a OpenCart que siempre que haya una URL que contenga "común / inicio" en la página de inicio, debe activar esta configuración relacionada con el diseño. Esto significa que activará todos los módulos asignados a este diseño durante la solicitud de la página de inicio en la parte delantera..
En esta sección, puede ver que los módulos ya están configurados para mostrarse en la página de inicio. Hay tres módulos asignados a la posición "Contenido superior", aunque puede agregar más módulos para mostrarlos en diferentes posiciones en la página de inicio. Por ejemplo, puede agregar un módulo "Banner" en la posición "Parte inferior del contenido".
De la misma manera, también puede configurar los ajustes para los otros diseños. OpenCart proporciona una interfaz realmente útil para asignar módulos a diferentes posiciones del diseño.
En las próximas dos secciones, veremos cómo puede crear un nuevo diseño y usar ese diseño para anular los diseños centrales de OpenCart.
Dirígete a la Sistema> Diseño> Diseños página. Haga clic en el + Firmar para agregar el nuevo diseño. Complete la información requerida como se muestra en la siguiente captura de pantalla y guárdela.
Hemos introducido "Diseño de producto personalizado" como el nombre del diseño. También hemos asignado el módulo "Banner> Categoría" a la posición "Columna derecha". Esto significa que siempre que nuestro diseño se active para cualquier solicitud en el extremo frontal, se mostrará el módulo "Banner" en la barra lateral derecha.
Hay dos formas de activar el diseño para cualquier solicitud de front-end. Ya hemos discutido el primero, la asignación de "Ruta" en los ajustes de configuración del diseño. La otra es la opción de "anulación" disponible para ciertas páginas del front-end. Continuaremos con la segunda opción para el curso de este tutorial..
Ahora que hemos creado el diseño personalizado, avancemos y verifiquemos cómo podría usar la función de anulación del diseño en OpenCart. Usaré el ejemplo de productos predeterminados disponibles en OpenCart para facilitar las cosas.
Ir Catálogo> Productos, que listará todos los productos disponibles en la tienda. Editemos el producto "iMac" en la categoría "Desktops> Mac".
En la interfaz de edición del producto, vaya a la Diseño pestaña, donde deberías ver el Anulación de diseño Opción para la tienda por defecto. Seleccionar CustomLayout En el cuadro desplegable y guardar el producto..
¡Acaba de anular el diseño de producto predeterminado del producto "iMac" con nuestro diseño "CustomLayout"! Significa que cada vez que alguien visita la página de detalles del producto "iMac" en la parte delantera, se activará "CustomLayout" para esa página. Y como hemos comentado en la sección anterior, mostrará el módulo "Banner" en la posición "Columna derecha". Vamos a probarlo en la parte delantera.!
De la misma manera, también puede anular diseños para categorías!
Así que espero que tenga un conocimiento básico de cómo funcionan los diseños en OpenCart. Los diseños son realmente útiles para anular los diseños predeterminados y asignar módulos a diferentes posiciones en OpenCart. Comparta sus pensamientos en forma de comentarios y consultas utilizando la siguiente información!
Accentsconagua