7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Code
  2. OpenCart

Crear un tema personalizado con OpenCart: Introducción

Read Time: 5 mins
This post is part of a series called Create a Custom Theme With OpenCart.
Create a Custom Theme With OpenCart: Part Two

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

En esta serie, voy a explicar cómo se puede construir un tema personalizado con el popular framework de comercio electrónico de código abierto OpenCart. En esta primera parte, explicaré la estructura básica del tema de OpenCart.

Antes de continuar, asumo que tienes una instalación de OpenCart funcionando en tu estación de trabajo local. Si no es así, consulta la documentación en línea de OpenCart y configúrala (ya que hacerlo está fuera del alcance de este tutorial). ¡Una vez que tengas una instalación de OpenCart en funcionamiento, estarás listo para sumergirte!

Un vistazo rápido a la estructura de OpenCart

Basic OpenCart StructureBasic OpenCart StructureBasic OpenCart Structure

OpenCart se construye utilizando el patrón de diseño MVC que permite separar las preocupaciones entre los datos y la presentación. Como desarrollador de temas, no tienes que preocuparte de ajustar todo el tiempo los archivos que contienen la lógica de la aplicación y el código de la plantilla juntos.

OpenCart proporciona una estructura de directorios realmente limpia en lo que se refiere a la organización del framework. Todos los archivos relacionados con la interfaz del back-end se colocan en el directorio admin. Los archivos que tratan de la interfaz front-end se colocan en el directorio catalog. Pero lo que realmente nos interesa es el directorio catalog, ya que al final de esta serie de tutoriales terminaremos con el tema de la interfaz personalizada.

El patrón de diseño de OpenCart: MVC-L

Catalog StructureCatalog StructureCatalog Structure

Model View Controller, o MVC, es un patrón de diseño muy popular en el campo del desarrollo de software. OpenCart solo añade un elemento más: El lenguaje, por lo que nos referimos a él como MVC-L.

En nuestro caso, la parte vista es donde colocaremos todo el código relacionado con el tema. En una rápida visión general de la estructura catalog, veremos cómo OpenCart hace su magia.

Resumen de los elementos

  1. Controlador. Es responsable de manejar la lógica de la aplicación.
  2. Lenguage (Lenguaje) Es útil para separar la información específica de los idiomas para los sitios multilingües.
  3. Modelo. Es responsable de obtener los datos de la base de datos del back-end.
  4. View (Vista) ¡Aquí es donde pasaremos la mayor parte de nuestro tiempo! Es responsable de la presentación del diseño de la parte delantera.

Familiarizarse con la capa de presentación

View StructureView StructureView Structure

Un tema predeterminado de OpenCart está disponible en el directorio view. Esta es la parte que exploraremos en esta sección. En el nivel más profundo, hay dos directorios más: javascript y theme.

Por ahora, asumamos que todos los archivos de Javascript requeridos están en el directorio javascript. A veces hay una excepción a esto, en cuyo caso también podemos colocar hojas de estilo y archivos de imagen relacionados bajo este directorio. Por ejemplo, OpenCart proporciona la biblioteca Colorbox que contiene más que solo JavaScript.

Lo que realmente nos interesa es el directorio theme. Mirando más allá, hay un directorio llamado default que es el único tema incorporado proporcionado por OpenCart. No te dejes abrumar por la estructura temática más profunda, ya que pronto la exploraremos con más detalle. Por ahora, veamos cómo es la estructura de un tema.

Estructura del tema por defecto

  1. Image (Imagen). Como habrás adivinado, todos los archivos de imagen relacionados con el tema van aquí.
  2. Stylesheet (Hoja de estilo). El código relacionado con el desuello, que es probable que sean hojas de estilo, irá aquí.
  3. Template (Plantilla). Como el nombre sugiere, puedes encontrar todos los archivos de la plantilla del front-end aquí. Todos los archivos de plantillas están organizados de forma modular para mantener las cosas ordenadas y limpias.

Por ejemplo, si se echa un vistazo rápido al directorio account bajo la plantilla, verás que la mayoría de los archivos están relacionados con las pantallas de usuario en el front-end. Lo veremos con más detalle en el próximo artículo.

El mundo de las plantillas

Template StructureTemplate StructureTemplate Structure

Como mencioné anteriormente, OpenCart proporciona una buena manera de organizar los archivos de plantillas. En este artículo, trataré de explicar cómo se ve dentro del directorio template. Antes de seguir adelante, vale la pena señalar que aunque OpenCart viene con un montón de módulos incorporados que proporcionan las características requeridas por un carrito de compras básico, tu puedes desarrollar tus propios módulos también para tus requisitos personalizados.

Dicho esto, echemos un vistazo más de cerca a la categorización de la plantilla.

Categorización de la plantilla

  1. Common (Común). Los archivos de plantillas para los elementos comunes a través de las diferentes páginas se colocan en este directorio. Los ejemplos incluyen el encabezado, el pie de página y las plantillas relacionadas con la barra lateral. También deberías colocar aquí tus archivos de plantillas si piensas utilizarlos en diferentes páginas, lo que facilita su mantenimiento a largo plazo. Por supuesto que no es obligatorio hacerlo, pero es bueno hacer las cosas como se deben hacer.
  2. Error. Por el momento, es solo la plantilla de error que reside aquí.
  3. Information (Información). Aquí puedes encontrar plantillas relacionadas con la página de contacto, la página de mapa del sitio y la página de información estática.
  4. Module (Módulo). Es un directorio importante en términos del tipo de plantillas que guarda. Como dije anteriormente en OpenCart podemos crear nuestro propio módulo personalizado para cumplir con nuestros requisitos personalizados, así que este es el lugar donde te gustaría poner tus archivos de plantilla relacionados con tu módulo personalizado.

Aparte de la estructura de la plantilla explicada anteriormente, hay otros directorios de plantillas que contienen archivos de plantillas específicos para cada página. En términos de OpenCart, podemos decir que son archivos de plantillas de rutas específicas.

Por ejemplo, cuando se visita la página "Mi cuenta" en el front-end, la plantilla asociada a la misma debe encontrarse en catalog/view/theme/default/template/account. Más adelante en la serie, veremos cómo encontrar un archivo de plantilla específico mirando la ruta url de esa página.

Resumen

Ese es el final de la primera parte de esta serie. Deberías estar familiarizado con la estructura básica del tema de OpenCart.

En la siguiente parte, aprenderemos a crear un tema personalizado en el OpenCart. Si tienes alguna pregunta o comentario, ¡no dudes en dejar tu comentario!

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Scroll to top
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.