CursosEmpresasBlogLiveConfPrecios

Estructura y Estilo de Pantalla del Carrito de Compras

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

Clase anteriorSiguiente clase
Resumen

El carrito de compras es la sección de la página que le permitirá al usuario ver los productos que agregó porque quiere comprarlos. Como puedes ver en la imagen, es una vista muy similar a sección "mi orden", por lo que utilizaremos el mismo código.

Solo nos falta elaborar nuestra pantalla del carrito para terminar nuestra página. Como se mencionó, es un proceso muy similar a los anteriores y podemos reutilizar el código de "my orders" .

cart.png

Maquetado básico con HTML de un carrito de compras

Llegó la hora de maquetar esta sección de la plataforma en HTML. Emplea estas líneas de código como guía para verificar que hayas hecho un gran trabajo y recuerda no memorizarlas, para garantizar que hayas aprendido correctamente.

  <aside class="product-detail">
    <div class="title-container">
      <img src="./icons/flechita.svg" alt="arrow">
      <p class="title">My order</p>
    </div>

    <div class="my-order-content">
      
      <div class="shopping-cart">
        <figure>
          <img src="https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="bike">
        </figure>
        <p>Bike</p>
        <p>$30,00</p>
        <img src="./icons/icon_close.png" alt="close">
      </div>
      
      <button class="primary-button">
        Checkout
      </button>
    </div>
  </div>
  </aside>

Estilos CSS para un carrito de compras

Los estilos de CSS para el carrito son, prácticamente, los mismos que para la sección que le muestra al usuario su orden de compra.

El CSS sugerido es:

.product-detail {
      width: 360px;
      padding: 24px;
      box-sizing: border-box;
      position: absolute;
      right: 0;
    }
    .title-container {
      display: flex;
    }
    .title-container img {
      transform: rotate(180deg);
      margin-right: 14px;
    }
    .title {
      font-size: var(--lg);
      font-weight: bold;
    }
    .order {
      display: grid;
      grid-template-columns: auto 1fr;
      gap: 16px;
      align-items: center;
      background-color: var(--text-input-field);
      margin-bottom: 24px;
      border-radius: 8px;
      padding: 0 24px;
    }
    .order p:nth-child(1) {
      display: flex;
      flex-direction: column;
    }
    .order p span:nth-child(1) {
      font-size: var(--md);
      font-weight: bold;
    }
    .order p:nth-child(2) {
      text-align: end;
      font-weight: bold;
    }
    .shopping-cart {
      display: grid;
      grid-template-columns: auto 1fr auto auto;
      gap: 16px;
      margin-bottom: 24px;
      align-items: center;
    }
    .shopping-cart figure {
      margin: 0;
    }
    .shopping-cart figure img {
      width: 70px;
      height: 70px;
      border-radius: 20px;
      object-fit: cover;
    }
    .shopping-cart p:nth-child(2) {
      color: var(--very-light-pink);
    }
    .shopping-cart p:nth-child(3) {
      font-size: var(--md);
      font-weight: bold;
    }
    .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;
    }
    @media (max-width: 640px) {
      .product-detail {
        width: 100%;
      }
    }

¿Qué es tranform en CSS?

Transform que es una propiedad de CSS que nos permite trasladar, rotar, escalar o sesgar elementos.
Se implementan principalmente para desarrollar animaciones. Para rotar la flechita lo empleamos.

¿Te gustaría animar con CSS?

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