Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. OpenCart
Code

Crear un tema personalizado para OpenCart: tercera parte

by
Difficulty:BeginnerLength:MediumLanguages:
This post is part of a series called Create a Custom Theme With OpenCart.
Create a Custom Theme With OpenCart: Part Two
Create a Custom Theme With OpenCart: Part Four

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

En la parte anterior de esta serie, aprendimos como crear un tema personalizado y habilitarlo desde la aplicación de OpenCart. También estudiamos como la invalidación de plantilla del sistema trabaja en la aplicación.

En esta parte, iremos más allá y analizaremos las plantillas importantes para comprender los elementos básicos usados en una plantilla en general de OpenCart. También iremos a través de un detallado caso de uso para interpretar el proceso completo de generación de página. Esto debería ser útil cuando necesites personalizar cualquier página en OpenCart.

En términos generales, cuando nos fijamos en las plantillas que OpenCart provee, podemos clasificarlas en tres categorías diferentes. Es importante señalar que esto no se declaró oficialmente en la documentación de OpenCart, pero nos ayudara a entender que es exactamente lo que se necesita para generar una página en la interfaz del usuario.

Plantillas de Diseño

En término de OpenCart, platillas se denominan diseños. Puedes imaginar un diseño de plantilla es como una plantilla decorada que recoge el contenido de diferentes áreas de una página. Empuja ese contenido adentro del diseño y entonces genera una página completa.

Las regiones del diseño pueden referirse a elementos como la cabecera, el pie de página, elemento de la barra lateral, y el contenido del módulo. Para casi todas las páginas de la tienda para la interfaz del usuario, hay un diseño de plantilla asociado que existe.

Es importante señalar que OpenCart también permite que crees diseños desde la aplicación lo que es otra manera que puedes cambiar la estructura parcial de determinadas páginas de la interfaz del usuario.

Sub-Plantillas

Este tipo de plantilla genera un espacio para un contenido específico. En un escenario general, el contenido es generado por sub-plantillas y es empujado dentro del diseño de plantilla. El ejemplo más simple de este tipo es template/common/header.tpl. Es responsable de generar la cabecera para cada página en la interfaz del usuario.

Y como hemos comentado anteriormente, OpenCart ofrece una buena manera de organizar los archivos de plantilla de modo que tiene sentido que header.tpl se coloca en el directorio common (Común)). La mayoría de las plantillas en este directorio generan un contenido para un espacio específico que finalmente son conectadas dentro del diseño.

Plantillas de Módulo

Recuerde que un módulo es algo así como un bloque que es empujado a una región específica en el diseño de plantilla. Como supones probablemente, plantillas de módulos están relacionados a módulos diferentes y como hemos visto OpenCart viene con una gran cantidad de módulos integrados para extender la funcionalidad.

De forma predeterminada, hay cuatro posiciones de regiones diferentes en el diseño de plantillas. Ellas son:

  1. Contenido Superior
  2. Contenido Inferior
  3. Columna Izquierda
  4. Columna Derecha

Puedes asignar un módulo a cualquier de estas posiciones. Como su nombre indica si tienes asignado un módulo a la posición "Content Top" (Contenido Superior) será mostrado encima del contenido principal de la página. Platillas de modulo son encontradas dentro del directorio template/module así que si estas creando un nuevo módulo, debes colocar las plantillas asociadas en este directorio.

Platillas de módulo y sub-plantillas son similares en la forma en que son tratadas por OpenCart. Ambas son consideradas como una platilla hija y son empujadas al diseño de plantilla en el proceso cuando se genera una página.

Descubrimiento de Plantilla desde la interfaz de usuario

Primero, vamos a ir a través del proceso seguido por OpenCart para reproducir una página en la interfaz de usuario. Cada vez que accedes a la página de la interfaz del usuario, el siguiente procedimiento es ejecutado por la aplicación:

  • Basado en la ruta variable establecida en la URL, OpenCart encuentra un controlador apropiado para manejar la petición. Veremos exactamente lo que una ruta variable es y que hace en sección posterior. Por ahora solo asumiremos que guía a OpenCart a un archivo de controlador apropiado para su ejecución.
  • Es el controlador el que hace ahora todo el trabajo pesado para el resto del proceso. El controlador es el lugar donde se incluye otros elementos como archivos de idioma y archivos de modelo. También obtiene y establece el contenido actual que será empujado hacia el diseño de plantilla para ser mostrado.
  • Una vez que el controlador ha terminado con establecer el contenido, que entrega esta información a un elemento de la vista que es responsable de mostrar la salida final al usuario. Lo importante a señalar aquí es que el controlador también establece el nombre del archivo plantilla de diseño que será utilizado por la vista en una fase posterior.
  • Por último, el elemento vista jala el archivo de plantilla necesaria y lo decora con el contenido que se preparó anteriormente en el controlador. El proceso termina aquí con el envío de la salida de datos para el usuario.

Consideremos ahora un escenario en el que desea cambiar la estructura de del diseño de cualquiera de las páginas en la tienda para los usuario. La primera pregunta que se plantea es cómo hacemos para encontrar una plantilla asociada a una página en particular, aunque no hay una forma específica de hacer esto, vamos a echar un vistazo a algunas de las opciones que están disponibles.

1. Predicción basada en la Estructura

Esta es la forma más fácil de predecir la plantilla asociada con cualquier ruta. En términos de OpenCart, "route" (Ruta) es una variable de query-string (Cadena-Consulta) en la URL.

