7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Code
  2. Magento

Desarrollo de Temas Magento: Página Principal, Parte 2

Scroll to top
Read Time: 13 mins
This post is part of a series called Magento Theme Development.
Magento Theme Development: Home Page, Part 1
Magento Theme Development: Home Page, Part 3

Spanish (Español) translation by Elías Nicolás (you can also view the original English article)

En el tutorial anterior de esta serie, empezamos a modificar la sección de encabezado de la página principal. En este tutorial, comenzaremos donde lo dejamos con la mejora de la sección de encabezado, y luego crearemos el nuevo bloque deslizante de CMS y lo llamaremos de nuestros archivos de plantilla. Como tenemos mucho que cubrir en este artículo, vamos a empezar sin más demora.

Como hemos fijado parcialmente el encabezado superior, lo único que necesita fijar allí es la sección superior del carro. Para personalizar el carro del encabezado, primero trataremos de averiguar qué archivos de plantilla son responsables de representar esa parte. Para analizar esto, primero vamos a añadir algunos productos al carro, para que podamos investigarlo completamente.

Enabling Template TagsEnabling Template TagsEnabling Template Tags

A medida que habilitamos las sugerencias de la plantilla, podemos ver que el contenedor externo del carro de encabezado proviene de este archivo de plantilla: frontend/rwd/default/template/checkout/cart/minicart.phtml. Luego, al hacer clic, la parte expandida se procesa a través de este archivo: frontend/rwd/default/template/checkout/cart/minicart/items.phtml. Por último, cada elemento del carro se procesa a través de este archivo: frontend/rwd/default/template/checkout/cart/minicart/default.phtml.

Vamos a importar todos estos archivos en nuestro tema recién creado, y luego comenzar a modificarlos.

Comencemos el proceso de modificación con el archivo minicart.phtml más externo. Éste es el código actual de este archivo:

Ahora antes de comenzar cualquier modificación en él, vamos a comprobar el código de nuestra sección del carro del jefe en nuestro archivo original del HTML. El código se ve así:

Por lo tanto, empezaremos a modificar el código de archivo PHP para que sea similar a nuestro código HTML. Sólo usaremos una etiqueta de ancla aquí para envolver el icono del carrito y después mostraremos el contenido del minicart. Por lo tanto, nuestro código se verá así:

Aquí hemos reemplazado el envoltorio externo del carrito superior, pero ahora necesitamos editar el contenedor de la sección desplegable. Como ya hemos visto, ese envoltorio viene de frontend/rwd/default/template/checkout/cart/minicart/items.phtml. Vamos a comprobar el código actual de este archivo:

Cuando lo comparamos con nuestra plantilla HTML, hay un par de cosas que debemos hacer. En primer lugar, dentro de la div minicart-wrapper, vamos a empezar a implementar nuestro ul, y para cada elemento vamos iterar bajo la etiqueta li. Al final, mostraremos el total del carrito o indicar que no hay elementos en el carro. Nuestro código final para este archivo se verá así:

Ahora la parte final que queda es el estilo del artículo de la lista de carros en sí. Como ya hemos descubierto, el archivo responsable de esa parte es: frontend/rwd/default/template/checkout/cart/minicart/default.phtml.

El código actual de este archivo parece bastante largo y difícil de entender, pero no se deje intimidar. No necesitamos editar todo esto, porque la parte principal del código de archivo es simplemente calcular el precio correcto y otras opciones de producto. Una vez más, revisaremos nuestro código HTML, lo pondremos en este archivo y empezaremos a reemplazar el texto estático por valores dinámicos. Este es el código para cada artículo del carro en nuestro HTML:

Vamos a reemplazar la etiqueta img con esta:

A continuación, sustituiremos el nombre por el código dinámico:

Para mostrar las opciones del producto, utilizaremos este código dinámico:

Entonces determinaremos y mostraremos la cantidad usando este código:

Para el cálculo del precio, ingresaremos este código en el lugar del precio estático:

Y como último paso, reemplazaremos el href para eliminar la URL con ésta:

He encontrado todo este código de la actual default.phtml. Usted no tiene que averiguar toda la lógica y el código por su cuenta, pero si usted mira de cerca se puede encontrar en el archivo que está tratando de modificar.

Por lo tanto, el código final de nuestro archivo default.phtml tiene este aspecto:

Ahora, si guarda todos estos archivos y vuelve a cargar la página principal, debería ver algo como esto:

Top Cart FixedTop Cart FixedTop Cart Fixed

Tenemos algunos problemas con los estilos, pero la representación del HTML está bastante cerca de nuestro diseño requerido del HTML. Ahora que hemos completado la sección de cabecera superior, la siguiente es la sección de logotipo. Por suerte no hay mucho que hacer allí, excepto la parte de estilo (para hacer el centro del logotipo alineado) que vamos a hacer en el artículo de estilo. Nuestros elementos de menú también parecen muy cerca de lo que esperamos, por lo que sólo tendrá que modificar la barra de búsqueda, y luego el control deslizante principal.

Para modificar nuestra barra de búsqueda, activemos las sugerencias de la plantilla y veamos qué parte es responsable de procesar este código: frontend/rwd/default/template/catalogsearch/form.mini.phtml.

Actualmente, este archivo se ve así:

Por lo tanto, utilizaremos las divs externas del HTML y reemplazaremos el contenido interno por el contenido dinámico. Nuestro nuevo archivo form.mini.phtml se verá así:

En la última parte de este artículo, editaremos el deslizador principal. Para eso, crearemos un nuevo bloque estático, yendo a CMS > Static Blocks> Add New Block. Nombraremos este Bloque 'Deslizante de la página de inicio', e insertaremos el identificador como 'home-slider', así es como el código será capaz de encontrar este bloque.

Creating Homepage Slider Static BlockCreating Homepage Slider Static BlockCreating Homepage Slider Static Block

Ahora ingresaremos el código del deslizador desde tu HTML.

Tenga en cuenta que hemos reemplazado el origen de la imagen en relación con el directorio de skin usando la etiqueta skin_url de esta manera:

Ahora vamos a añadir estas líneas en el archivo header.phtml que creamos en el último artículo, justo encima de la última línea <?php echo $this->getChildHtml('topContainer'); ?>

El último paso es quitar el control deslizante actual. Para ello, vaya a CMS-Pages > Madison Island, y desde la sección Content, quite todo el código hasta el inicio de la sección de estilo.

Removing previous Home SliderRemoving previous Home SliderRemoving previous Home Slider

Guarde todo y vuelva a cargar la página de inicio, y ahora debe ver que todo viene muy bien. Algunos estilos están desactivados, pero trataremos de eso en un tutorial de estilo independiente. Por ahora sólo tenemos que cuidar la sección de contenido de la página de inicio, donde mostraremos un carrusel de productos más reciente, y luego personalizaremos el pie de página. Vamos a hacer todo esto en el próximo tutorial, ¡así que estate atento a ello!

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.