Share
Magento es una plataforma de comercio electrónico increíblemente poderosa. En esta miniserie, aprenderemos cómo comenzar con la plataforma, conocer las terminologías, configurar una tienda y todos los aspectos relacionados de ella y, finalmente, aprender a personalizarla para hacerla nuestra propia..
En esta tercera parte, nos centraremos en el proceso detrás de la temática Magento: cómo instalar temas, los diversos conceptos que deberá comprender para crear un tema y la estructura general de archivos. ¿Emocionado? Empecemos!
En la última parte, vimos cómo hacer que su tienda Magento esté instalada y lista para su implementación, lo que incluye cómo configurar sus productos, categorías de productos, impuestos, envíos, pasarelas de pago y muchos más..
Hoy, veremos los conceptos básicos de la temática de Magento. Aprenderemos la idea general detrás de los temas de Magento, las diversas terminologías detrás de él y la estructura básica de un tema..
En primer lugar, la temática Magento no es realmente tan difícil como se pretende. Es un poco diferente de cómo WordPress o Joomla manejan los temas, sí, pero definitivamente no es difícil. Todo lo que necesita saber es un poco de cómo comenzar a crear temas como un profesional.!
Para hacerlo brutalmente simple, un tema de Magento es una colección de archivos PHTML, CSS y JS incluidos junto con archivos XML para definir la estructura. Un archivo PHTML consiste en un marcado HTML regular intercalado por el código PHP para la funcionalidad. En caso de que estés confundido, un bloque aleatorio de código se ve así:
getChildHtml ('store_language')?>getWelcome ()?>
getChildHtml ('topLinks')?>
¿Ver? Es realmente simple una vez que lo envuelves en tu cabeza. Si has trabajado en la creación de temas para otros sistemas, genial, lo captarás con bastante rapidez. Si no, no te preocupes, te guiaré por todo el proceso..
Tenga en cuenta que en Magento, el extremo frontal y el extremo posterior se ajustan completamente por separado. Supongo que la mayoría de ustedes no necesitarán desollar el backend, por lo que me atendré solo a la parte delantera..
Antes de comenzar, varias personas me enviaron un correo electrónico a través de Twitter / me hicieron la misma pregunta: cómo instalar un tema. Voy a hablar de eso primero.
Hay dos formas de instalar un tema de Magento:
Hablaré brevemente sobre ambos.
El primer método es al que estás acostumbrado. Descargar un tema, subirlo y listo. Pero necesitarás saber dónde subir, ya que esto funciona de manera un poco diferente de lo que supones..
Los temas se empaquetan de manera diferente según la fuente, pero en su núcleo, tiene 2 carpetas:
Puede simplemente arrastrarlos a la raíz de la instalación y dejar que se fusione con los datos existentes.
Si por casualidad, usted obtiene el tema empaquetado como una colección de 3 carpetas, no se preocupe.
La carpeta que contiene los archivos PHTML y la que contiene los archivos XML se incluyen en root / app / design / frontend / default / themename mientras que el que contiene los archivos CSS, imágenes y otros activos entra en raíz / skin / frontend / default / themename.
En este momento, esto es todo lo que necesitas hacer. Explicaré por qué cada parte va a una ubicación específica más adelante. Puedes activar tu tema ahora.
Navegar a Sistema -> Diseño y haga clic en Añadir cambio de diseño.
Elija el tema que desee, haga clic en Guardar y listo..
Usar Magento Connect es más fácil siempre que esté disponible allí. Navegar a Sistema -> Magento Connect -> Magento Connect Manager.
Después de iniciar sesión, se le pedirá que ingrese la clave de extensión del tema que desea instalar. Ingrese la clave y espere a que el sistema haga su trabajo..
Después de que haya descargado los archivos necesarios y los haya colocado donde deben estar, ahora puede activar el tema como antes..
Cuando trabaje con Magento, hay algunos conceptos relacionados con el diseño que debe comprender antes de comenzar a modificar el tema predeterminado..
Los diseños son una idea nueva e inteligente en Magento. Este sistema le permite definir la estructura de una página, cualquier página, a través de etiquetas XML correctamente formadas.
Esencialmente, puede dictar qué sección de la página va a dónde cambiando solo algunos atributos en un archivo XML. Cada vista o módulo obtiene su diseño especificado por su propio archivo XML.
Los diseños en Magento son un gran tema y solo unos pocos párrafos aquí no le harán justicia. En el camino, cubriré toda la información necesaria que necesita para crear su propio tema junto con un artículo detallado sobre diseños para cubrir todas las cosas avanzadas que puede hacer con esta funcionalidad..
Por ahora, si está interesado, aquí hay un pequeño fragmento para tener una idea de qué diseños son:
contenedor superior
Las plantillas consisten en archivos PHTML rellenos con marcado HTML y código PHP regular. Al igual que en WordPress, utiliza una serie de métodos predefinidos para especificar el resultado. Al igual que con otros sistemas populares, las secciones importantes como el encabezado, el pie de página y la barra lateral se colocan en archivos separados y se introducen cuando es necesario..
Puedes tener diferentes plantillas para cada vista de Magento. Por ejemplo, puede tener un código diferente para una lista de deseos o una página de pago en lugar de usar el mismo aspecto para todo el sitio.
Aquí hay una pieza de una plantilla para curiosos:
getProductUrl ()?> "title ="htmlEscape ($ this-> getImageLabel ($ _ producto, 'small_image'))?> ">  -> init ($ _ product, 'small_image') -> resize (100, 100); ?> "<?php echo $this->htmlEscape ($ this -> getImageLabel ($ _ producto, 'small_image'))?>")
Parece un poco desordenado, lo sé, pero elimina las partes de PHP y verás lo similar que es a otros sistemas.
Las máscaras no son más que los archivos CSS, los archivos JavaScript, las imágenes y otros recursos que utiliza en el marcado para crear su diseño. Esencialmente todos los activos que no son PHP van aquí. ¿Fuentes para incrustar? ¿Alguna demo en flash? ¿Una pieza de SVG? Todos los que caen en esta categoria.
Los bloques son los componentes integrales de un tema y le permiten construir su tema de manera modular.
Como parte de los diseños, esto constituye la columna vertebral del fuerte sistema de plantillas de Magento. Los bloques son esencialmente secciones que puede mover utilizando el XML mencionado anteriormente para modificar cómo se presenta una página.
Los bloques deben hacer referencia a un archivo de plantilla relevante para que Magento pueda extraer el archivo requerido. ¿Un poco confuso? Aquí hay un ejemplo.
Básicamente, definimos un nuevo bloque, la plantilla que se cargará especificando el tipo de bloque y un nombre. Es un poco diferente de lo que hemos estado acostumbrados, pero confía en mí, lo obtendrás una vez que comiences a desarrollar. De cualquier manera, cubriré los bloques un poco más detalladamente cuando construyamos nuestro tema y aún más haré una revisión completa de los diseños y bloques en la línea, así que no se preocupe si no se completa sentido ahora Solo hazte una idea general de los temas a mano.
Un bloque estructural define la estructura básica de una página. Piensa en HTML 5 encabezado, pie de página y secciones aparte. Fueron creados con el único propósito de la demarcación visual de un diseño..
De los documentos de magento Los bloques de contenido son similares a los elementos DIV de contenedor / contenedor que utiliza en un diseño. Al igual que con el diseño, cada bloque de contenido contiene una funcionalidad o propósito específico. Un menú en su encabezado, una llamada en la barra lateral, aclaraciones legales en el pie de página, todo en bloques de contenido separados.
Recuerde, los bloques de contenido aún son bloques y se asignan a un archivo PHTML específico para generar y representar su contenido HTML.
De los documentos de magento Mencionado finalmente porque desde una perspectiva de temática estricta de un principiante, esto no debería entrar en juego por un tiempo.
Para ser simple, una interfaz es una colección de temas con nombre que puede aprovechar para definir el aspecto de su tienda.
Al igual que otro software poderoso, Magento tiene una estructura de archivos compleja. Sin embargo, para los temas a lo largo, puede reducir su enfoque considerablemente.
Estas son las ubicaciones en las que trabajará cuando cree un tema:
Magento requiere que su contenido PHP ejecutable se coloque por separado de sus activos estáticos, por lo que tiene un directorio de máscara separado en su raíz. Si bien esto puede parecer contraproducente al principio, una vez que haya adaptado ligeramente su flujo de trabajo, se dará cuenta de que este movimiento aumenta la seguridad general de su instalación ...
Sin embargo, un tema se divide típicamente en las siguientes partes.
¡Y hemos terminado! Analizamos los conceptos básicos detrás de la temática Magento y la gestión de temas. Esperemos que esto te haya sido útil y que te haya parecido interesante. Ya que este es un tema bastante nuevo para muchos lectores, estaré observando atentamente la sección de comentarios, así que coméntense si tiene alguna duda..
Preguntas? Cosas bonitas que decir? Criticas? Pulsa la sección de comentarios y déjame un comentario. Feliz codificacion!
Hasta ahora, hemos estado tratando estrictamente en teoría con la plataforma. Una necesidad considerando el tamaño y alcance de Magento. Pero ahora que tenemos todos los elementos básicos, podemos pasar a la parte divertida..
¿Recuerdas cómo al crear un skin para un sistema CMS / genérico siempre empiezas desde un esqueleto y construyes hacia afuera? ¿Como Kubrick para WordPress? Si pensabas que íbamos a tomar uno y empezar a construir un tema a partir de eso, pensaste mal. No señor. Vamos a construir una piel personalizada, con huesos desnudos, similar a la piel en blanco, completamente desde cero. Una piel que ustedes pueden usar como base para su propia piel..
Todo esto y más en las próximas partes. Manténganse al tanto!
¿Sabía que su amigable barrio ThemeForest vende temas de Magento de calidad superior? Ya sea que sea un desarrollador experto de Magento que busque comenzar a beneficiarse de sus esfuerzos, o un comprador, con la esperanza de construir su primera tienda de comercio electrónico, lo tenemos cubierto.!
Accentsconagua