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

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

Como hemos arreglado parcialmente el encabezado superior, lo único que debe arreglarse allí es la sección superior del carro. Para personalizar el carro del encabezado, primero intentaremos averiguar qué archivos de plantilla son responsables de representar esa parte. Para analizar eso, primero agreguemos algunos productos al carro, para que podamos investigarlo completamente.

A medida que habilitamos las sugerencias de plantilla, podemos ver que el contenedor externo del carro del encabezado proviene de este archivo de plantilla: frontend / rwd / default / template / checkout / cart / minicart.phtml.Luego, al hacer clic, la porción expandida se representa a través de este archivo: frontend / rwd / default / template / checkout / cart / minicart / items.phtml. Finalmente, cada artículo del carrito se representa a través de este archivo: frontend / rwd / default / template / checkout / cart / minicart / default.phtml.

Importaremos todos estos archivos en nuestro tema recién creado y luego comenzaremos a modificarlos..

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

getSummaryCount (); if (vacío ($ _ cartQty)) $ _cartQty = 0; ?> helper ('checkout / cart') -> getCartUrl (); ?> "data-target-element =" # header-cart ">  __('Carro'); ?>    getChildHtml ('minicart_content');?>

Ahora, antes de iniciar cualquier modificación en él, verifiquemos el código de nuestra sección de carros de encabezado en nuestro archivo HTML original. El código allí se ve así:

 carro     
  Silla Lincoln
 Tamaño: Una talla
 Cantidad: 01
 
  $ 30.00
 
 
 
   
  Silla Lincoln
 Tamaño: Una talla
 Cantidad: 01
 
  $ 30.00
 
 
 
 Total $ 60.00

Entonces, comenzaremos a modificar el código del archivo PHP para hacerlo similar a nuestro código HTML. Aquí solo usaremos una etiqueta de anclaje para envolver el ícono del carrito, y luego mostraremos el contenido del minicart. Por lo tanto nuestro código se verá así:

helper ('checkout / cart') -> getCartUrl (); ?> "> carrito  getChildHtml ('minicart_content');?>

Aquí hemos reemplazado el envoltorio más externo del carro superior, pero ahora necesitamos editar el envoltorio de la sección desplegable. Como ya hemos visto, esa envoltura viene de frontend / rwd / default / template / checkout / cart / minicart / items.phtml. Veamos el código actual de este archivo:

getSummaryCount (); if (vacío ($ _ cartQty)) $ _cartQty = 0; ?> 
 
   __ ('Artículo (s) recientemente agregado')?> __ ('Cerrar'); ?> "> × 
 getRecentItems ()?>      getItemHtml ($ _ item)?>  
 
   getChildHtml ('cart_promotion')?> 
   canApplyMsrp ()):?> __ ('EL TOTAL DEL PEDIDO SERÁ VISUALIZADO ANTES DE QUE ENVÍE EL PEDIDO'); ?>  __ ('Subtotal del carrito:')?> formatPrice ($ this-> getSubtotal ())?> getSubtotalInclTax ()):?> 
(formatPrice ($ _ subtotalInclTax)?> getIncExcText (true)?>)   
 
  isPossibleOnepageCheckout ()):?>  getChildHtml ('extra_actions')?>  __ ('Checkout')?> "Href ="getCheckoutUrl ()?> "> __ ('Checkout')?>  
 
  getUrl ('pago / carrito'); ?> "> __('Ver carro de compras'); ?>  
  __ ('No tiene artículos en su carrito de compras')?>

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

getSummaryCount (); if (vacío ($ _ cartQty)) $ _cartQty = 0; ?> 
 
 getRecentItems ()?>      getItemHtml ($ _ item)?>    canApplyMsrp ()):?> __ ('EL TOTAL DEL PEDIDO SERÁ VISUALIZADO ANTES DE QUE ENVÍE EL PEDIDO'); ?>  __ ('Subtotal del carrito:')?> formatPrice ($ this-> getSubtotal ())?> getSubtotalInclTax ()):?> 
(formatPrice ($ _ subtotalInclTax)?> getIncExcText (true)?>)     
  __ ('No tiene artículos en su carrito de compras')?>

Ahora, la parte final que queda es el estilo del elemento de la lista del carrito. 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 del archivo es simplemente calcular el precio correcto y otras opciones de productos. Nuevamente, revisaremos nuestro código HTML, lo pondremos en este archivo y comenzaremos a reemplazar el texto estático con valores dinámicos. Este es el código para cada artículo del carrito en nuestro HTML:

  
  Silla Lincoln
 Tamaño: Una talla
 Cantidad: 01
 
  $ 30.00

Vamos a reemplazar el img etiqueta con este:

A continuación, reemplazaremos el nombre con código dinámico:

hasProductUrl ()):?> getProductUrl ()?> ">escapeHtml ($ this-> getProductName ())?>hasProductUrl ()):?>

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

getOptionList ()):?>  escapeHtml ($ _ option ['label'])?>:

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

