Proyecto Práctico 2: Tienda en Línea Básica

por

En este proyecto, construiremos una tienda en línea básica con Bootstrap 5. La tienda incluirá un catálogo de productos diseñado con el sistema de Grid, y un formulario funcional para realizar compras. Este diseño será responsivo y podrá adaptarse para agregar más funcionalidades en el futuro.

1. Estructura del Proyecto

1.1. Objetivo del Proyecto

  • Crear una página de tienda en línea con:
  • Catálogo de productos: Una cuadrícula (Grid) con productos organizados de manera atractiva.
  • Formulario de compra: Para que los usuarios puedan realizar pedidos básicos.

1.2. Archivos Necesarios

  • index.html: Página principal de la tienda.
  • style.css: Opcional, para estilos personalizados.
  • Imágenes de productos.

2. Configuración Inicial

2.1. Integración de Bootstrap

Incluimos el CDN de Bootstrap y un archivo CSS opcional para personalización.

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tienda en Línea</title>
  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" href="style.css">
</head>
<body>
</body>
</html>

3. Desarrollo del Catálogo de Productos

3.1. Barra de Navegación

Comenzamos con una barra de navegación simple para la tienda.

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container">
    <a class="navbar-brand" href="#">Tienda Básica</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav ms-auto">
        <li class="nav-item">
          <a class="nav-link" href="#catalogo">Catálogo</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#compra">Comprar</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

3.2. Catálogo de Productos con Grid

Usaremos el sistema de Grid de Bootstrap para mostrar productos en filas organizadas.

<section id="catalogo" class="py-5">
  <div class="container">
    <h2 class="text-center mb-4">Catálogo de Productos</h2>
    <div class="row g-4">
      <!-- Producto 1 -->
      <div class="col-md-4">
        <div class="card">
          <img src="img/producto1.jpg" class="card-img-top" alt="Producto 1">
          <div class="card-body text-center">
            <h5 class="card-title">Producto 1</h5>
            <p class="card-text">Descripción breve del producto 1.</p>
            <p class="fw-bold">$10.00</p>
            <button class="btn btn-primary">Agregar al carrito</button>
          </div>
        </div>
      </div>
      <!-- Producto 2 -->
      <div class="col-md-4">
        <div class="card">
          <img src="img/producto2.jpg" class="card-img-top" alt="Producto 2">
          <div class="card-body text-center">
            <h5 class="card-title">Producto 2</h5>
            <p class="card-text">Descripción breve del producto 2.</p>
            <p class="fw-bold">$15.00</p>
            <button class="btn btn-primary">Agregar al carrito</button>
          </div>
        </div>
      </div>
      <!-- Producto 3 -->
      <div class="col-md-4">
        <div class="card">
          <img src="img/producto3.jpg" class="card-img-top" alt="Producto 3">
          <div class="card-body text-center">
            <h5 class="card-title">Producto 3</h5>
            <p class="card-text">Descripción breve del producto 3.</p>
            <p class="fw-bold">$20.00</p>
            <button class="btn btn-primary">Agregar al carrito</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

4. Desarrollo del Formulario de Compra

4.1. Formulario Básico

Incluimos un formulario con campos comunes para la compra.

<section id="compra" class="py-5 bg-light">
  <div class="container">
    <h2 class="text-center mb-4">Formulario de Compra</h2>
    <form>
      <div class="mb-3">
        <label for="nombre" class="form-label">Nombre Completo</label>
        <input type="text" class="form-control" id="nombre" placeholder="Tu nombre" required>
      </div>
      <div class="mb-3">
        <label for="email" class="form-label">Correo Electrónico</label>
        <input type="email" class="form-control" id="email" placeholder="tu@email.com" required>
      </div>
      <div class="mb-3">
        <label for="direccion" class="form-label">Dirección de Envío</label>
        <textarea class="form-control" id="direccion" rows="3" placeholder="Tu dirección"></textarea>
      </div>
      <div class="mb-3">
        <label for="producto" class="form-label">Selecciona un Producto</label>
        <select class="form-select" id="producto">
          <option>Producto 1</option>
          <option>Producto 2</option>
          <option>Producto 3</option>
        </select>
      </div>
      <button type="submit" class="btn btn-success w-100">Realizar Pedido</button>
    </form>
  </div>
</section>

5. Scripts y Archivos Necesarios

5.1. Bootstrap Scripts

Agrega los scripts de Bootstrap para funcionalidades dinámicas.

<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.min.js"></script>

6. Personalización (Opcional)

En el archivo style.css, agrega estilos personalizados:

body {
  margin-top: 56px;
}
.card img {
  height: 200px;
  object-fit: cover;
}

7. Resultado Final

Al abrir index.html, tendrás una tienda en línea básica que:

  • Muestra productos en un diseño de cuadrícula responsivo.
  • Permite realizar compras a través de un formulario limpio y funcional.
Te recomendamos leer:  Optimización y Rendimiento en Bootstrap 5

Este proyecto es una base sólida para integrar carritos de compra dinámicos o pasarelas de pago en el futuro.

Proyecto

