Share
En este artículo, cubriremos los conceptos básicos del diseño de Magento XML.
Vamos a repasar local.xml Y hacer algunas modificaciones básicas. Esto incluirá agregar y eliminar scripts, eliminar bloques y agregar cambios de diseño.
Ahora que tenemos una comprensión básica de la jerarquía de temas del primer artículo de esta serie, profundizaremos un poco más y explicaremos los archivos de plantillas..
Los archivos de plantillas constan de dos subdirectorios de los cuales son:
Accentsconagua
aplicación / diseño / frontend ///diseño/ aplicación / diseño / frontend ///modelo/ Hay mucho que cubrir, por esta razón los dividiré en sus propios artículos. Hoy solo estaremos cubriendo el aspecto del diseño. El aspecto de la plantilla entrará en juego en el próximo artículo..
Espera, antes de comenzar, necesitamos hacer una cosa vital: deshabilitar el caché de Magento, si es que aún no lo has hecho, ¡eso es! Al hacerlo, nos permitirá ver nuestras modificaciones al instante, en lugar de tener que actualizar la memoria caché cada vez que realizamos un cambio. Lo ideal es que se apague durante el desarrollo de un sitio. Para hacer esto inicie sesión en el área de administración y diríjase a sistema> gestión de caché y deshabilitar todo.
Ahora que está ordenado vamos a empezar.
La carpeta de diseño contiene los archivos XML que dictan en gran medida lo que se muestra en la parte frontal de la tienda. La estructura del diseño es bastante compleja en Magento, pero esta es una de las razones que la hacen tan poderosa y flexible..
Encontrará cientos de archivos XML cada uno haciendo lo suyo, cada vista o módulo en aplicación / código / obtiene su diseño especificado por su propio archivo XML. Si alguna vez instala un módulo de terceros en su tienda y afecta la parte frontal, sin duda tendrá su propio archivo XML.
Entonces, ¿cómo sé qué archivo editar si necesito?
Bueno, la convención de nomenclatura de los archivos hace que sea más fácil localizarlos cuando necesite realizar modificaciones. Por ejemplo, magento app / code / core / Mage / Page / módulo tiene su propio archivo XML llamado app / design / frontend / base / default / layout / page.xml ¡Como pueden ver, hay un patrón que comienza a surgir aquí! Una vez que se haya familiarizado y haya hecho algunas tiendas, pronto notará algo de repetitividad y recordará qué archivos necesita editar..
Nota:Tenga en cuenta los módulos de terceros, ya que técnicamente el desarrollador puede asignar un nombre a su archivo XML como desee. En este escenario, a menos que esté en su documentación, tendrá que buscar el nombre del archivo dentro del módulo que se encuentra generalmente en el config.xml expediente. También tenga en cuenta que no todos los módulos tienen un archivo XML, por lo general, el archivo XML solo estará presente si afecta el extremo frontal de la tienda, así que no espere uno todo el tiempo.!
Ruta de configuración: aplicación / código / local /
Aviso que he referenciado base / predeterminado arriba, recuerde que estos son los lugares donde residen los archivos principales. Si necesita hacer modificaciones, cópielos siempre a su cuenta. paquete / tema Nunca editar base / predeterminado archivos.
Al igual que:
app / design / frontend / base / default / layout / page.xml
copiar a:
aplicación / diseño / frontend /
La modificación considerable de estos archivos requiere experiencia y, al ser un tutorial para principiantes, está fuera del alcance de esta serie. sin embargo, voy a correr a través de local.xml y cómo esto se relaciona con el desarrollo del tema, así como con una serie de modificaciones básicas que creo que serán útiles.
En pocas palabras, es un archivo que se coloca dentro de nuestra carpeta de diseño de temas que albergará una gran parte de nuestras anulaciones o actualizaciones a las referencias XML para ese tema. Se considera una buena práctica y Magento lo recomienda. Podríamos verlo como la versión Magento de WordPress funciones.php expediente.
Espera, una "gran parte", ¿por qué no "todos" de nuestras anulaciones o actualizaciones??
Hay un debate sobre este tema y si investigamos un poco encontraremos que cada uno tiene su propia opinión. Algunos dirán solo usar local.xml y no haga ediciones en ningún otro lugar mientras que otros no estarán de acuerdo, así que no tome el siguiente conjunto en piedra.
Personalmente, creo que es un lugar ideal para pequeñas modificaciones, como agregar bloques, eliminar bloques o cambiar plantillas. No es un lugar para diseñar completamente la página de su producto o algo similar, si desea hacerlo, hágalo en el archivo correspondiente, por ejemplo, catalog.xml
Sí, podría ahorrarnos un poco de tiempo cuando actualizamos Magento, ya que todas nuestras ediciones están en un solo archivo, pero en primer lugar, obtener todas nuestras ediciones en un solo archivo, con todos los dolores de cabeza de intentar anular otros archivos XML. simplemente se supera.
Además, cuando realizamos una gran cantidad de modificaciones a una página, lo ideal sería que hiciéramos referencia al otro XML que forma parte de esa página, tendríamos que cambiar constantemente entre los dos archivos, y al final estábamos dividiendo la funcionalidad entre dos archivos separados. no es lo que realmente queremos!
Entonces, cómo configurarlo ...
Crear el local.xml archivo dentro de nuestra carpeta de diseño de tema aplicación / diseño / frontend / y añade alguna estructura básica de marcado XML:
Ahora que tenemos nuestro archivo listo, te mostraré algunas técnicas comunes.
Una modificación muy común es agregar o eliminar JavaScript y CSS. Si está trabajando con jQuery, tendrá que agregar esto ya que Magento no lo incluye de manera predeterminada y cualquier JavaScript personalizado que necesite también deberá agregarse..
Si vemos el código fuente en una instalación de Magento, veremos un montón de JavaScript que se está incorporando, algunos de los cuales no utilizaremos, en cuyo caso es necesario eliminarlos, ya que es innecesario. http solicitud - Magento no es rápido, así que hagamos lo básico!
Para incluir un archivo, debemos decidir si será global, por ejemplo, en cada página de nuestra tienda o solo en ciertas áreas. Con esto podemos seleccionar el controlador de diseño correcto para usar.
Voy a introducir dos controladores de diseño,
los
Ahora, al código.
skin_js js / libs / jquery.min.js ]]> skin_js js / libs / modernizr.min.js skin_js js / libs / html5shiv.min.js es IE 9 skin_js js / libs / respond.min.js es IE 9 skin_js js / libs / selectivizr.min.js es IE 9 skin_css css / widgets.css skin_css css / print.css skin_css css / styles-ie.css lt IE 8 skin_js js / ie6.js lt IE 7 js lib / ds-sleight.js lt IE 7 skin_js js / libs / home.min.js skin_css css / home.css
Hay mucho que hacer aquí, pero cuando se desglosa es relativamente sencillo.
tipo de archivo / ubicación ruta al archivo
Siguiendo con el punto dos: también determina dónde está el archivo en la jerarquía, cada tipo hace referencia a una posición diferente en la jerarquía que se antepone a lo que ingresa en el
piel / frontend // default / nombre piel / frontend // default / nombre
js / nombre Tenga en cuenta que cargar un archivo desde una fuente externa, como un CDN, tiene una sintaxis ligeramente diferente. También es importante incluir el jQuery.noConflict (); al final para evitar que jQuery entre en conflicto con Magento integrado en la biblioteca Prototype.
Magento viene con varios bloques de barra lateral que enfrentemos que nunca usaremos en una situación de la vida real, como el anuncio "Regreso a la escuela". A continuación se presentan dos métodos que podemos utilizar:
right.poll
los retirar El método es una buena manera de eliminar un bloque, independientemente de qué controlador de diseño haya cargado el bloque, a veces solo queremos que desaparezca globalmente sin importar dónde esté y nunca volver.!
Por otra parte unsetChild solo eliminará un bloque desde un controlador de diseño específico. Puedes ver que lo estoy llamando dentro de la Correcto Manejador de diseño por lo que sólo se eliminará de allí. Si el right.poll el bloque se llama desde cualquier otro lugar en un controlador de diseño diferente que se mostrará.
Aquí tenemos un ejemplo de agregar un bloque estructural adicional a la página de inicio. Estamos haciendo referencia al bloque de contenido y usando el después etiqueta para especificar el bloque que se mostrará al final del bloque de contenido.
Por último, tenemos un ejemplo de agregar un bloque de CMS estático, pero primero deberá crear uno para que esto funcione..
Una vez que haya iniciado sesión en el área de administración, diríjase a CMS> Bloques Estáticos y añadir un nuevo bloque. Tome nota del "Identificador" ya que necesitamos hacer referencia a esto en el código XML.
home_static_block
Dentro de block_id Es donde ingresamos nuestro identificador..
Apenas hemos arañado la superficie y hay muchos otros usos para XML, por no mencionar más controladores de diseño y etiquetas XML disponibles para nosotros. El diseño de Magento en sí mismo garantiza ser una serie, ya que hay mucho que cubrir, por ahora lo mantengo solo para lo básico.
Si desea leer un poco más sobre el XML, le recomiendo que lea este artículo y que también descargue una copia de la Guía de diseño oficial de Magento que profundice y tenga una buena explicación de las otras etiquetas XML que podemos usar..
En el siguiente artículo, vamos a avanzar y ver los archivos de plantilla..