__ ('Qty:'); ?> getQty ()?>

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

 __ ('Ver precio antes de la confirmación del pedido'); ?>  ayudante ('impuesto') -> displayCartPriceExclTax () || $ this-> helper ('tax') -> displayCartBothPrices ()):?> ayudante ('impuesto') -> displayCartBothPrices ()):?> __ ('Excl. Tax'); ?>:  typeOfDisplay ($ _ item, array (0, 1, 4), 'sales')):?> helper ('checkout') -> formatPrice ($ _ item-> getCalculationPrice () + $ _ item-> getWeeeTaxAppliedAmount () + $ _ item-> getWeeeTaxDisposition ()); ?>  helper ('checkout') -> formatPrice ($ _ item-> getCalculationPrice ())?>  getApplied ($ _ item)):?> 
 typeOfDisplay ($ _ item, 1, 'sales')):?>  getApplied ($ _ item) como $ tax):?> : formatPrice ($ tax ['amount'], true, true); ?>   typeOfDisplay ($ _ item, 2, 'sales')):?> getApplied ($ _ item) como $ tax):?> : formatPrice ($ tax ['amount_incl_tax'], true, true); ?>
  typeOfDisplay ($ _ item, 4, 'sales')):?>  getApplied ($ _ item) como $ tax):?> : formatPrice ($ tax ['amount_incl_tax'], true, true); ?>
    typeOfDisplay ($ _ item, 2, 'sales')):?> __('Total'); ?>:
 helper ('checkout') -> formatPrice ($ _ item-> getCalculationPrice () + $ _ item-> getWeeeTaxAppliedAmount () + $ _ item-> getWeeeTaxDisposition ()); ?>    ayudante ('impuesto') -> displayCartPriceInclTax () || $ this-> helper ('tax') -> displayCartBothPrices ()):?> helper ('checkout') -> getPriceInclTax ($ _ item); ?> ayudante ('impuesto') -> displayCartBothPrices ()):?> 
__ ('Imp. Incl.'); ?>:  typeOfDisplay ($ _ item, array (0, 1, 4), 'sales')):?> helper ('checkout') -> formatPrice ($ _ incl + Mage :: helper ('weee') -> getWeeeTaxInclTax ($ _ item)); ?>  helper ('checkout') -> formatPrice ($ _ incl - $ _ item-> getWeeeTaxDisposition ())?>  getApplied ($ _ item)):?> 
 typeOfDisplay ($ _ item, 1, 'sales')):?>  getApplied ($ _ item) como $ tax):?> : formatPrice ($ tax ['amount'], true, true); ?>
   typeOfDisplay ($ _ item, 2, 'sales')):?> getApplied ($ _ item) como $ tax):?> : formatPrice ($ tax ['amount_incl_tax'], true, true); ?>  typeOfDisplay ($ _ item, 4, 'sales')):?>  getApplied ($ _ item) como $ tax):?> : formatPrice ($ tax ['amount_incl_tax'], true, true); ?>
    typeOfDisplay ($ _ item, 2, 'sales')):?> __ ('Total incl. Impuestos'); ?>:
 helper ('checkout') -> formatPrice ($ _ incl + Mage :: helper ('weee') -> getWeeeTaxInclTax ($ _ item)); ?>

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

getAjaxDeleteUrl ()?>

He encontrado todo este código del actual default.phtml. No tienes que descubrir toda la lógica y el código por tu cuenta, pero si lo observas bien, puedes encontrarlo en el archivo que estás intentando modificar..

Así, el código final de nuestra default.phtml archivo se ve así:

obtiene el objeto(); $ isVisibleProduct = $ _item-> getProduct () -> isVisibleInSiteVisibility (); $ canApplyMsrp = Mage :: helper ('catalog') -> canApplyMsrp ($ _ item-> getProduct (), Mage_Catalog_Model_Product_Attribute_Source_Msrp_Type :: TYPE_BEFORE_ORDER_CONFIRM); ?>   
  hasProductUrl ()):?> getProductUrl ()?> ">escapeHtml ($ this-> getProductName ())?>hasProductUrl ()):?>
  getOptionList ()):?>  escapeHtml ($ _ option ['label'])?>:        
  __ ('Qty:'); ?> getQty ()?> 
 
    __ ('Ver precio antes de la confirmación del pedido'); ?>  ayudante ('impuesto') -> displayCartPriceExclTax () || $ this-> helper ('tax') -> displayCartBothPrices ()):?> ayudante ('impuesto') -> displayCartBothPrices ()):?> __ ('Excl. Tax'); ?>:  typeOfDisplay ($ _ item, array (0, 1, 4), 'sales')):?> helper ('checkout') -> formatPrice ($ _ item-> getCalculationPrice () + $ _ item-> getWeeeTaxAppliedAmount () + $ _ item-> getWeeeTaxDisposition ()); ?>  helper ('checkout') -> formatPrice ($ _ item-> getCalculationPrice ())?>  getApplied ($ _ item)):?> 
 typeOfDisplay ($ _ item, 1, 'sales')):?>  getApplied ($ _ item) como $ tax):?> : formatPrice ($ tax ['amount'], true, true); ?>   typeOfDisplay ($ _ item, 2, 'sales')):?> getApplied ($ _ item) como $ tax):?> : formatPrice ($ tax ['amount_incl_tax'], true, true); ?>
  typeOfDisplay ($ _ item, 4, 'sales')):?>  getApplied ($ _ item) como $ tax):?> : formatPrice ($ tax ['amount_incl_tax'], true, true); ?>
    typeOfDisplay ($ _ item, 2, 'sales')):?> __('Total'); ?>:
 helper ('checkout') -> formatPrice ($ _ item-> getCalculationPrice () + $ _ item-> getWeeeTaxAppliedAmount () + $ _ item-> getWeeeTaxDisposition ()); ?>    ayudante ('impuesto') -> displayCartPriceInclTax () || $ this-> helper ('tax') -> displayCartBothPrices ()):?> helper ('checkout') -> getPriceInclTax ($ _ item); ?> ayudante ('impuesto') -> displayCartBothPrices ()):?> 
