Share
Lo que vas a crearEn esta serie de tutoriales, desarrollaremos un tema de Magento desde cero. Como Magento es un enorme eCommerce CMS con toneladas de opciones de personalización, los temas de Magento generalmente se consideran muy complejos de desarrollar, pero espero que una vez que sigas esta serie, te familiarices con la terminología de Magento y cómo se desarrollan las cosas en ella . Intentaré explicar todo a medida que avanzamos, desarrollando cada componente de la página paso a paso..
El primer paso hacia cualquier desarrollo de Magento es tener una copia de Magento instalada en su servidor local. También puede tener una copia de Magento instalada en su servidor web, pero eso solo ralentizará su velocidad de desarrollo. Por lo tanto, siempre recomiendo usar un servidor local para el desarrollo, y una vez que haya completado el desarrollo y haya probado exhaustivamente el producto final, solo debe cargarlo en su servidor..
No reinventaré la rueda explicando cómo debe instalar Magento en su servidor local. Hay un montón de buenos artículos disponibles en internet para eso. También puede encontrar artículos de instalación de Magento en nuestro sitio, como este artículo de Tuts +, que lo guiará a través de cómo instalar Magento en su servidor local.
También es necesario instalar los datos de muestra de Magento, al instalar Magento. Estos datos de muestra agregarán muchos catálogos, productos, revisiones, etc., y a través de ellos podemos probar diferentes escenarios durante el desarrollo..
Una vez que haya terminado de instalar Magento, el siguiente paso es tener las herramientas para el desarrollo listas. Puede utilizar el editor de código o IDE de su elección aquí. Cualquier editor de código con el que te sientas cómodo funcionará bien aquí. Si no ha utilizado ningún editor de código anteriormente, recomendaría instalar Notepad ++, ya que es un editor de código muy ligero, fácil de usar y gratuito..
También necesitaremos un inspector de elementos para verificar y editar los estilos CSS en las páginas web. Si usa Firefox, puede instalar la extensión de Firebug para eso. Sin embargo, si está utilizando Chrome, Chrome Web Inspector funciona muy bien. Viene con Chrome, por lo que no tiene que instalar ninguna extensión para eso. Para el propósito de esta serie, usaré Chrome Web Inspector para depurar y editar estilos CSS.
He desarrollado algunos HTML para el propósito de esta serie. El HTML contiene los patrones de diseño y los elementos que se utilizan principalmente en los temas de comercio electrónico, como el carro superior, el control deslizante del encabezado, el selector de moneda e idioma, etc. Convertiremos este HTML en un tema de Magento en funcionamiento paso a paso. El paquete de temas HTML se adjunta aquí para que lo descargues..
Antes de sumergirnos en la fase de desarrollo real, le recomendaría encarecidamente que analice esta serie de artículos de Tuts + sobre el desarrollo del tema Magento. Esta serie de tres tutoriales lo familiarizará con la teoría detrás de la temática de Magento y sus principios básicos. Este conocimiento del desarrollo del tema Magento será particularmente útil antes de comenzar a ensuciarse las manos con la codificación del tema real.
Ahora que debe tener preparadas las herramientas y la instalación de Magento para el desarrollo, y que ha analizado los conceptos básicos del desarrollo de temas leyendo la serie recomendada anteriormente, permítame familiarizarlo brevemente con las carpetas en las que editaremos los archivos..
Cuando abras la carpeta raíz de Magento, verás una lista de carpetas debajo. Fuera de estas carpetas, las carpetas en las que editaremos los archivos son solo las aplicación carpeta y el piel carpeta.
De vez en cuando, también podemos usar la carpeta js, para colocar archivos de biblioteca de JavaScript como jQuery, si aún no están allí. Continúe y familiarícese con las carpetas contenidas en las carpetas de aplicaciones y skin, antes de comenzar a seguir los pasos en los siguientes artículos de esta serie..
Necesitamos cambiar algunas configuraciones en Magento, lo que nos ayudará a desarrollar nuestro tema de Magento más rápido y nos permitirá saber si algo va mal en Magento..
En primer lugar, deshabilitaremos Magento Cache. Para eso, ve a Sistema> Gestión de caché, y seleccione todos los tipos de cachés. Desde las acciones seleccione. Inhabilitar, y enviar.
Una vez que hayamos desactivado todos los cachés, el siguiente paso es volver a indexar los datos. Para eso, ve a Sistema> Gestión de índices. Seleccione todos los índices, y de las acciones seleccione Reindexar datos, y enviar.
Ahora, habilitaremos registros y bloquearemos sugerencias en Magento. Ir Sistema> Configuraciones, y en la barra lateral izquierda, el último elemento será Desarrollador. Haga clic en eso. En la siguiente página, desde Configuración de registro, habilitar registros, y golpear Guardar configuración botón en la parte superior derecha.
A continuación, en la parte superior de la barra lateral izquierda, verá la Alcance de configuración actual barra de selección Seleccionar Sitio web principal desde allí.
Ahora desde el Depurar seccion, habilitar Consejos para la ruta de la plantilla, y pulsa el Guardar configuración botón de nuevo.
Por último, vaya al directorio raíz de Magento y abra el archivo index.php desde allí. En la línea 77, descomenta esta línea de código:
Accentsconagua
ini_set ('display_errors', 1);Eso es todo por ahora. Puede que no se dé cuenta, pero hemos creado una base sólida para el desarrollo del tema real en los siguientes tutoriales de esta serie. Al final, nuevamente lo alentaré a seguir detenidamente la serie de Desarrollo de temas de Magento que he recomendado anteriormente, si aún no lo ha hecho..
En el siguiente tutorial, crearemos la estructura de carpetas de nuestro nuevo tema. Copiaremos los archivos CSS, JS y de imagen de HTML en nuestro tema, y crearemos el archivo local.xml de nuestro tema para asegurarnos de que nuestro tema se vincule con estos archivos..
Eso es todo, y espero que sigas con nosotros en los próximos tutoriales..
