Implementación de Vue.js en Proyecto eCommerce Reactivo

Clase 14 de 37 • Curso de Reactividad con Vue.js 3

Resumen

¿Cómo implementar un template HTML estático con Vue?

La clave para construir aplicaciones web efectivas reside en comprender cómo hacerlas dinámicas y reactivas. Ahora, aplicaremos los conceptos y herramientas de Vue.js en un proyecto real. Vamos a diseñar un plat eCommerce, un sitio de comercio electrónico que ilustrará muchas facetas de la programación reactiva, permitiéndonos dominar Vue.js.

¿Qué estructura tendrá nuestro plat eCommerce?

Iniciaremos con un archivo HTML estático. Este será la base de nuestra aplicación Vue.js. Nuestro HTML tendrá una estructura clara y ordenada para facilitar la manipulación y el dinamismo posterior.

Header: Contará con un título (H3) y un botón que funcionará como carrito de compras. Este botón tendrá la clase cart y mostrará el número de elementos que añadimos.
Sección principal: Incluye las miniaturas de imágenes (thumbnails) y la visualización principal del producto. Cada miniatura representa una imagen que puede variar según el producto.
Descripción del producto: Esta parte incluirá el título del producto, insignias como si el producto es nuevo o está en oferta, una descripción breve, y un espacio para el precio.
Código de descuento: Una sección donde los usuarios podrán ingresar códigos de descuentos mediante un input.

Aquí está un ejemplo de cómo se ve el HTML inicial:

<div id="app">
  <header>
    <h3>Plat Commerce</h3>
    <button class="cart">Carrito</button>
    <div class="cart-content">
      <!-- Elementos reactivos del carrito -->
    </div>
  </header>
  
  <main>
    <section class="product">
      <div class="thumbnails">
        <!-- Miniaturas de producto -->
      </div>
      <div class="product-image">
        <!-- Imagen del producto -->
      </div>
      <div class="product-description">
        <h4>Título del Producto</h4>
        <div class="badges">
          <!-- Insignias del producto -->
        </div>
        <p class="description">Descripción breve del producto</p>
        <p class="price">Precio</p>
      </div>
    </section>

    <div class="discount-code">
      <span>Código de descuento</span>
      <input type="text" placeholder="Ingresa tu código">
    </div>
  </main>
</div>

¿Cómo se conecta Vue.js al proyecto?

En el proyecto utilizaremos Vue.js para hacer nuestra aplicación interactiva. El primer paso es asegurarnos de incluir el script de Vue y crear nuestra aplicación dentro del archivo. Esto nos permitirá usar Vue.js para dinamizar el contenido HTML.

Incluir Vue.js: Es esencial incluir el script de Vue en nuestro archivo HTML para poder desplegar características de reactividad.
Crear la aplicación Vue: Utilizaremos el método createApp de Vue para crear y montar nuestra aplicación.

const app = Vue.createApp({});
app.mount('#app');

¿Por qué usar CSS para mejorar la presentación de nuestro proyecto?

Un sitio web funcional también debe ofrecer una buena experiencia visual. En nuestro proyecto, incluiremos nuestros estilos CSS para que el interfaz sea atractiva y proporcione una mejor experiencia de usuario.

Asegúrate de que el archivo styles.css esté bien vinculado en tu HTML. Este contendrá todos los estilos que mejorarán la apariencia de nuestro plat eCommerce.

¿Cuál es el siguiente paso?

En la próxima iteración, comenzaremos a utilizar Vue.js para añadir dinamismo. Implementaremos funciones reactivas que cambiarán el contenido según la interacción con el usuario. Prepárate para sumergirte aún más en el poderoso mundo de Vue.js y aprender a hacerlo real. ¡Continúa aprendiendo para transformar tu manera de desarrollar aplicaciones!

Tomás Eduardo González Quiñones

student•

Adjunto el codigo de los estilos para que copien y peguen nomas ;)