__ ('Imp. Incl.'); ?>:  typeOfDisplay ($ _ item, array (0, 1, 4), 'sales')):?> helper ('checkout') -> formatPrice ($ _ incl + Mage :: helper ('weee') -> getWeeeTaxInclTax ($ _ item)); ?>  helper ('checkout') -> formatPrice ($ _ incl - $ _ item-> getWeeeTaxDisposition ())?>  getApplied ($ _ item)):?> 
 typeOfDisplay ($ _ item, 1, 'sales')):?>  getApplied ($ _ item) como $ tax):?> : formatPrice ($ tax ['amount'], true, true); ?>
   typeOfDisplay ($ _ item, 2, 'sales')):?> getApplied ($ _ item) como $ tax):?> : formatPrice ($ tax ['amount_incl_tax'], true, true); ?>  typeOfDisplay ($ _ item, 4, 'sales')):?>  getApplied ($ _ item) como $ tax):?> : formatPrice ($ tax ['amount_incl_tax'], true, true); ?>
    typeOfDisplay ($ _ item, 2, 'sales')):?> __ ('Total incl. Impuestos'); ?>:
 helper ('checkout') -> formatPrice ($ _ incl + Mage :: helper ('weee') -> getWeeeTaxInclTax ($ _ item)); ?>     
 getAjaxDeleteUrl ()?> ">

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

Tenemos algunos problemas con los estilos, pero la representación HTML es bastante similar a nuestro diseño HTML requerido. Ahora que hemos completado la sección del encabezado superior, la siguiente es la sección del logotipo. Afortunadamente, no hay mucho que hacer allí excepto la parte de estilo (para alinear el centro del logotipo) que haremos en el artículo de estilo. Nuestros elementos del menú también parecen estar muy cerca de lo que esperamos, así que solo tendremos que modificar la barra de búsqueda y luego el control deslizante principal.

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

Actualmente este archivo se ve así:

  __ ('Buscar:')?>   
 
  
 Si observamos el HTML de la barra de búsqueda en nuestro archivo de diseño HTML, se ve así:

Por lo tanto, usaremos los divs externos del HTML y reemplazaremos el contenido interno con el contenido dinámico. Nuestro nuevo form.mini.phtml archivo se verá así:

En la última parte de este artículo, editaremos el control deslizante principal. Para eso, crearemos un nuevo bloque estático, yendo a CMS> Bloques estáticos> Agregar nuevo bloque. Nombraremos este Bloque 'Control deslizante de página de inicio', e insertaremos el identificador como 'deslizador de casa'-Así es como el código podrá encontrar este bloque..

Ahora vamos a introducir el código deslizante de nuestro HTML.


 
    
 
   
  rayo de luz
 Lorem Ipsum es simplemente un texto de relleno de la industria de impresión y tipografía..
 Compra ahora 
 
   rayo de luz
 Lorem Ipsum es simplemente un texto de relleno de la industria de impresión y tipografía..
 Compra ahora

Tenga en cuenta que hemos reemplazado la fuente de la imagen relativa al directorio de la máscara utilizando el skin_url etiqueta como esta:

Ahora agregaremos estas líneas en el archivo header.phtml que creamos en el último artículo, justo arriba de la última línea getChildHtml ('topContainer'); ?>.

getIsHomePage ()):?> getLayout () -> createBlock ('csms / block') -> setBlockId ('home-slider') -> toHtml (); ?>

El último paso es eliminar el control deslizante actual. Para hacer eso, ve a CMS-Páginas> Madison Island, y de la Contenido sección, elimine todo el código hasta el inicio de la sección de estilo.

Guarda todo y vuelve a cargar la página de inicio, y ahora deberías verlo todo muy bien. Algunos estilos están desactivados, pero lo trataremos en un tutorial de estilo separado. Por ahora, solo tenemos que ocuparnos de la sección de contenido de la página de inicio, donde mostraremos el último carrusel de productos y luego personalizaremos el pie de página. Haremos todo esto en el siguiente tutorial, así que estad atentos.!

Código