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

Crear un tema personalizado con OpenCart: introducción

by
Difficulty:BeginnerLength:ShortLanguages:
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 Rolando Gonzalez (you can also view the original English article)

En estas series, voy a explicar como puedes construir un tema personalizado con un framework popular de código abierto para comercio electrónico llamado OpenCart. En esta primera parte, explicaré la estructura básica de temas para OpenCart.

Antes de continuar, asumo que tienes trabajando una instalación de OpenCart en tu computadora local. Si este no es el caso, chequea la documentación online de OpenCart e instálalo (Ya que hacer esto va más allá del alcance de este tutorial). Una vez que tengas una instalación de OpenCart trabajando estás listo para seguir adelante.

Una vista rápida a la estructura de OpenCart.

Basic OpenCart Structure

OpenCart está construido con el patrón de diseño MVC que te permite la separación entre los datos y la presentación. Como desarrollador de temas, no necesitas preocuparte acerca de los ajustes de los archivos todo el tiempo los que contienen la lógica de la aplicación junto al código de la plantilla.

OpenCart provee una estructura de directorios realmente limpia cuando se trata de la organización del framework. Todos los archivos relacionados con el código de la parte del servidor (Back-End) están en el directorio admin. Archivos relacionados con el código de la interfaz del usuario (Front-End) se encuentran en el directorio catalog (Catálogo). Pero en lo que realmente estamos interesados es en el directorio catalog donde eventualmente terminaremos personalizando el cádigo de la interfaz de usuario para nuestro tema al final de esta serie de tutoriales.

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

Catalog Structure

Modelo Vista Controlador o MVC, es un patrán de diseño muy popular en el campo de desarrollo de programas. OpenCart solo agrega otro elemento a él: Language,  (Idioma), por lo que se refiere a éste como MVC-L. 

En nuestro caso, la parte de la view (Vista) es donde colocaremos todo el cádigo relacionado al tema. En una visión rápida a la estructura de catalog, veremos como OpenCart hace su magia.

Visión General de los Elementos

  1. Controller (Controlador). Es responsable de manejar la lógica de la aplicación.
  2. Language (Idioma). Es útil para separar información específica de idiomas en sitios multilingües.
  3. Model (Modelo). Es responsable de ir a buscar los datos guardados en una base de datos.
  4. View (Vista). Aquí es donde pasaremos la mayor cantidad de nuestro tiempo. La vista es responsable de reproducir el diseño de nuestra interfaz de usuario.

Familiarizarse con la capa de Presentación

View Structure

Un tema de OpenCart por defecto está disponible en el directorio view (Vista). Esta es la parte que exploraremos en esta sección. A un nivel más profundo, hay dos directorios más: javascript and theme (Tema). 

Por ahora, vamos a suponer que todos los archivos javascript necesarios están en el directorio javascript. A veces hay una excepción en cuyo caso también podemos colocar las hojas de estilos (stylesheets) y los archivos de imágenes relacionados bajo este directorio. Por ejemplo, OpenCart provee la librería de caja de colores (colorbox) la cual contiene archivos no solo de javascript.

Donde estamos realmente interesados es en el directorio theme. Mirando más, hay un directorio llamado default el cual es el único tema construido y proveído por OpenCart. No te dejes agobiar por la estructura del tema en profundidad, ya la exploraremos en más detalles pronto. Por ahora mira como luce la estructura de un tema.

Estructura del Tema por defecto

  1. Image (Imagen). Como debes haber supuesto, todos los archivos de imágenes relacionados con el tema van aquí.
  2. Stylesheet (Hoja de Estilo). Código relacionado con la apariencia, que es probable que sea hojas de estilo (StyleSheets) irán aquí.
  3. Template (Plantilla). Como el nombre sugiere, puedes encontrar todos los archivos de plantillas para la interfaz de usuario (Front-End) aquí. Todos los archivos de plantilla están organizados en un modo modular para mantener las cosas limpias y ordenadas. 

Por ejemplo, si le das una vista rápida al directorio account (Cuenta) bajo el directorio template (Plantilla),verás que la mayoría de los archivos están relacionados con pantallas para los usuarios en la interfaz del usuario (Front-End). Veremos esto en más detalle en el próximo artículo.

El mundo de las Plantillas

Template Structure

Como mencioné antes OpenCart provee una buena manera para organizar los archivos de plantilla. En este artículo, trataré de explicar como luce dentro del directorio template. Antes de continuar avanzando, Vale la pena señalar que aunque OpenCart viene con muchos módulos integrados que proporcionan las características requeridas por un carrito de compras, puedes desarrollar tus propios modulos como también tus requerimientos personalizados. 

Con esto dicho, démosle una vista de cerca a la categorización de plantilla.

Categorización de Plantilla.

  1. Common. (Común) Archivos de plantilla para elementos comunes a través de páginas diferentes son colocados en este directorio. Ejemplos incluyen, Cabeceras, Pie de Páginas y barras de navegación lateral relacionado con la plantilla. Deberías colocar también tus archivos de plantilla aquí si planeas usarlos a través de diferentes páginas lo que hace mucho fácil de mantener a un largo plazo. Por supuesto, no es obligatorio hacer esto, pero es bueno hacer las cosas de la manera que se deben hacer.
  2. Error. (Error) En este momento, es solo la plantilla de error que reside aquí.
  3. Information. (Información) Podrás encontrar aquí plantillas relacionado con página de contacto, mapa del sitio y página de información estática.
  4. Module. (Módulo) Es un directorio importante en términos del tipo de plantillas que mantiene. Como dije antes en OpenCart podemos crear nuestros propios módulos personalizados para cumplir nuestros propios requisitos por lo que este es el lugar donde desearías poner tus archivos de plantilla relacionados con el módulo personalizado..

A parte de la estructura de plantilla explicada anteriormente, todavía hay otros directorios de plantilla que contienen archivos de plantilla para páginas específicos. En términos de OpenCart, podemos decir que son archivos de plantilla de ruta específica. 

Por ejemplo, cuando visitas la página "My Account" (Mi Cuenta) en la interfaz de usuario, la plantilla asociada con esta deberías encontrarla bajo catalog/view/theme/default/template/account. Mas adelante en la serie veremos como encontrar una plantilla específica mirando la ruta en la URL de una página.

Resumen

Este es el final de la primera parte de esta serie. Deberías estar familiarizado con la estructura de un tema básico de OpenCart.

En la próxima parte, aprenderemos como crear un tema personalizado en OpenCart. Si tienes alguna pregunta o recomendación, siéntete libre de dejar tu comentario.

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