Advertisement
  1. Code
  2. Magento

Magento Theme Development: Página del producto, Parte 1

Scroll to top
Read Time: 12 mins
This post is part of a series called Magento Theme Development.
Magento Theme Development: Category Page, Part 2
Magento Theme Development: Product Page, Part 2

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

Ahora que hemos completado la página principal y la página de categorías, en este tutorial empezaremos a editar la tercera página más importante del sitio web de comercio electrónico: la página del producto. Primero abriremos la página del producto y veremos cómo se ve ahora y cómo queremos que se vea.

La página del producto en nuestro diseño HTML se parece a esto:

HTML design of product pageHTML design of product pageHTML design of product page

Nuestra página actual del producto tiene este aspecto:

Product Page before editingProduct Page before editingProduct Page before editing

Para comenzar a editarlo, haremos el mismo paso que hemos hecho docenas de veces hasta el momento, es decir, permitiendo que las sugerencias de la plantilla determinen qué archivos de plantilla son responsables de procesar esta página.

Enabling template hintsEnabling template hintsEnabling template hints

Como podemos ver, la página es una compilación de más de una docena de archivos, pero afortunadamente no tenemos que editar todos estos. Solo tendremos que editar tres o cuatro de estos archivos, y para el resto simplemente modificaremos los estilos para que se parezcan a nuestro diseño, sin tener que manipular los archivos phtml.

Si observa de cerca, la estructura general de la sección de producto proviene del archivo \ template \ catalog \ product \ view.phtml. Lo he señalado a través de una flecha en la imagen anterior. Este archivo está proporcionando la estructura externa de todos los componentes y luego las partes internas vienen de otras plantillas, pero vamos a editar este externo primero.

Copiamos este archivo view.phtml en nuestro nuevo tema y empezaremos a editarlo. El código actual de este archivo se ve así:

Ahora tenemos que revisar nuestro código HTML, y pondremos todo nuestro código HTML en este archivo view.phtml y comenzaremos a editarlo. El código actual del archivo details.html en nuestro archivo de diseño HTML es así (sólo estoy copiando el código de la parte del producto, excluyendo el encabezado, la sección de pie de página, etc.):

Sé que es un montón de código, y puede que te asuste. Pero no te preocupes, porque como verás cuando comencemos a colocar las etiquetas dinámicas en él, el código comenzará a fundirse rápidamente, y no tenemos que preocuparnos por la mayoría de ellas.

Ahora empezaremos a editar este código HTML insertando etiquetas dinámicas de nuestro archivo real view.phtml.

En primer lugar, vamos a añadir estas líneas en la parte superior, para hacer algo de inicialización:

A continuación, cierre la div de vista de producto al final del archivo (línea 314):

A continuación vamos a envolver los detalles del producto div dentro de un elemento de formulario, ya que está en el archivo view.phtml real. Así que vamos a añadir estas líneas dentro de la div de product-details en la línea 10:

Asimismo, cerraremos este formulario form y también copiaremos este JavaScript de view.phtml en la línea 77:

En el paso siguiente, dentro de tab-box div (que comienza en la línea 129), quite todo el código existente y copie el siguiente código de tabulación de view.phtml (alrededor de 100 líneas de código reemplazadas por estas pocas líneas). Para asegurarse de que la pestaña JavaScript sigue funcionando bien, agregamos la división actual de las tabulaciones tab-box div, por lo que el nuevo código se verá así:

Con todo lo hecho, ahora insertaremos la etiqueta <?php echo $this->getChildHtml('related_products') ?> Dentro de la div de hot-products, después de eliminar el código existente, para que se vea así en la línea 166:

Vea cómo alrededor de 150 líneas de código se reemplaza con sólo estas tres líneas? Vamos a guardar todo y ver cómo la página está llegando hasta ahora. Si lo hiciste bien, debería ser algo como esto:

Product page after editing viewphtmlProduct page after editing viewphtmlProduct page after editing viewphtml

Podría parecer un desastre, pero confía en mí, nos estamos acercando a lo que queremos que se vea la página. En el siguiente artículo, editaremos los archivos responsables de procesar la sección de imágenes, productos relacionados, etc., y finalmente haremos algunos arreglos de estilo y nuestra página de producto estará lista.

Al final, permítanme reiterar que los grandes trozos de código mostrados anteriormente podrían intimidarle al principio, pero una vez que empiece a reemplazar el código con las etiquetas dinámicas adecuadas, pronto se dará cuenta de que la edición de estos no es mucho trabajo.

En el siguiente artículo, completaremos el resto de esta página editando otros archivos phtml.

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.