Magento Theme Development archivos de plantillas

En este artículo, cubriremos los conceptos básicos de los archivos de plantilla de Magento. Repasaremos su introducción y haremos algunas modificaciones básicas.. 

Esto incluirá mostrar productos destacados en la página de inicio y cómo cargar JavaScript en el pie de página..

A raíz de nuestro artículo anterior, hemos visto que los archivos de diseño controlan cada bloque en un tema y deciden qué se muestra y qué no se muestra. Pero lo que se representa dentro de ese bloque es donde los archivos de plantilla entran en acción.

En este artículo, nos centraremos en los siguientes directorios:

• Modelo - aplicación / diseño / frontend ///modelo/
• Lugar - aplicación / diseño / frontend ///lugar/

Si acaba de unirse a nosotros, asegúrese de revisar los artículos anteriores de esta serie..

Para referencia, hemos cubierto:

1. Una introducción
2. Archivos de diseño

Sin más que hacer, vamos a empezar..

Modelo

Los archivos de plantilla de Magento son archivos PHTML compuestos de una mezcla de HTML y PHP, algunos de los cuales representan una página como 1column.phtml mientras que otros renderizan bloques específicos dentro de una página como header.phtml. 

En la mayoría de los casos, durante el desarrollo de un sitio web, estos son los archivos con los que estaremos trabajando principalmente, para los desarrolladores front-end, es decir. Una vez que el XML esté en su lugar y se llame a una plantilla, se espera que el archivo se analice y se muestre en consecuencia.

Hay cientos de archivos de plantilla disponibles, saber cuál editar y luego rastrear el archivo en la jerarquía puede ser complicado cuando se inicia por primera vez. 

Sin embargo, todo está bien, hay algunas configuraciones del área de administración que pueden ayudarnos, nos ahorrarán horas de dolor de cabeza!

Es importante tener en cuenta que solo podemos usar las siguientes configuraciones en el ámbito "Sitio web" o "Vista de tienda", las configuraciones no están disponibles para nosotros en el ámbito "Configuración predeterminada", por lo que debemos recordar cambiar el ámbito una vez que haya iniciado sesión Sin embargo, esto es útil ya que significa que podemos cambiar la configuración solo para un sitio web particular o una vista de tienda en lugar de globalmente.

Consejos de plantilla

Estos identificarán rápidamente qué archivos se están cargando para una página específica al mostrarnos la ruta al archivo. Activarlo o desactivarlo es un cambio rápido de configuración en el área de administración. 

Dirigirse a sistema> configuración. Luego, en el menú de la izquierda, desplácese hasta el final y haga clic en "Desarrollador" debajo del encabezado "Avanzado". Una vez que hemos cambiado el alcance a "Sitio web principal", tenemos la configuración disponible bajo "Depuración".

Parece que no ha pasado nada una vez que haya hecho clic en guardar configuración, pero si va a la parte delantera del sitio web, la página de inicio, por ejemplo, y actualiza la página, verá cómo llegan las sugerencias.. 

Con esto ahora sabemos dónde se encuentran los archivos, y si se requieren modificaciones, simplemente copie el archivo desde la base a nuestro tema y modifíquelo según sea necesario..

También podemos configurar "Agregar nombre de bloque a sugerencias" a "Sí" si queremos más información, esto generalmente se usa para el desarrollo de back-end, por lo que no me preocuparía demasiado esta configuración.

Ahora, al código. Repasaré un par de modificaciones que a menudo se usan en el desarrollo del tema, pero nuevamente solo tocaré la superficie en lo que sea posible..

1. Mostrando productos destacados en la página de inicio
2. Cargando JavaScript en el pie de página

Empecemos…

1. Mostrando productos destacados en la página de inicio

Este punto tiene que ser la solicitud más común en cualquier sitio web, todos quieren mostrar un puñado de productos en la página de destino de su sitio.?

En realidad, es mucho más fácil de lo que imaginas, con una combinación de XML y PHP podemos lograr esto en poco tiempo. Hay, como con muchas cosas en Magento, más de una forma de hacer esto. Voy a mostrarte lo que creo que es el método más fácil..

En primer lugar, debemos crear nuestra categoría en el área de administración que albergará nuestros productos. Una vez iniciada la sesión en catalogo> gestionar categorias. Para este ejemplo, crearemos una subcategoría debajo de la raíz, por lo que debemos hacer clic en "Catálogo raíz" y luego hacer clic en el botón "Agregar subcategoría". Ingrese un título para la categoría, asegúrese de que "Está activo" está configurado en "Sí" y luego haga clic en "Guardar categoría".

Anote el número de ID de categoría en la parte superior, ya que lo necesitaremos más adelante:

Este será un buen momento para agregar también algunos productos a la categoría que acabamos de crear. Para ello, haga clic en la pestaña "Categoría de productos" y seleccione los productos que desea mostrar, sin olvidar hacer clic en "Guardar categoría" una vez que hayamos terminado..

A continuación, debemos crear nuestra plantilla donde nuestros para cada se ejecutará un bucle.

Para ello, lo basaremos en la plantilla de la lista de productos que ya tiene todo el código necesario hecho para nosotros, solo necesitamos hacer algunos ajustes para satisfacer nuestras necesidades.

app / design / frontend / base / default / catalog / product / list.phtml

Copiar a:

aplicación / diseño / frontend //default/catalog/product/list-home-featured.phtml