body {
        font-family: sans-serif;
        font-size: 18px;
      }
      * {
        box-sizing: border-box;
        padding: 0;
        margin: 0;
      }
      header {
        display: flex;
        height: 40px;
        justify-content: space-between;
        align-items: center;
        background: rgb(104, 104, 209);
        color: #fefefe;
      }
      header h3 {
        margin-left: 8px;
      }
      header .cart {
        background: rgb(82, 82, 194);
        padding: 8px;
        color: white;
        border: none;
        height: 100%;
        cursor: pointer;
        outline: none;
      }
      header .cart-content {
        position: absolute;
        right: 0;
        top: 40px;
        background: white;
        padding: 16px;
        color: black;
        border-bottom: 1px solid black;
        border-left: 1px solid black;
        border-bottom-left-radius: 14px;
        border-bottom-right-radius: 14px;
      }
      header .cart-content .cart-content__product {
        display: flex;
        align-items: center;
        padding: 8px;
        border-radius: 8px;
        background: rgb(129, 129, 129, 0.2);
        margin-bottom: 4px;
      }
      header .cart-content .cart-content__product.bg-gray {
        background: rgb(129, 129, 129, 0.4);
      }
      header .cart-content .cart-content__product img {
        width: 50px;
      }
      main {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        padding: 16px;
      }

      main .product {
        display: grid;
        grid-template-columns: 0.2fr 0.8fr;
      }

      main .product .product__thumbnails {
        width: 90px;
      }
      main .product .product__thumbnails .thumb {
        width: 100%;
        height: 90px;
        background-repeat: no-repeat;
        background-position: center;
        margin-bottom: 8px;
      }
      main .product .product__thumbnails .thumb.active {
        border-bottom: 1px solid rgb(82, 82, 194);
      }

      main .description h4 {
        display: inline-block;
        font-size: 24px;
      }
      main .description .description__status {
        font-size: 16px;
        font-weight: lighter;
        color: rgb(129, 129, 129);
      }
      main .description .description__price {
        font-weight: bold;
        color: rgb(104, 104, 209);
      }
      main .description .description__content {
        margin-top: 8px;
      }
      main .description .discount {
        margin: 8px 0 8px 0;
      }
      main .description .discount span {
        font-size: 14px;
        margin-right: 8px;
      }
      main .description .discount input {
        padding: 8px;
        border: 1px solid #616161;
        border-radius: 4px;
      }
      main .description button {
        padding: 8px;
        font-size: 18px;
        background: rgb(104, 104, 209);
        color: #fefefe;
        border: none;
        border-radius: 8px;
      }
      main .description button:disabled {
        background: rgb(159, 159, 228);
      }
      .badge {
        font-size: 14px;
        font-weight: normal;
        padding: 8px;
        border-radius: 8px;
        color: white;
        margin-right: 4px;
        vertical-align: text-top;
      }
      .badge.new {
        background-color: rgb(103, 172, 13);
      }
      .badge.offer {
        background-color: rgb(197, 107, 33);
      }```

Cristhian Daza

student•

Gracias

Ana Selene Zarate Lopez

student•

Muchas gracias!!

Carlos Eduardo Gomez García

teacher•

¡Ahora sí vamos con Vue! :D . Soy un VueLover así que esto me emociona xD Al igual que con el Mini Vue iré dejando en mi repositorio de GitHub los códigos de cada clase: . https://github.com/RetaxMaster/vue3-platzi-commerce/tree/7424dba6ade1ecf4a77d5cfd7c808dd03077c1d7

Kenny Lazo

student•

yo empecé con Vue en la versión 2 hace mucho. después me pase a React y de nuevo estoy aquí. xd!

Sebastián Buitrago

student•

Por si perdieron el script aqui se los dejo

<script src="https://unpkg.com/vue@next"></script>

Martín S. Campos

student•

La notación de clases realizada se le conoce como BEM (Block, Element, Modifier) el cual realiza especificaciones a un elemento para su mejor manipulación con CSS. Comparto un link con mas información.

Carlos Rafael Córdova Flores

student•

Index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./style.css" />
    <title>Platzi Commerce</title>
  </head>
  <body>
    <div id="app">
      <header>
        <h4>Platzi Commerce</h4>
        <button class="cart">Carro (0)</button>
        <div class="cart-content">
          <div class="cart-content__product">
            <img src="" alt="" />
            <span>Producto - $ 100.00</span>
          </div>
        </div>
      </header>
      <main>
        <section class="product">
          <div class="product__thumbnails">
            <div class="thumb"></div>
          </div>
          <div class="product__image">
            <img src="" alt="" />
          </div>
        </section>
        <section class="description">
          <h5>Producto</h5>
          <span class="badge new">Nuevo</span>
          <span class="badge offer">Oferta</span>
          <p class="description__status"></p>
          <p class="desction__price">$ 100.00</p>
          <p class="description__content">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi
            dicta quis repellendus facilis unde! In enim tempora culpa dolorum
            recusandae ipsa rem. Reiciendis et ipsum officia eius corporis sequi
            libero.
          </p>
          <div class="discount">
            <span>Código de descuento:</span>
            <input type="text" placeholder="Ingresa tu código" />
          </div>
        </section>
      </main>
    </div>

    <script src="https://unpkg.com/vue@next"></script>
    <script>
      const { createApp } = Vue;
      const app = createApp();
      app.mount("#app");
    </script>
  </body>
</html>

Tomás Eduardo González Quiñones

student•

no se puede escribir simplemente

const app = Vue.createapp({})

y ahorrarse la primera linea?

Carlos Eduardo Gomez García

teacher•

Se puede, sin embargo, en Vue lo encontrarás más comúnmente a como se enseña en la clase, esto es porque createApp no es lo único que querremos destructurar de Vue, más adelante cuando veas Composition API verás que estaremos trayendo más cosas de la clase de Vue, por lo que resultará mejor tener todo organizado y destructurado en lugar de estar poniendo Vue.algunMetodoDeVue :D

Además en Vue 3 se ve más elegante tener el createApp por a parte jaja

Samuel Burbano

teacher•

Como menciona @RetaxMaster, es mejor irse acostumbrando a la forma de trabajo tree-shaking de Vue, que la encontraras en todos lados después, incluso si no usas el Composition API, es muy normal ver la importación de las funciones independientes de Vue en proyectos con el CLI por ejemplo.

Eric Gomez

student•

Emmanuel Rodríguez

student•

Una estructura tan simple que describe la entrada de un sistema completo. Me emociona Vue como herramienta pero la respeto como Framework. Y es que como dice el principio KISS (Keep It Simple Stupid):

const { createApp } = Vue;
const app = createApp();
app.mount('#app');

Sebastián Buitrago

student•

incluso puede ser mas simple de esta manera

const { createApp } = Vue;
createApp();
    .mount('#app');

Emmanuel Rodríguez

student•

¡Súper! 👊😎 Para este caso, esta genial. Pero manéjalo con conciencia ya que createApp() posee características adicionales. 🔗 referencia

Miguel Angel Reyes Moreno

student•

Ivan Camilo Buitrago Buitrago

student•

creo que el editor tiene el suficiente campo como para hacer mas grande el texto, hay se llevan menos 1 punto por temas de accesibilidad, no esta tan facil el visualizar el codigo

Jose Barboza

student•

bueno empecemos con vue mi primera vez con un framework front

Alejandro Madrid Felizzola

student•

Jose Barboza

student•

const { createApp } = Vue;

const app = createApp();
app.mount("#app")

Naldo Duran

student•

👌

Alejandro Vega Meneses

student•

Voy con toda a aprender Vue3!! La versión 2 me encantó y por eso me decidí a usar este framework