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

Crear un tema personalizado con OpenCart: segunda parte

by
Difficulty:BeginnerLength:ShortLanguages:
This post is part of a series called Create a Custom Theme With OpenCart.
Create a Custom Theme With OpenCart: Introduction
Create a Custom Theme With OpenCart: Part Three

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

En el primer artículo de esta serie, exploramos la estructura básica de un tema de OpenCart. Ahora, demos un paso mas y vamos a aprender como se puede crear un tema personalizado. Si aún no has visto la primera parte de este tutorial, leela y así entenderás hacia donde nos dirigimos en este artículo a medida que continuamos construyendo nuestro propio tema.

OpenCart viene con un tema bastante decente por defecto, el cual nos servirá como tema para nuestro nuevo tema personalizado. En términos generales, hay dos escenarios en los que quisieras crear tus propios temas.

  1. Quieres reemplazar completamente la interfaz del tema por defecto por una nueva interfaz de tu elección.
  2. Te gustaría cambiar algunas cosas, como los colores, estructura de diseño y cambios relacionados con marcas.

En cualquiera de los dos casos, Yo recominedo crear un nuevo tema personalizado en vez de modificar los archivos directamente del tema que viene por defecto, ya que nos hará la vida mas fácil durante alguna actualización de versión de OpenCart.

Antes de continuar, debe tener una instalación de OpenCart trabajando. Si no la tienes lista, ve e instálela.

Una vez hecho, vamos a comenzar!

Configurando el Esqueleto

Vamos a crear un nuevo directorio, llamado mycustomtheme (Mi Tema Personalizado) debajo de catalog/view/theme. Este servirá de contenedor para todos los otros archivos como imágenes, hojas de estilo y plantillas. Además, es necesario crear tres directorios más: image (Imagen), stylesheet (Hoja de Estilo) y templates (Plantilla) dentro del directorio mycustomtheme.

Basic Skeleton Structure

Una vez que hagas esto, has configurado la estructura básica del esqueleto que necesitas para tu tema personalizado. De hecho, puedes seguir adelante y habilitar tu tema personalizado y va a trabajar bien.

Activar el Nuevo Tema

Vamos a seguir adelante y activar el tema personalizado desde la aplicacián. Una vez que te haya iniciado la seccián en la aplicacián, ve a System > Settings. (Sistem > Configuración).Verós listada todas las tiendas disponibles en tu instalación de OpenCart

Default Stores Listing

En la mayoría de los casos, mostrará una sola tienda, pero si tienes varias tiendas configuradas, verás más de una sola fila. OpenCart permite configurar múltiples tiendas usando una sola instalación.

Esto es verdaderamente una característica importante si tu tienes múltiples tiendas y no quieres configurar una instalación de OpenCart para cada una de ellas. Tu puedes manejar todas las tiendas usando una sola inteface de administración! La configuración de múltiples tiendas es algo que está fuera del alcance de este tutorial pero es una característica importante que vale la pena explorar.

De vuelta a lo nuestro, has clic en el enlace Edit (Editar) en la columna Action (Acción) la cual deberá abrir la interface de configuración de la tienda.

Store Edit Configuration Interface

Haz clic en la pestaña Store (Tienda). Esto abrirá el formulario de configuración que nos permite seleccionar un tema para la interfaz del usuario. Deberás ver que nuestro tema personalizado, mycustomtheme, también está listado junto al tema default (Por Defecto) en el menú desplegable de Template (Plantilla). Selecciónalo y haz clic en el botón Save (Salvar) para aplicar los cambios.

Store Edit Configuration Interface - Store Tab

Ahora si revisas la interfaz todo estará funcionando bien. No hemos creado un solo archivo en nuestro tema personalizado aún. ¿Cómo funciona? Ahí es donde la invalidación de plantilla entra en juego.

Entender la Magia de Invalidación de Plantilla

Aunque hemos puesto nuestro nuevo tema mycustomtheme como un tema activo de la tienda, la interfaz del usuario continúa viéndose exactamente igual que como estaba anteriormente de habilitar nuestro nuevo tema desde la applicación. Esto es debido a que el sistema de invalidación de plantilla existe.