Luego haremos algunas modificaciones a nuestro archivo..

1. Cargue en nuestra colección de productos a través de la categoría ID.
2. Solo muestro una vista, elegí la vista de cuadrícula pero siéntase libre de cambiar esto
3. Eliminar la barra de herramientas ya que esto ya no es necesario
4. Agregue en nuestro nombre de categoría para un encabezado

El archivo terminado se verá como el siguiente:

 carga ($ _ categoryId); $ _productCollection = $ _category-> getProductCollection (); $ _productCollection-> addAttributeToSelect ('*'); ?> 
getName (); ?>
 cuenta ()):?> 
__ ('No hay productos que coincidan con la selección')?>
  
 
  
 getProductUrl ()?> "title ="stripTags ($ this-> getImageLabel ($ _ product, 'small_image'), null, true)?> ">   
 getProductUrl ()?> "title ="stripTags ($ _ product-> getName (), null, true)?> "> getName (); ?>  
 getRatingSummary ()):?> getReviewsSummaryHtml ($ _ producto, 'corto')?>  getPriceHtml ($ _ producto, true)?> 
 isSaleable ()):?> __ ('Agregar al carrito')?>  
__ ('Agotado')?>
  
 helper ('wishlist') -> isAllow ()):?> 
helper ('wishlist') -> getAddUrl ($ _ product)?> ">__ ('Agregar a lista de deseos')?>
  getAddToCompareUrl ($ _ producto)):?> 
| ">__ ('Agregar para comparar')?>
  
 
 
  
 
 

No te olvides de cambiar el valor de la $ _categoryId variable a su ID de categoría.

Por último, solo necesitamos crear un bloque XML que se cargará en la plantilla que hemos creado anteriormente. Haremos esto en nuestro local.xml archivo así

Eso es todo lo que hay, bastante sencillo ¿no? A continuación se muestra una captura de pantalla del producto terminado..

2. Cargando JavaScript en el pie de página

Para empezar, podríamos pensar que Magento ya tiene esta capacidad incorporada a través de XML cuando agregamos nuestros scripts, algún tipo de parámetro que podríamos pasar, pero estaríamos equivocados. Magento no nos lo va a hacer tan fácil.!

WordPress, por otro lado, lo hace perfectamente a través de la wp_register_script. Tal vez un desarrollador de servicios de fondo detecte esto y agregue la capacidad de pasar a través de un parámetro XML adicional, ahora hay un proyecto paralelo con el que alguien puede hacer cracking.. 

Ningún arrendatario?

Entonces, afortunadamente por ahora, hay un método alternativo para hacer que esto funcione..

Creo que es importante cubrir este tema ya que mejorará la velocidad de nuestro sitio que todos quieren. Tiendo a dejar los archivos de JavaScript de Magento Core como están en el , Puedo minimizarlos pero aparte de eso permanecen como son.

Al agregar algo sobre Magento, como jQuery y nuestras propias funciones personalizadas, no hay ningún problema en cargarlas en el pie de página. Al desarrollar un sitio web, tiendo a mantener un ojo atento en el etiqueta, cuando se instala un módulo de terceros, generalmente se agrega algo aquí. Con un poco de trabajo, podemos editar el módulo XML de terceros y señalarlo para que se cargue en el pie de página. Vale la pena los cinco minutos adicionales para hacerlo.!

Primero necesitamos crear un bloque XML en nuestro local.xml archivo dentro del controlador de diseño predeterminado como tal:

      skin_jsjs / build / jquery.min.js    

Tenga en cuenta que estamos usando el mismo método para agregar archivos JavaScript que hicimos en el artículo anterior. Si necesita una actualización, haga clic aquí, para fines de demostración agregaremos una copia local de jQuery.

Ahora podemos ir creando la plantilla de nuestro archivo. Crea un nuevo archivo en:

aplicación / diseño / frontend //default/page/html/footer-js.phtml

Con el siguiente contenido:

getCssJsHtml ()?>

Por último, debemos agregar una sola línea de código a nuestros archivos de plantilla justo antes del cierre etiqueta.

Nuestros archivos de plantillas se pueden encontrar en app / design / frontend / base / default / page / Sin olvidar copiarlos a nuestro propio tema. Hay varios archivos de plantillas, he recopilado una lista a continuación:

• 1column.phtml
• 2columns-left.phtml
• 2columns-right.phtml
• 3columns.phtml

A continuación se muestra un ejemplo de cómo debe verse:

... getAbsoluteFooter ()?>  getChildHtml ('footer.js')?>  

Con todos los pasos completos ahora, si actualizamos nuestra página y vemos la fuente, veremos que el script se está cargando justo antes del cierre etiqueta.

Si has llegado hasta aquí, creo que es una felicitación. Hay mucho que tomar en una sesión pero espero que todo esté empezando a tener sentido.

Envolviendolo!

Esta serie es solo la punta del iceberg, Magento es una plataforma muy poderosa y tiene mucho más que ofrecer de lo que hemos cubierto. Espero que te haya dado una idea de los principios del tema de Magento y que puedas darle un buen uso..

No hay mejor manera de aprender Magento, pero si te quedas atascado, aprenderás las cuerdas en poco tiempo..

Como siempre, estoy más que feliz de ayudar si necesitas ayuda con algo. También asegúrate de revisar mi Magento Boilerplate que tiene un montón de golosinas dentro.

Hasta la proxima vez.