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

A medida que establecemos el escenario en el artículo de arranque previo, ahora es el momento de profundizar en el código y comenzar a realizar cambios. Como una opción obvia, comenzaremos el proceso de edición desde la página de inicio.

En este primer artículo vamos a editar parcialmente la sección del encabezado. Editaremos los archivos de envoltura predeterminados y el archivo header.phtml, y luego comenzaremos a editar los diferentes componentes del encabezado como moneda, selector de idioma, etc. Entonces, sin más dilación, comenzaremos el proceso de edición.

En primer lugar, habilitaremos la Consejos de plantilla desde el panel de administración, yendo a Sistema> Desarrollador> Depurar, y mientras lo hacemos nos aseguraremos de que Alcance de configuración actual se establece en Sitio web principal. Al habilitar sugerencias de plantilla, sabremos qué plantilla es responsable de los estilos de encabezado. Así es como se verá la página de inicio cuando las sugerencias de plantillas estén activadas..

Aquí, como puede ver, el contenedor más externo en el que se incluyen todos los demás archivos proviene de frontend / rwd / default / template / page / 1column.phtml, que es del tema de RWD, ya que hemos heredado nuestro tema de este tema predeterminado. En lugar de editar este archivo directamente en el tema RWD, crearemos una carpeta similar en nuestro tema vstyle en esta ubicación: frontend / tutsplus / vstyle / template / page. Luego copiaremos estos archivos en esta carpeta y los editaremos allí. Entonces, vamos a la frontend / rwd / default / template / page directorio y copia 1column.phtml, 2column-left.phtml, 2column-right.phtml, y 3column.phtml en esta carpeta recién creada.

Si nos fijamos en el código de 1-column.phtml, es así:

         getChildHtml ('head')?>  getBodyClass ()? '': "? >> getChildHtml ('after_body_start')?>  getChildHtml ('global_notices')?>  getChildHtml ('header')?>   getChildHtml ('breadcrumbs')?>  getChildHtml ('global_messages')?> getChildHtml ('contenido')?> 
 
 
 getChildHtml ('footer_before')?> getChildHtml ('footer')?> getChildHtml ('global_cookie_notice')?> getChildHtml ('before_body_end')?> 
 
 getAbsoluteFooter ()?>

Ahora tenemos que modificarlo para que coincida con nuestro archivo index.html, así que usaremos nuestras clases de cuerpo y contenedor, y agregaremos algunos divs adicionales, y el código editado se verá así:

   getChildHtml ('head')?>  getBodyClass ()? '': "? >> getChildHtml ('after_body_start')?>  getChildHtml ('global_notices')?> getChildHtml ('header')?>   getChildHtml ('global_messages')?> getChildHtml ('contenido')?> 
 
 
  getChildHtml ('footer_before')?> getChildHtml ('footer')?> getChildHtml ('global_cookie_notice')?> getChildHtml ('before_body_end')?> 
 
 getAbsoluteFooter ()?>

Del mismo modo también vamos a editar el 2column-left.phtml, 2column-right.phtml, y 3column.phtml archivos. Así buscará el código modificado. 2-column-left.phtml:

   getChildHtml ('head')?>  getBodyClass ()? '': "? >> getChildHtml ('after_body_start')?>  getChildHtml ('global_notices')?> getChildHtml ('header')?>     getChildHtml ('left')?> 
  getChildHtml ('global_messages')?> getChildHtml ('contenido')?> 
 
 
 
 
  getChildHtml ('footer_before')?> getChildHtml ('footer')?> getChildHtml ('global_cookie_notice')?> getChildHtml ('before_body_end')?> 
 
 getAbsoluteFooter ()?>

Siguiente, 2columns-right.phtml Se verá así después de la edición:

   getChildHtml ('head')?>  getBodyClass ()? '': "? >> getChildHtml ('after_body_start')?>  getChildHtml ('global_notices')?> getChildHtml ('header')?>     getChildHtml ('global_messages')?> getChildHtml ('contenido')?> 
  getChildHtml ('right')?> 
 
 
 
 
  getChildHtml ('footer_before')?> getChildHtml ('footer')?> getChildHtml ('global_cookie_notice')?> getChildHtml ('before_body_end')?> 
 
 getAbsoluteFooter ()?>

Por último, vamos a editar. 3columns.phtml Me gusta esto:

   getChildHtml ('head')?>  getBodyClass ()? '': "? >> getChildHtml ('after_body_start')?>  getChildHtml ('global_notices')?> getChildHtml ('header')?>     getChildHtml ('left')?> 
  getChildHtml ('global_messages')?> getChildHtml ('contenido')?> 
  getChildHtml ('right')?> 
 
 
 
 
  getChildHtml ('footer_before')?> getChildHtml ('footer')?> getChildHtml ('global_cookie_notice')?> getChildHtml ('before_body_end')?> 
 
 getAbsoluteFooter ()?>

Mire cuidadosamente los cambios que hemos realizado en estos archivos de plantilla. Cuando lo compare con el archivo index.html de nuestro sitio web HTML, tendrá sentido para usted.

Así es como debería verse el sitio web después de editar estos archivos. No verás mucha diferencia, pero vamos en la dirección correcta.

A continuación vamos a editar el archivo header.phtml, ya que podemos ver que este es el archivo que tiene el contenido del contenedor de la sección del encabezado. Por lo tanto, vamos a copiar el frontend / rwd / default / template / page / html / header.phtml archivo, moverlo a la frontend / tutsplus / vstyle / template / page / html carpeta, y empezar a editarlo. Actualmente su código se verá así:

   getChildHtml ('store_language')?> 
 getChildHtml ('currency_switcher')?> getChildHtml ('bienvenido')?> getAdditionalHtml ()?>
 
 
   getUrl (")?>">     
     __('Menú'); ?>    __('Buscar'); ?>   helper ('cliente') -> getAccountUrl (); ?> "data-target-element =" # header-account ">  __('Cuenta'); ?>    getChildHtml ('minicart_head'); ?> 
 
 
   getChildHtml ('topMenu')?> 
   getChildHtml ('topSearch')?> 
   getChildHtml ('topLinks')?> 
 
  getChildHtml ('topContainer'); ?>

Lo compararemos con la sección de encabezado de nuestro HTML y comenzaremos a realizar estos cambios en él:

     ¡Llámanos ahora! 0800-123-456-78
 
      Ing
 Vns
 Fer
 Joya
 
 
   Dólar estadounidense
 UKD
 FER
 
 
 
  
 
  carro     
  Silla Lincoln
 Tamaño: Una talla
 Cantidad: 01
 
  $ 30.00
 
 
 
   
  Silla Lincoln
 Tamaño: Una talla
 Cantidad: 01
 
  $ 30.00
 
 
 
 Total $ 60.00

Insertaremos este HTML en el archivo header.phtml y reemplazaremos las secciones de diferencias con las etiquetas de plantillas dinámicas relevantes como el selector de moneda, el idioma de la tienda, el logotipo, el menú, la barra de búsqueda, etc.

     getChildHtml ('bienvenido')?> getAdditionalHtml ()?>
 
    getChildHtml ('currency_switcher')?> getChildHtml ('store_language')?> 
  ">
 
   getChildHtml ('minicart_head'); ?> 
 
 
 
 
 
 
 
      getUrl (")?>">    
 
 
 
 
      getChildHtml ('topMenu')?> 
 
    getChildHtml ('topSearch')?> 
 
 
 
 
 
 getChildHtml ('topContainer'); ?>

Así es como se verá la sección del encabezado después de editar el header.phtml expediente:

Ahora, como puede ver, necesitamos modificar el código de las diferentes secciones que estamos utilizando, como el selector de idioma y moneda, el control deslizante, el menú, la barra de búsqueda, etc. Para comenzar, editaremos los selectores de moneda e idioma. Si volvemos a habilitar las sugerencias de plantilla, podemos ver que la sección del selector de idioma proviene de base / default / template / page / switch / languages.phtml, así que copiaremos este archivo en nuestro tema en la misma ubicación y comenzaremos a editarlo para que coincida con nuestro código HTML. El original languages.phtml archivo se ve así:

getStores ())> 1):?>  __ ('Tu idioma:')?>

El código HTML original para el selector de idioma y moneda se ve así:

   Ing
 Vns
 Fer
 Joya
 
 
   Dólar estadounidense
 UKD
 FER

Despues modificamos languages.phtml para que coincida con el HTML, se verá así:

getStores ())> 1):?>    getStores () como $ _lang):?>  getCurrentUrl ()?> "> escapeHtml ($ _ lang-> getName ()); $ langName = substr ("$ langName", 0, 3); $ langName = strtoupper ($ langName); echo $ langName; ?>

Como puede ver, el selector de moneda no está apareciendo en nuestro sitio web por ahora. Primero tenemos que habilitar el selector de moneda desde el panel de administración. Desde Sistema> Configuración> General> Configuración de moneda, Primero debes habilitar algunos idiomas, y luego desde Sistema> Gestionar moneda> Tasas establecer los tipos de cambio. Luego verá que el selector de moneda está habilitado en su sitio web. Al habilitar los consejos de plantilla nuevamente, podemos ver que su plantilla es rwd / default / template / directory / currency.phtml, y su código actual se verá así:

getCurrencyCount ()> 1):?>  __ ('Tu moneda:')?>

Lo editaremos para que coincida con nuestro HTML, por lo que el código modificado se verá así:

getCurrencyCount ()> 1):?>    getCurrencies () como $ _code => $ _name):?>  getSwitchCurrencyUrl ($ _ code)?> ">

A continuación, editaremos nuestro mensaje de bienvenida para que coincida con nuestro diseño HTML. Para eso tendremos que ir a Sistema> Configuración / General / Diseño / Encabezado / Texto de bienvenida. Después de editar esto, el encabezado se verá así:

Si ha seguido todos los pasos correctamente, espero que pueda ver mucho progreso en el aspecto de su página de inicio. Ahora que hemos editado parcialmente la sección del encabezado, continuaremos editando la sección del encabezado en el siguiente artículo, y también editaremos el control deslizante principal en ese artículo.

Por favor explique sus experiencias en la sección de comentarios.!

Código