Por ejemplo, considere la siguiente URL en el front-end que muestra la página de inicio de sesión para el usuario:

http://www.youropencartdomain.com/index.php?route=account/login.

Así que en la URL anterior, account/login es el valor del parámetro "route" (Ruta) que nos será útil. Puedes simplemente mapear este valor al directorio template del tema predeterminado. En este caso, la ruta de la plantilla terminaría en algo así:

{opencart_document_root}/catalog/view/theme/default/template/account/login.tpl

Como has notado, la segunda parte del valor de "route", "login", se convierte en el nombre del archivo de plantilla (login.tpl en el caso anterior). Vamos a realizar otro ejemplo:

http://www.youropencartdomain.com/index.php?route=product/product&path=1&product_id=1

Este es el ejemplo de formato del parámetro de "route" para una pagina de detalles del producto. El valor del parámetro de "route" es product/product (Producto/Producto), por lo que la plantilla para esta ruta debería encontrarse en:

{opencart_document_root}/catalog/view/theme/default/template/product/product.tpl

2. 2. El Camino para Expertos.

En la mayoría de los casos, la forma descrita anteriormente debería funcionar, pero hay algunas excepciones en casos que necesitas buscar en el archivo del controlador. Una vez más, el parámetro de la ruta nos ayuda a encontrar el archivo del controlador asociado a él.

Vamos a considerar la URL que muestra la página de inicio de sesión para el usuario en el front-end:

http://www.youropencartdomain.com/index.php?route=account/login

Puedes mapear el valor de la ruta relativa al catalog/controller para encontrar un archivo de controlador asociado. Así que en este caso, el archivo de controlador debe terminar con:

{opencart_document_root}/catalog/controller/account/login.php

Como te habrás dado cuenta, la segunda parte del valor "route" value, "login", se convierte en el nombre de archivo del controlador (login.php in above case). Una vez que encuentres un archivo de controlador asociado, debes buscar en el código algo así como:

$this->template = 'default/template/account/login.tpl';

Esta es la forma en que el controlador le dice a OpenCart que debe mostrar el diseño de plantilla "login.tpl" del tema "default" (Predeterminado). Y sí, por supuesto, si esta plantilla se ha reemplazado en tu tema personalizado, va a tener más prioridad!

Entre los dos métodos discutidos para encontrar una plantilla de diseño de cualquier página, el primero es más amigable para los desarrolladores de temas, y la segunda es para aquellos que se sienten un poco más cómodo trabajando con el código.

Los elementos comunes de la plantilla de diseño

A este punto, usted debe sentirse un poco más cómodo buscando un diseño de plantilla específico que quieras personalizar. En la última sección de este artículo, vamos a echar un vistazo a algunos de los elementos habituales en la plantilla de diseño. Nos quedaremos con nuestro ejemplo para este ejercicio.

Vamos a abrir el archivo de la plantilla de diseño predeterminada default/template/account/login.tpl para referencia.

$header muestra el contenido de la parte de encabezado en una página de OpenCart. La plantilla relacionada se puede encontrar en default/template/common/header.tpl.

$footer muestra el contenido de la parte de pie de página en una página de OpenCart. La plantilla relacionada a él se puede encontrar en default/template/common/footer.tpl.

$column_left se encarga de mostrar la salida de todos los módulos asignados a la posición "Column Left" (Columna Izquierda) desde el back-end. La plantilla relacionada se puede encontrar en default/template/common/column_left.tpl.

$column_right se encarga de mostrar la salida de todos los módulos asignados a la posición "Column Right" (Columna Derecha) del back-end. La plantilla relacionada se puede encontrar en default/template/common/column_right.tpl.

Un bloque de "Account" (Cuenta) que aparece en la barra lateral derecha de la página de inicio de sesión proporciona un ejemplo de este tipo de contenido. En el caso en el que te gustaría personalizar la salida de un módulo específico, usted debe encontrar ese archivo en default/template/module/{modulename.tpl}.

En el caso del módulo de "Account", el archivo es default/template/module/account.tpl. Como puede ver, la convención de nombres del archivo de plantilla de módulo es bastante fácil de suponer, ya que es exactamente el mismo que el nombre del módulo.

$content_top se encarga de mostrar la salida de todos los módulos asignados a la posición "Content Top" (Contenido Superior) del back-end. La plantilla relacionada se puede encontrar en default/template/common/content_top.tpl.

$content_bottom se encarga de mostrar la salida de todos los módulos asignados a la posición "Content Bottom" (Contenido Inferior) desde el back-end. La plantilla relacionada se puede encontrar en default/template/common/content_bottom.tpl.

Login Page Layout Elements

A este punto, usted debe tener confianza en la personalización de plantillas de front-end de OpenCart. Como te habrás dado cuenta, tiene que modificar muy pocas plantillas con el fin de cambiar por completo la apariencia de todo el sitio.

Resumen

En esta parte, hemos analizado a fondo la naturaleza de las plantillas y los métodos para descubrir las plantillas en front-end para su personalización. También hablamos sobre algunas de las variables comunes que se utilizan en el diseño de las plantillas en todo el sitio.

En la parte final de esta serie, vamos a ver un caso detallado para cambiar la estructura de diseño de una página de inicio OpenCart. Sus ideas y comentarios son bienvenidos en la sección de comentarios!

¡Sé el primero en conocer las nuevas traducciones–sigue @tutsplus_es en Twitter!

Advertisement
Advertisement
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.