Desarrollo del tema Magento Página de inicio, Parte 3

Ahora que hemos personalizado completamente la primera mitad de la página de inicio, debemos modificar el contenido de la página de inicio a continuación. Si observamos nuestro diseño HTML, la sección de contenido de la página de inicio solo tiene un encabezado y un carrusel para los últimos productos. Hay un widget de Magento que podemos usar para mostrar los últimos productos en la página de inicio. En realidad, si miramos nuestra sección de página de inicio actual, ya tiene el widget de productos más reciente habilitado, pero necesitamos modificarlo para que coincida con nuestros requisitos de diseño.

Si miramos el contenido de nuestra página de inicio yendo a la Panel de administración> CMS> Páginas> Isla Madison> Contenido, veremos que solo hay una línea de código PHP (aparte de algunas etiquetas de estilo), es decir:

widget type = "catalog / product_widget_new" display_type = "new_products" products_count = "5" template = "catalog / product / widget / new / content / new_grid.phtml"

Entonces, básicamente todo el contenido de la página de inicio proviene de esta plantilla (que es solo una plantilla para mostrar nuevos productos). Copiaremos este archivo del tema RWD a nuestro nuevo tema, en catálogo / producto / widget / nuevo / contenido / nuevo_grid.phtml, y empieza a editarlo para que se vea como nuestro diseño HTML. Si nos fijamos en el código actual de este archivo, es:

getProductCollection ()) && $ _products-> getSize ()):?> 
 
 
__ ('Nuevos Productos')?>
 
 
 getPagerHtml ()?> getColumnCount (); ?>  
 getItems () como $ _product):?> 
  getProductUrl ()?> "title ="stripTags ($ _ product-> getName (), null, true)?> ">   
 
getProductUrl ()?> "title ="stripTags ($ _ product-> getName (), null, true)?>) ">helper ('catalog / output') -> productAttribute ($ _ product, $ _product-> getName (), 'name')?>
 getPriceHtml ($ _ producto, verdadero, '-widget-new-grid')?> getReviewsSummaryHtml ($ _ producto, 'corto')?> 
 isSaleable ()):?> __ ('Agregar al carrito')?>  
__ ('Agotado')?>
  
 helper ('wishlist') -> isAllow ()):?> 
getAddToWishlistUrl ($ _ producto)?> ">__ ('Agregar a lista de deseos')?>
  getAddToCompareUrl ($ _ producto)):?> 
| ">__ ('Agregar para comparar')?>
  
 
 
 
  
 
 
  

Cuando miramos nuestro código HTML para esta sección, se ve así:

 
 
Caliente Productos
 
 
 
 
 
 
  
 añadir a la cesta 
 
Iphone 5s Oro 32 Gb 2013
 
$ 451.00
 
 
 
 
 
 

Entonces, comenzaremos por insertar las etiquetas dinámicas en este HTML. La razón por la que le he mostrado el código actual de este archivo es para que pueda encontrar las etiquetas dinámicas necesarias de ese código y colocarlas en el código HTML..

No tenemos que hacer ningún cambio en la estructura div, por lo que la primera línea que debe cambiar es la h3 etiqueta:

Caliente Productos

Necesitamos reemplazar el texto estático de Caliente y Productos con magento $ esto etiquetas, para que Magento pueda traducirlas luego de acuerdo con las preferencias del usuario Por lo tanto, esta línea se convertirá en algo como esto: 

__ ('Nuevo')?>__ ('Productos')?>

La siguiente línea que necesita cambiar es la imagen etiqueta, donde necesitamos cambiar la ruta relevante de la fuente de la imagen. Actualmente se ve así:

Lo cambiaremos a esto:

Aquí, esta etiqueta dinámica obtendrá la imagen pequeña real del producto de tamaño 236 x 357 px. A continuación, necesitamos cambiar esto añadir a la cesta enlazar:

añadir a la cesta

Lo cambiaremos a esto:

getProductUrl ()?> "> isSaleable ()):?> __ ('Agregar al carrito')?>  __ ('Agotado')?>   

Tiene una URL dinámica para la página de detalles del producto y solo muestra "Agregar al carrito" si el producto está disponible. De lo contrario, se mostrará 'Fuera de stock'. Por último, actualizaremos el precio y el nombre del producto, reemplazando esta línea:

Iphone 5s Oro 32 Gb 2013
 
$ 451.00
 

Con este: 

helper ('catalog / output') -> productAttribute ($ _ product, $ _product-> getName (), 'name')?>
 
getPriceHtml ($ _ producto, verdadero, '-widget-new-grid')?>
 

Esto tendrá nuestra vista de producto único lista, pero para iterarla sobre todos los productos nuevos, tenemos que incluir nuestro div elemento en un bucle, así que agregaremos esta línea en la parte superior:

getItems () como $ _product):?>

Y esta línea al final de ella para terminar el bucle:

Entonces el código completo para ese archivo se convertirá así:

