Construir la vista de detalle de un producto es una de las tareas más frecuentes en cualquier proyecto de e-commerce. Aquí se aborda paso a paso cómo estructurar el HTML, aplicar estilos CSS y garantizar que el resultado se adapte correctamente a dispositivos móviles y de escritorio, todo partiendo de un diseño base en Zeplin.
¿Cómo se estructura el HTML del detalle de producto?
El primer paso consiste en definir un contenedor semántico. En este caso se utiliza un elemento aside con la clase product-detail [0:30]. Dentro de este contenedor se colocan dos imágenes: una para el ícono de cerrar (la X) y otra para la imagen principal del producto, como una bicicleta.
html
<aside class="product-detail">
<div class="product-detail-close">
<img src="./icons/close.png" alt="close">
</div>
<img src="https://...bike.jpg" alt="bike">
<div class="product-info">
<p>$35.00</p>
<p>Bike</p>
<p>It's practical. Add your haul to your workspace.</p>
</div>
<button class="primary-button add-to-cart-button">
<img src="./icons/add_to_cart.png" alt="add to cart">
Add to cart
</button>
</aside>
La sección product-info agrupa el precio, el nombre y la descripción del producto [2:05]. Debajo se añade un botón con la clase primary-button reutilizada de clases anteriores y una clase adicional add-to-cart-button para personalizar su disposición.
¿Cómo se alinea el contenido del botón con flexbox?
Para que el ícono del carrito y el texto queden centrados dentro del botón, se aplica display flex junto con align-items: center y justify-content: center [3:18]. Este patrón de flexbox es esencial cuando necesitas alinear elementos en línea dentro de un contenedor.
css
.add-to-cart-button {
display: flex;
align-items: center;
justify-content: center;
}
¿Cómo se estiliza el botón de cerrar con position absolute?
El ícono de cerrar necesita flotar sobre la imagen del producto. Para lograrlo se emplea position absolute tanto en el div contenedor como en la imagen [4:50]. Sin embargo, position absolute solo funciona correctamente cuando existe un elemento padre con position relative, que en este caso es el propio product-detail [7:55].
- Se asigna
top: 24px y left: 24px para separar el ícono de las esquinas.
- Un
background: white con border-radius: 50% crea el fondo circular blanco.
- El z-index de valor dos garantiza que el botón quede por encima de la imagen, respetando el contexto de apilamiento [6:10].
- El
cursor: pointer en el hover indica visualmente que el elemento es interactivo [4:25].
css
.product-detail-close {
position: absolute;
top: 24px;
left: 24px;
background: white;
padding: 12px;
border-radius: 50%;
z-index: 2;
cursor: pointer;
}
¿Cómo se ajusta la imagen principal y la información del producto?
La imagen de la bicicleta ocupa todo el ancho del contenedor (360px) y se le aplica la propiedad object-fit: cover [9:15] para que se recorte proporcionalmente sin deformarse. El border-radius se configura con la técnica de las manecillas del reloj: cero arriba y veinte píxeles en las esquinas inferiores.
css
.product-detail > img:nth-child(2) {
width: 360px;
height: 360px;
object-fit: cover;
border-radius: 0 0 20px 20px;
}
¿Cómo se diferencian los párrafos con nth-child?
Cada párrafo dentro de product-info recibe estilos distintos usando el selector nth-child [10:30]:
- Primer párrafo (precio):
font-weight: bold, tamaño mediano y un margin-bottom de 4px.
- Segundo párrafo (nombre): mismo tamaño de fuente, color
very-light-pink y un margin-bottom de 36px para separarlo de la descripción.
- Tercer párrafo (descripción): fuente más pequeña y el mismo color suave.
El contenedor product-info usa márgenes de 24px en los laterales y en la parte superior para evitar que el texto quede pegado a los bordes [12:20].
¿Cómo se logra el diseño responsive con media queries?
El contenedor se posiciona a la derecha de la pantalla con position: absolute y right: 0 [13:05]. Para pantallas menores a 640px se aplica un media query que cambia el width de 360px a 100%, logrando que ocupe todo el ancho disponible [13:40].
css
@media (max-width: 640px) {
.product-detail {
width: 100%;
}
}
Este punto de quiebre puede ajustarse en coordinación con el equipo de diseño según las necesidades del proyecto. Con estos estilos, la vista de detalle queda completamente funcional tanto en escritorio como en dispositivos móviles.
¿Tienes alguna variación en tu diseño de detalle de producto? Comparte cómo lo resolviste en los comentarios.
