Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Code
  2. OpenCart
Code

Entendiendo las Plantillas en OpenCart

by
Difficulty:IntermediateLength:ShortLanguages:

Spanish (Español) translation by Christian Marroquin (you can also view the original English article)

En este tutorial, exploraremos el concepto de plantillas en OpenCart. Comenzaremos explorando las plantillas básicas disponibles en OpenCart, y a medida que nos movemos, echaremos un vistazo en cómo crear nuevos diseños. Además, veremos la asociación de plantillas con los productos, categorías y módulos.

Asumo que estás usando la versión más reciente de OpenCart 2.0. Por supuesto, las plantillas están disponibles en versiones previas de OpenCart, pero usaremos la última versión ya que la interfaz no es exactamente la mima como aquella de las versiones de OpenCart 1.x.

Entendimiento Conceptual de las Plantillas de OpenCart

"Plantillas" en OpenCart son el concepto de organizar y proveer plantillas para diferentes clases de páginas. ¿Qué quiere decir cuando dices una "clase" diferente de página? Si echas un vistazo a las diferentes páginas en OpenCart, notarás que la "estructura" del diseño no es la misma en cada página. Por ejemplo, el diseño de la página de "lista de productos" no es la misma que la página de "detalles del producto".

Además, la estructura varía en las diferentes páginas como "Página de Cuentas", "Página de Contacto", "Página de Pago", etc. Así que aquí es donde el diseño entra en escena. Puedes decir que los diseños son mera plantillas de decoración que preparan la página completa rellenando los espacios vacíos y los módulos disponibles para ese diseño en particular.

Por el otro lado, los diseños también son útiles en OpenCart para asignar módulos diferentes a la página. Por ejemplo, si te gustaría mostrar un módulo de "Banner" en la página de los detalles del producto, puedes hacerlo desde el back-end ya que el diseño de detalle del "producto" está disponible en la base de la página. OpenCart también te permite crear nuevos diseños desde el back-end para que puedas manejar los diseño por defecto asignados a las páginas diferentes de la interfaz.

Explorar los Diseños Base

Echemos un vistazo a los diseños preestablecidos disponibles en OpenCart. Ve hacia el núcleo de OpenCart. En la navegación, ve a Sistema > Diseño > Plantillas, que te presentará una lista de las plantillas básicas.

Layout Listing

Como peudes ver hay una lista pequeño de plantillas existentes. Da click en el icono Editar de la plantilla de Inicio, como se muestra en la captura de arriba, para configurar la plantilla relacionada con las configuraciones.

Layout Edit View

Entendamos exactamente lo que cada sección en la configuración representa.

Nombre de la Plantilla

Solo es el nombre de la capa. Debe estar puesta a algo sensible ya que nos ayudará más tarde durante el módulo asignado.

Asignación de Rutas

La cosa importante aquí es que el valor de la columna de "Ruta", que sugiere a OpenCart que cuando sea que halla una URL que contenga "common/home" en la interfaz, debe activar esta configuración de capa relacionada. Significa que activará todos los módulos asignados a esta capa durante la solicitud de la página de inicio en la interfaz.

Asignamiento de Módulo

En esta sección, puedes ver los módulos que están configurados para ser mostrados en la página de inicio. Hay tres módulos asignados a la posición de "Contenido Superior", aunque puedes añadir más módulos para mostrarlos en diferentes posiciones en la página de inicio. Por ejemplo, puedes añadir un módulo "Banner" en la posición de "Contenido Inferior".

De esta manera, podrías configurar las opciones para las otras plantillas. OpenCart provee una interfaz útil para asignar módulos a las posiciones diferentes del diseño.

En este par de secciones, veremos cómo puedes crear una nueva plantilla y usar esa plantilla para usar de manera manual las plantillas bases de OpenCart.

Añadir una Nueva Plantilla desde la Base

Ve hacia la página Sistema > Diseño > Plantillas. Da click en el signo + y añade una nueva plantilla. Llena la información requerida como se muestra en la siguiente captura y guárdala.

Create New Layout

Hemos nombrado "Plantilla de Producto Personalizada"  al diseño. Hemos asignado al módulo "Banner > Categoría" a la posición de "Columna Derecha". Significa que cuando sea que nuestra plantilla esté activada para cualquier solicitud en la interfaz, mostrará el módulo "Banner" en la parte derecha de la barra lateral.

Hay dos maneras de activar la plantilla para la solicitud de la interfaz. Hemos discutido la primera, el asignamiento de "Ruta" en la configuración de la plantilla. La otra es la opción de "manipular" disponible para ciertas páginas de la interfaz.  Procederemos con la segunda opción para el curso de este tutorial.

Asociar las Plantillas con Productos y Categorías

Ahora que hemos creado la plantillas personalizada, vayamos a ver cómo podríamos usar la plantilla con la característica de manipulación en OpenCart. Usaré el ejemplo de productos por defecto disponible en OpenCart para hacer las cosas más fáciles.

Ve a Catalogo > Productos, que listará todos los productos disponibles en la tienda. Editemos el producto "iMac" debajo de la categoría de "Desktops > Mac".

Edit the Product

En la edición de la interfaz del producto, ve a la pestaña Diseño, donde debes ver la opción de Manipulación de Plantilla para la tienda por defecto. Selecciona Personalizar Plantilla en el recuadro desplegable y guarda el producto.

Layout Override drop-down box

¡Haz manipulado el producto por defecto del producto de "iMac" con nuestro diseño! Significa que cuando sea que alguien visite el detalle del producto "iMac" en la interfaz, La "Plantilla Personalizada" será activada para esa página. Y como discutimos en la sección anterior, mostrará el módulo de "Banner" en la posición de la "Columna Derecha". ¡Veamos en la Interfaz!

Front-End Preview of iMac Product

De la misma manera, puedes manipular las capas para las categorías.

Conclusión

Así que espero que debas tener un conocimiento básico de cómo las plantillas en OpenCart funcionan. Las plantillas son útiles para manipular el diseño por defecto y asignar módulos en diferentes posiciones en OpenCart. Comparte tus opiniones en los comentarios abajo.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.