Carrito compras (Globito)

Adaptar a vuestra tienda

¿Cómo hacer el carrito de compras con JavaScript nativo usando eventos?

El reto al usar JavaScript es que el botón de Añadir a la cesta está en la página del producto y el Globito del carrito está arriba en el Header o Navbar (que son componentes distintos).

Para que se comuniquen entre sí de forma limpia y reactiva en el cliente, la mejor práctica es lanzar un Evento Personalizado (CustomEvent).

En el Header / Navbar (o donde esté el icono del carrito)

Se escucha un evento personalizado cuando la página carga y se actualiza la cantidad de productos en la cesta (id="cart-count"):

Header.astro

En la página o componente de Producto (al hacer clic en Agregar a la cesta )

Cuando el usuario hace clic y el producto se guarda en localStorage, solo se agrega una línea para notificar al navegador que la cesta cambió:

Producto.astro

Es importante destacar que en el código la página o componente de Producto, se hace uso de la directiva define:vars


¿Para qué se usa define:vars?

define:vars es una directiva propia de Astro para inyectar variables de servidor a cliente. Sirve para enviar los datos desde el servidor (backend) hacia el navegador (cliente).


  [ SERVIDOR / BACKEND ]               [ NAVEGADOR / CLIENTE ]
    Procesa el código dentro de ---      Ejecuta el código dentro de <script>
    Lee la Base de Datos                 Maneja clicks, alert(), localStorage, etc.
    Tiene la variable `producto`         NO sabe qué es `producto`

Si no se envían las variables del servidor con define:vars, el navegador dará error porque la variable producto solo existía en el servidor mientras se construía la página en HTML. Cuando la página llega al usuario, el servidor ya terminó su trabajo y destruyó esas variables.

Sintaxis:

  1. define:vars: Es la directiva propia de Astro para inyectar variables de servidor a cliente.
  2. { { ... } } (doble llave)
    1. La llave exterior { ... } entra al modo JavaScript de Astro.
    2. La llave interior { producto: producto[0] } crea un objeto donde la clave izquierda es el nombre que tendrá la variable en el <script> del navegador, y el valor derecho es la variable original de Astro/servidor.

Se pueden pasar todas las variables que se necesiten dentro del objeto de define:vars.

Ejemplo: