Accentsconagua

Desarrollo del tema Magento página del producto, parte 2

Código
Share

En este artículo de la serie Desarrollo de temas de Magento, finalizaremos la página del producto desde donde la dejamos en el artículo anterior. Editaremos los archivos phtml responsables de representar la sección de medios, la sección de productos relacionados, etc..

Ahora, comencemos a agregar la etiqueta dinámica de imágenes, precio, descripción, etc., dentro de la división de detalles de producto que comenzamos a editar en el artículo anterior..

Comenzaremos añadiendo la etiqueta dinámica de las imágenes. Si observamos nuestro HTML editado, el código para medios se extiende desde las líneas 19 a 28. Reemplazaremos todo esto con una sola línea de código:

getChildHtml ('media')?>

Como podemos ver en el archivo view.phtml real, esta única línea está obteniendo todo el código para mostrar las imágenes.

Así que el nuevo código en la línea 18 se verá así:

 getChildHtml ('media')?>

A continuación, reemplazaremos el nombre del producto en la línea 22 con este código dinámico:

productAttribute ($ _ product, $ _product-> getName (), 'name')?>

En la línea 24, reemplazaremos el código de precio con esto:

 getPriceHtml ($ _ producto); ?> getChildHtml ('bundle_prices')?> getTierPriceHtml ()?>

Dentro de la clase pull-right en la línea 29, agregaremos el código para mostrar la revisión y la disponibilidad del producto. Entonces el nuevo código en la línea 29 se verá así:

 getReviewsSummaryHtml ($ _ producto, 'predeterminado', falso)?> getChildHtml ('product_type_availability'); ?>

A continuación, reemplazaremos la descripción codificada escrita en la línea 33 con esta etiqueta dinámica:

productAttribute ($ _ product, nl2br ($ _ product-> getShortDescription ()), 'short_description')?>

Si observamos el archivo HTML que estamos editando, lo siguiente que veremos son los cuadros desplegables para la selección de opciones de productos. Reemplazaremos ese código dentro del div de entrada de tamaño con este código dinámico:

getChildHtml ('otro');?> isSaleable () && $ this-> hasOptions ()):?> getChildChildHtml ('container1', ", true, true)?>

Ahora, este código no generará automáticamente las opciones para el producto, sino que también mostrará el botón 'agregar al carrito' y las opciones para compartir. Entonces, también podemos eliminar el siguiente código, que viene después .div de entrada de tamaño:

 
 
Cantidad:

Ahora, si miramos la página actual, todo está en su lugar y funcionando bien. Solo necesitamos modificar el código interno de algunos elementos, como el área de imágenes, la sección de productos relacionados, etc. Y, por último, solo tenemos que repasar el CSS y nuestra página estará lista.

Sin más demora, comencemos a editar el código de la sección de imágenes. Recuerde que reemplazamos todas las imágenes HTML con una sola línea de código: getChildHtml ('media')?>. Esta línea de código muestra aquí el código de la plantilla de archivo \ catalog \ product \ view \ media.phtml: También puede verificar esto, habilitando las sugerencias de la plantilla y comprobando de dónde proviene el código para la sección de imágenes..

Ahora que hemos determinado el archivo responsable de generar este código, copiemos ese archivo del tema rwd predeterminado en nuestro nuevo tema y comencemos a editarlo. El código para el archivo media.phtml se ve así:

getProduct (); $ _helper = $ this-> helper ('catalog / output'); ?> 
 
 <?php echo $this->escapeHtml ($ this-> getImageLabel ())?>  getGalleryImages () como $ _image):?> isGalleryImageVisible ($ _ image)):?>    
 
 getGalleryImages ())> 0):?> 
 
__ ('Más vistas')?>
 
     getGalleryImages () como $ _image):?> isGalleryImageVisible ($ _ image)):?> 
  •  escapeHtml ($ _ image-> getLabel ())?> "data-image-index =""> <?php echo $this->escapeHtml ($ _ image-> getLabel ())?>   
    •    
 
  getChildHtml ('after'); ?>

En primer lugar, copiaremos este código HTML de nuestra sección de imágenes en un archivo media.phtml recién copiado:

 
 
 
     
    •  
    •  
    •  
    •  
    •

Ahora, comenzaremos a modificar este código para insertar el código dinámico en los lugares apropiados comparándolo con el archivo real media.phtml.

Comenzaremos agregando estas líneas en la parte superior del archivo:

getProduct (); $ _helper = $ this-> helper ('catalog / output'); ?>

Reemplazaremos el div con la clase preview-small con este código:

 <?php echo $this->escapeHtml ($ this-> getImageLabel ())?>  getGalleryImages () como $ _image):?> isGalleryImageVisible ($ _ image)):?>    
 getGalleryImages ())> 0):?> 
 
     getGalleryImages () como $ _image):?> isGalleryImageVisible ($ _ image)):?> 
  •  escapeHtml ($ _ image-> getLabel ())?> "data-image-index =""> <?php echo $this->escapeHtml ($ _ image-> getLabel ())?>   
    •

De manera similar, reemplazaremos el div con la clase thum-image con este código:

Y al final del código, agregaremos esta línea:

getChildHtml ('after'); ?>

Así que el código del archivo se verá así al final:

getProduct (); $ _helper = $ this-> helper ('catalog / output'); ?> 
 
 <?php echo $this->escapeHtml ($ this-> getImageLabel ())?>  getGalleryImages () como $ _image):?> isGalleryImageVisible ($ _ image)):?>    
 getGalleryImages ())> 0):?> 
 
     getGalleryImages () como $ _image):?> isGalleryImageVisible ($ _ image)):?> 
  •  escapeHtml ($ _ image-> getLabel ())?> "data-image-index =""> <?php echo $this->escapeHtml ($ _ image-> getLabel ())?>   
    •    
 
  
 getChildHtml ('after'); ?>

Ahora ya casi hemos terminado con la parte de imágenes. Al final arreglaremos algunos problemas de CSS, y se verá bastante cerca de nuestro diseño HTML.

Lo siguiente es arreglar la sección relacionada. Podemos ver, habilitando sugerencias de plantillas, que esta parte de la página proviene del archivo: plantilla \ catálogo \ producto \ lista \ related.phtml.

Como probablemente pueda adivinar, el siguiente paso sería copiar ese archivo en nuestra nueva carpeta de temas y luego comenzar a editarlo..

Crearemos un nuevo archivo y copiaremos el código HTML de la sección del producto relacionado de nuestro tema HTML. Aquí solo mantendremos una instancia del producto, ya que lo haremos en nuestro archivo phtml. El código que copiaremos será este:

 
Caliente Productos
 
<>
 
     
  •  
     
     
     
     
      
     Lee mas 
     
    Iphone 5s Oro 32 Gb 2013
     
    $ 451.00
     
     
     
     
    •

Ahora comenzaremos a dinamizarlo colocando etiquetas dinámicas en él mientras lo comparamos con el archivo related.phtml real.

Pondremos el código completo en esta etiqueta si:

getItems () -> getSize ()):?>

A continuación colocaremos esto para el bucle justo después de la fila div:

getItems () como $ _item):?>

A continuación, comenzaremos a colocar la etiqueta dinámica del nombre del producto, precio, descripción, url, etc., en la división de productos, como lo hicimos al editar productos en la página de inicio.

El código completo para este archivo después de la edición se verá así:

getItems () -> getSize ()):?> 
 
Relacionado Productos
 
<>
 
     
  •  
     getItems () como $ _item):?> 
     
     
     
     <?php echo $this->escapeHtml ($ _ item-> getName ())?>  
     getProductUrl ()?> "> Ver producto 
     
    escapeHtml ($ _ item-> getName ())?>
     
     getPriceHtml ($ _ item, true, '-relacionado')?> 
     
     
     
     
      
     
    •

Ahora casi hemos terminado con la edición del archivo phtml para la página del producto. Solo tenemos que solucionar algunos problemas de CSS, y nuestra página estará lista. Actualmente la página se ve así:

Hemos terminado con la mayor parte de ella. Ahora solo tenemos que editar el CSS para realizar los últimos cambios en esta página, lo que haremos en el próximo artículo, que también será el último artículo de la serie. Junto con los cambios de CSS para esta página, explicaré cómo puede hacer cambios en las otras páginas del tema utilizando las técnicas que ha aprendido en esta serie..

Código
×