Echemos un vistazo a un ejemplo rápido para que podamos entender más facilmente esto: Para reproducir la página de inicio, OpenCart utiliza una plantilla situada en catalog/view/theme/*/template/common/home.tpl. El asterísco en la ruta significa el nombre del tema. Ahora OpenCart ejecutaró el siguiente procedimiento con el fin de encontrar la plantilla home.tpl:

  • Como hemos establecido mycustomtheme como un tema activo de la tienda, primero intentará encontrar el archivo en catalog/view/theme/mycustomtheme/template/common/home.tpl. Si se encuentra, OpenCart estará feliz, tomará ese archivo y detendrá el proceso aquí.
  • Si OpenCart no puede encontrar home.tpl en el tema activo, retrocederá para el tema por defecto y tratará de abrir catalog/view/theme/default/template/common/home.tpl. Obviamente, está garantizado que home.tpl estará allí a menos que los hayas movido con los archivos de plantilla del tema por defecto!

OpenCart siempre retrocederá al tema default (Por Defecto) cada vez que no pueda encontrar el archivo de plantilla necesario en el tema personalizado activo. Así que prácticamente podemos decir que es el tema default (Por Defecto) el que aporta los archivos en el momento aunque mycustomtheme está en su lugar.

Esto es muy útil en el caso donde solo necesitas modificar unos pocos archivos de plantilla. En ese caso, solo copiarías esos archivos en el directorio del tema personalizado para cumplir el trabajo.

Extendiendo el Tema Personalizado en Blanco

Es una canasta vacía en cuanto a nuestro tema personalizado mycustomtheme, se refiere. Vamos a enriquecerlo con un poco de contenido útil.

Vamos a crear un nuevo directorio con el nombre common (Común) dentro del directorio template (Plantilla) de nuestro tema personalizado. Ahora copia los archivos de plantilla home.tpl y header.tpl del directorio template/common del tema default (Por Defecto). Debes pegar estos archivos en nuestro recién creado directorio common (Común) de nuestro tema.

Del mismo modo, copie todos los archivos de hojas de estilo desde el directorio de estilos stylesheet del tema default y péguelos en el directorio de estilos stylesheet de nuestro tema. Repita el mismo proceso para todas las imágenes en el directorio image aunque vamos a ignorar este directorio por ahora.

En este punto, la nueva estructura de directorios del tema debería lucir así:

Custom Theme Structure

Hay algunas cosas importantes a tener en cuenta aquí antes de seguir adelante. Solo debes copiar los archivos de plantilla para el tema personalizado que requiere personalización. La razón es que el archivo que falta será siempre obtenido del tema default (Por Defecto) así que no hay necesidad de mantener duplicado el mismo archivo a menos que necesite modificarlo.

Otra cosa a notar es que usted debe mantener la estructura de los archivos similares al tema default (Por Defecto) específicamente en el caso de los archivos de plantilla.Como hemos visto, hemos creado un directorio common cuando copiamos los archivos home.tpl and header.tpl para imitar la estructura con el tema por defecto.

A partir de ahora, voy a mencionar todas las rutas relativas de archivos a nuestros directorio de tema personalizado. . Yendo más allá, abra el archivo de template/common/header.tpl en tu editor favorito. El código en este archivo se encarga de mostrar parte de encabezado de todo el sitio web. Si nos fijamos en el código de cerca, hay unas pocas referencias de hojas de estilo modificables con el tema "default".

Vamos a cambiarlo de tal manera que sea extraído del tema personalizado.

Encuentra el siguiente código,

Y reemplazalo por el siguiente,

Haga lo mismo con las otras referencias de stylesheet (Hojas de Estilo) en donde sea requerido.

De esta manera, nos aseguramos de todos los archivos de hojas de estilo se cargan desde nuestro tema personalizado. Ahora abra el archivo template/common/home.tpl y reemplace todo el contenido de ese archivo con lo siguiente:

Revise su página de inicio y deberías ver el cambio.

Este es solo un ejemplo de como reemplazar y personalizar las plantillas utilizando tu propio tema personalizado. En el mundo real, por supuesto, es posible que tenga que modificar una gran cantidad de plantillas para que se correspondan con el diseño personalizado que desea integrar. Más adelante en esta serie, vamos a ver como encontrar una plantilla relacionada con una página específica en interfaz de usuario.

Resumen

En última instancia, este artículo pretende ayudar a entender los matices de la creación de un tema personalizado. Usted puede seguir adelante y explorar el código de otros archivos de plantilla para una mejor comprensión del funcionamiento de temas en OpenCart.

En la siguiente parte, vamos a echar un vistazo a algunas de las plantillas comunes en detalle. Por supuesto, su opinión es muy bienvenida así que por favor deje preguntas, comentarios, y dem&aacutes; en la sección de comentarios.

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

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.