getProductCollection ()) && $ _products-> getSize ()):?> 
 
 
__ ('Nuevo')?>__ ('Productos')?>
 
 
 getItems () como $ _product):?> 
 
 
 
  
 getProductUrl ()?> "> isSaleable ()):?> __ ('Agregar al carrito')?>  __ ('Agotado')?>   
 
helper ('catalog / output') -> productAttribute ($ _ product, $ _product-> getName (), 'name')?>
 
getPriceHtml ($ _ producto, verdadero, '-widget-new-grid')?>
 
 
 
 
  
 
 
  

Actualiza tu página de inicio ahora. Debería tener una sección de nuevos productos que funcione perfectamente y que tenga un aspecto similar al siguiente:

Ahora necesitamos modificar el pie de página antes de que terminemos con la página de inicio. Si nos fijamos en nuestro diseño HTML, el pie de página tiene cuatro secciones. El primero muestra "Nuestras marcas", el segundo muestra un cuadro de suscripción y enlaces a las redes sociales, el tercero muestra algunas URL y el cuarto solo el aviso de copyright..

La cuarta sección ya está presente en nuestro tema, así que solo tenemos que modificar el contenido y los estilos, pero los otros tres componentes que debemos agregar en nuestro tema. 

Para agregar un componente, crearemos un nuevo Bloqueo estático desde el panel de administración y pondremos nuestro contenido allí. Entonces, vamos a Panel de administración> Bloques estáticos> Agregar nuevo bloque, y agregar un nuevo bloque para el Nuestras marcas sección. Cambiaremos el título del Bloque a "Nuestras marcas", estableceremos el identificador a "nuestras marcas", seleccionaremos la vista de la tienda de "Todas las vistas de la tienda" y colocaremos esto en la sección de contenido

Nuestro  Las marcas
 
<>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Si observa detenidamente, es el mismo código que tenemos en nuestro HTML para esta sección: acabamos de cambiar las rutas relativas de las imágenes, mientras cargábamos manualmente las nuevas imágenes desde el editor WYSIWYG. Guarde el bloque y comience a crear otro bloque para la sección de registro..

Para este segundo bloque, usaremos el título del bloque "Encima del pie de página". Para el identificador usaremos 'above_footer', y para el contenido ingresaremos este código:

Ahora tenemos que crear el bloque de enlaces de una manera similar. Crearemos un nuevo bloque con el título del bloque de 'Enlaces de pie de página', con el identificador como 'enlaces de enlace de pie de página', y pondremos este código allí:

 
Cliente Apoyo
 
 
Preguntas más frecuentes
 
Opcion de pago
 
Consejos de reserva
 
Informacion
 
 
 
 
Cliente Apoyo
 
 
Preguntas más frecuentes
 
Opcion de pago
 
Consejos de reserva
 
Informacion
 
 
 
 
Cliente Apoyo
 
 
Preguntas más frecuentes
 
Opcion de pago
 
Consejos de reserva
 
Informacion
 
 
 
 
Contacto Información
 
Anwar ul Haq, California
 
Llámenos: (123) 398 5063
 
Llámenos: (123) 398 5063
 
Correo electrónico: abs @ tutsplus
 
 

Todos estos enlaces están enlazados en ninguna parte ahora, pero puede modificarlos más tarde. Los enlaces de imagen se generan de nuevo dinámicamente usando la función de carga del editor WYSIWYG. Todo el resto del código se copia y pega desde el código HTML..

Guarde este bloque también y verifique la página de inicio, pero aún así no verá estos tres bloques apareciendo. Esto se debe a que tiene que decirle a Magento explícitamente dónde mostrar estos nuevos bloques, y eso podemos hacerlo desde la sección de diseño. Para esto, ve a la layout / local.xml archivo, y agregue estas líneas, justo antes del cierre de la defecto etiqueta.

  footer_links   por encima de pie de página   Nuestras marcas   

Este código XML básicamente le dice a Magento que agregue estos dos nuevos bloques a la sección de pie de página de Magento. Por último, necesitamos llamar a estos bloques desde el archivo phtml del pie de página. Para eso crearemos un nuevo archivo footer.phtml en esta ubicación: plantilla / página / html / footer.phtml.

Añade este código en este footer.phtml expediente: 

 
 
 getChildHtml ("our_brands")?> 
 
 
 
 
 
 
 getChildHtml ("above_footer")?> 
 
 
 
 
 
 getChildHtml ("footer_links_sm")?> getChildHtml ()?> 
 
 
 
 
 
 
 
getCopyright ()?>
 
 
 
 
 
 
 

Esto es, nuevamente, solo el código HTML tomado, donde todos los códigos de sección se reemplazan con enlaces relevantes a bloques estáticos. Y la sección de derechos de autor se sustituye por una etiqueta dinámica de derechos de autor.

Verifique la página de inicio ahora, y ahora debería mostrar estos bloques estáticos de nueva creación, y debería tener este aspecto:

Nuestra página de inicio ya está completa. Lo único que queda es una corrección de estilo, y lo haremos en el siguiente artículo.