Descripción de una Tienda en Línea Básica con Bootstrap: Una tienda en línea básica debe combinar funcionalidad y diseño sencillo para ofrecer una experiencia de usuario fluida. Este proyecto se enfocará en dos secciones principales: el catálogo de productos y el formulario de compra, implementados con componentes de Bootstrap.

1. Página de Inicio – Catálogo de Productos

  • Diseño General:
    Una disposición tipo rejilla (Grid System) que muestra productos organizados en filas y columnas.
  • Cada Producto Incluye:
  • Imagen destacada del producto.
  • Nombre del producto.
  • Breve descripción o características principales.
  • Precio visible.
  • Botón de «Agregar al carrito» o «Comprar ahora».
  • Opciones de Filtro (Opcional):
    Filtros en un menú lateral o superior para ordenar productos por precio, categoría, etc.

2. Página de Formulario de Compra

  • Formulario Sencillo:
    Un formulario para que el cliente complete los datos necesarios para realizar la compra. Incluye:
  • Campos para nombre, correo electrónico, dirección de envío.
  • Selector para método de pago.
  • Resumen del pedido (productos, cantidades, precio total).
  • Botón para confirmar la compra.

Características Clave

  1. Diseño Responsivo: El catálogo y formulario deben ajustarse perfectamente en dispositivos móviles.
  2. Interactividad: Usaremos componentes como botones y formularios de Bootstrap.
  3. Estilo Limpio: Usaremos colores y espaciados consistentes para que la tienda sea visualmente agradable.

Estructura y Pasos para Implementarlo

1. Estructura HTML Inicial

  • Página de inicio con el catálogo de productos.
  • Enlace a la página del formulario de compra.

2. Catálogo de Productos

  • Crear un contenedor principal.
  • Utilizar el sistema Grid de Bootstrap para organizar las cards de los productos.
Te recomendamos leer:  Media Queries Personalizadas en Bootstrap 5

3. Formulario de Compra

  • Agregar un formulario estructurado con los componentes de formularios de Bootstrap.
  • Incluir validaciones básicas para los campos esenciales.

¿Comenzamos desarrollando primero el catálogo de productos? Veamos.

Desarrollo del Catálogo de Productos con Bootstrap

El catálogo de productos será diseñado utilizando el sistema de rejillas (Grid System) y componentes como cards para mostrar los detalles de cada producto. Aquí está la implementación detallada:

Código Completo del Catálogo de Productos

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Catálogo de Productos</title>
  <!-- Bootstrap CSS -->
  <link
    href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
    rel="stylesheet">
</head>
<body>
  <!-- Navbar -->
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container-fluid">
      <a class="navbar-brand" href="#">Mi Tienda</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav ms-auto">
          <li class="nav-item">
            <a class="nav-link active" href="#">Inicio</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Carrito</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Contacto</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

  <!-- Catálogo de Productos -->
  <div class="container mt-4">
    <h1 class="text-center mb-4">Catálogo de Productos</h1>
    <div class="row row-cols-1 row-cols-md-3 g-4">
      <!-- Producto 1 -->
      <div class="col">
        <div class="card h-100">
          <img src="https://via.placeholder.com/300x200" class="card-img-top" alt="Producto 1">
          <div class="card-body">
            <h5 class="card-title">Producto 1</h5>
            <p class="card-text">Descripción breve del producto 1.</p>
            <p class="card-text"><strong>$19.99</strong></p>
            <button class="btn btn-primary">Agregar al carrito</button>
          </div>
        </div>
      </div>
      <!-- Producto 2 -->
      <div class="col">
        <div class="card h-100">
          <img src="https://via.placeholder.com/300x200" class="card-img-top" alt="Producto 2">
          <div class="card-body">
            <h5 class="card-title">Producto 2</h5>
            <p class="card-text">Descripción breve del producto 2.</p>
            <p class="card-text"><strong>$29.99</strong></p>
            <button class="btn btn-primary">Agregar al carrito</button>
          </div>
        </div>
      </div>
      <!-- Producto 3 -->
      <div class="col">
        <div class="card h-100">
          <img src="https://via.placeholder.com/300x200" class="card-img-top" alt="Producto 3">
          <div class="card-body">
            <h5 class="card-title">Producto 3</h5>
            <p class="card-text">Descripción breve del producto 3.</p>
            <p class="card-text"><strong>$39.99</strong></p>
            <button class="btn btn-primary">Agregar al carrito</button>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Explicación del Código

  1. Navbar:
  • Incluye enlaces básicos como «Inicio», «Carrito» y «Contacto».
  • Es responsivo, con un botón que despliega el menú en dispositivos pequeños.
  1. Contenedor Principal:
  • Usamos el contenedor .container para centrar el contenido y aplicar márgenes automáticos.
  1. Rejilla (Grid System):
  • Se usa .row para crear filas y .col para dividir en columnas.
  • Las clases .row-cols-1 y .row-cols-md-3 definen que hay 1 columna por fila en dispositivos pequeños y 3 en medianos o más grandes.
  1. Cards:
  • Cada producto se muestra dentro de una card con imagen, título, descripción, precio y un botón de acción.
  • Las clases .h-100 aseguran que las cards tengan la misma altura.
Rate this post

Deja un comentario

Web Devs