CursosEmpresasBlogLiveConfPrecios

Maquetación de Detalle de Productos en HTML y CSS

Clase 20 de 22 • Curso Práctico de Frontend Developer

Clase anteriorSiguiente clase
Resumen

Llegó el momento de maquetar el detalle de los productos, es decir, el componente que le permite al usuario obtener más información acerca de un artículo que se representa con texto. Esta pantalla es la misma en todos los dispositivos. Contiene una imagen, texto y un botón.

detalle.png

Uso de aside en HTML5

Esta vista la podemos incluir dentro de la etiqueta aside, puesto que este elemento representa una sección de la página que consiste en contenido que está indirectamente relacionado con el principal del documento.

Debemos considerar que la descripción del producto es variable y es importante que comprobemos que se vea bien con diferentes cantidades de palabras. Para esto podemos hacer utilizar el texto simulado de Lorem Ipsum.

En Visual Studio Code:

<p>lorem*cantidadDeLineas</p>

La estructura completa es:

<aside class="product-detail">
    <div class="product-detail-close">
      <img src="./icons/icon_close.png" alt="close">
    </div>
    <img src="https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="bike">
    <div class="product-info">
      <p>$35,00</p>
      <p>Bike</p>
      <p>With its practical position, this bike also fulfills a decorative function, add your hall or workspace.</p>
      <button class="primary-button add-to-cart-button">
        <img src="./icons/bt_add_to_cart.svg" alt="add to cart">
        Add to cart
      </button>
    </div>
  </aside>

Cómo estilizar un componente aside

Para el aside, en nuestro caso, el detalle de producto, podemos reutilizar algunos de los estilos que ya definimos, así mantendremos un tono uniforme en la tienda virtual.

Los pasos que deberías aplicar son los siguientes:

  1. Añade al botón la clase “primary-button” y luego añade otra para poder implementar Flexbox
.primary-button {
      background-color: var(--hospital-green);
      border-radius: 8px;
      border: none;
      color: var(--white);
      width: 100%;
      cursor: pointer;
      font-size: var(--md);
      font-weight: bold;
      height: 50px;
    }
    .add-to-cart-button {
      display: flex;
      align-items: center;
      justify-content: center;
    }
  1. Estiliza la imagen y la “x” de cerrar la vista

Como tenemos más de una imagen dentro de la misma clase contenedora, empleamos
el selector combinador “hijo directo”.
image

 .product-detail {
      width: 360px;
      padding-bottom: 24px;
      position: absolute;
      right: 0;
    }
    .product-detail-close {
      background: var(--white);
      width: 14px;
      height: 14px;
      position: absolute;
      top: 24px;
      left: 24px;
      z-index: 2;
      padding: 12px;
      border-radius: 50%;
    }
    .product-detail-close:hover {
      cursor: pointer;
    }
    .product-detail > img:nth-child(2) {
      width: 100%;
      height: 360px;
      object-fit: cover;
      border-radius: 0 0 20px 20px;
    }
    1. Continúa con la parte que enseña la información
.product-info {
      margin: 24px 24px 0 24px;
    }
    .product-info p:nth-child(1) {
      font-weight: bold;
      font-size: var(--md);
      margin-top: 0;
      margin-bottom: 4px;
    }
    .product-info p:nth-child(2) {
      color: var(--very-light-pink);
      font-size: var(--md);
      margin-top: 0;
      margin-bottom: 36px;
    }
    .product-info p:nth-child(3) {
      color: var(--very-light-pink);
      font-size: var(--sm);
      margin-top: 0;
      margin-bottom: 36px;
    }
    1. Modifica el width para que ocupe el 100% de la pantalla de un móvil
    @media (max-width: 640px) {
      .product-detail {
        width: 100%;
      }
    }

Slider con imágenes del producto

Hasta aquí el detalle solamente tiene una imagen, pero es muy común que sean más. Así, el usuario puede hacerse una idea más clara de lo que está por comprar. Diseño propone esto con los “puntitos” que aparecen debajo de la heladera.

Una forma de lograrlo es agregándole al HTML justo debajo de la etiqueta img las siguientes líneas:

  <div class="dots">
            <span class="dot"></span>
            <span class="dot"></span>
            <span class="dot"></span>
   </div>

Estos son los estilos:

.dots {
        text-align: center;
    }

    .dot {
        cursor: pointer;
        height: 8px;
        width: 8px;
        margin: 0 2px;
        background-color: var(--very-light-pink);
        border-radius: 50%;
        display: inline-block;
    }

    .dots span:nth-child(1) {
        background-color: var(--hospital-green);
    }

Pero, ¿cómo conseguimos que al hacer clic en un punto aparezca otra imagen? Implementando JavaScript, por ejemplo. Esto es un concepto apasionante para profundizar.

Contribución creada por: Guadalupe Monge Barale con los aportes de Alan Alberto Dromundo Arias