Construyendo el Carrito de Compras: Agregar productos al carrito

Clase 30 de 33 • Curso de Desarrollo de Aplicaciones Web con Gatsby JS

Miguel Angel Reyes Moreno

student•

Tengan mucho cuidado sobre cómo escriben su reduce, ese ',0' estuvo en el lugar incorrecto y me hizo un desorden con el total del precio.

useEffect reemplaza los ciclos de vida de React.

Cart.js:

import React, { useContext, useEffect, useState } from 'react';
import { Link } from 'gatsby';
import { Button, StyledCart } from '../styles/components';
import priceFormat from '../utils/priceFormat';
import { CartContext } from '../context';

export default function Cart() {
  const { cart } = useContext(CartContext);
  const [total, setTotal] = useState(0);

  const getTotal = () => {
    setTotal(cart.reduce((acc, current) => acc + current.unit_amount * current.quantity , 0));
  };

  useEffect(() => {
    getTotal();
  }, []);

  return (
    <StyledCart>
      <h3>Carrito de compras</h3>
      <table>
        <tbody>
          <tr>
            <th>Producto</th>
            <th>Precio</th>
            <th>Cantidad</th>
            <th>Total</th>
          </tr>
          {cart.map(swag => (
            <tr key={swag.id}>
              <td>
                <img src={swag.metadata.img} alt={swag.name}/> {swag.name}
              </td>
              <td>USD {priceFormat(swag.unit_amount)}</td>
              <td>{swag.quantity}</td>
              <td>{priceFormat(swag.quantity * swag.unit_amount)}</td>
            </tr>
          ))}
        </tbody>
      </table>
      <nav>
        <div>
          <h4>Subtotal: </h4>
          <small>Total: USD {priceFormat(total)}</small>
        </div>
        <div>
          <Link to='/'>
            <Button type='outline'>Volver</Button>
            <Button disabled={cart.length === 0}>Comprar</Button>
          </Link>
        </div>
      </nav>
    </StyledCart>
  )
};

Irungaray Agustin

student•

A solo un par de clases de terminar el curso y todavía no entiendo porqué hicimos el componente "Jumbo", o más bien, porqué le pusimos "Jumbo" En mi caso me gustó el nombre y nombré la app "Jumbo Store" jajaj No hay cosa más horrible que los proyectos "platzi esto" "platzi lo otro"

Miguel Angel Reyes Moreno

student•

Recuerda que React es un framework para crear interfaces de usuario. Jumbo tiene Templates que combinan React y Material UI.

Al final del día es una forma de crear bonitas interfaces con estilos que ya están definidos, esto nos ayuda a ahorrarnos tiempo de desarrollo. Además piensa que este curso es para aprender a usar Gatsby, no tenemos porque tomarnos el tiempo de pensar cómo sería el diseño de la aplicación, simplemente podemos tomar algo que ya se ve bien.

Si quieres saber más de Jumbo, te dejo su documentación

Y en cuanto a los proyectos de Platzi, no le veo nada de malo, es simplemente para practicar los conceptos, si no te gusta solo cambia el nombre de los textos y los colores de CSS, y hasta las imágenes, sirve que practicas más.

Wilson Fabian Pérez Sucuzhañay

student•

A alguien mas le paso que si regresa al HOME y vuelves a la sudadera y pulsa agregar dar error del SKU ?

Jose Carlos Correa

teacher•

Si, esto sucede por agregar más elementos del mismo tipo, a stripe no le funciona así. Te toca hacer una condición sencilla donde si ya tienes un elemento de este tipo, no lo agregué, si no que sume la cantidad nueva a la cantidad existente. 😁

Irungaray Agustin

student•

2 años y nadie comentó una solución?

Irungaray Agustin

student•

Bueno, después de estar así por un par de horas

Logré esto:

	const handleSubmit  = () => {
		addToCart({ id, name, images, metadata, quantity: qty, unit_amount });
		if (id.indexOf(cart[0])) {
			setQty(qty + 1);
			console.log('id in cart');
		}
	};

Pero lo único que hace es aumentar en 1 el contador de cantidad del ProductDetail.js, más no añade 1 más al carrito. Si alguien lo solucionó sería un golazo que comente cómo. Si lo resuelvo lo comento.

Anthony niebles

student•

curso de carrito de compra

Rubén Hernández Hernández

student•

Mi WishList

Aquí mi wishlist la cual funciona con un toggle Button en cada artículo.

La página del WishList la maneje como la del carrito y en productDetails.js maneje un estado para el botón de corazón donde su estado lo manejo así:

const [liked, setLiked] = useState(() => isInWishList(sku))
	const handleLiked = () => {
		toggleWishList({ price, sku, name, metadata }, liked)
		setLiked(!liked)
	}

El botón lo manejo así:

<LikeButton liked={liked} onClick={handleLiked} />

el cual está construido en components.js así:

export const LikeButton = styled.button`
	cursor: pointer;
	background-color: ${({ liked }) => (liked ? "crimson" : "white")};
	color: ${({ liked }) => (liked ? "white" : "crimson")};
	font-size: 2.5rem;
	border: 3px solid crimson;
	border-radius: 12px;
	padding: 0.6rem 0.5rem;

	&:before {
		content: '${({ liked }) => (liked ? "♥" : "♡")}';
	}
`

y finalmente mi contexto en Context.js lo maneje así (mandando ambas funciones y estado por el value del provider):

const [wishList, setWishList] = useState([])

const toggleWishList = (element, isInWishListState) => {
		if (isInWishListState)
			setWishList(
				wishList.filter((item) => {
					return item.sku !== element.sku
				})
			)
		else setWishList([...wishList, element])
	}

	const isInWishList = (sku) => {
		return wishList.some((item) => item.sku === sku)
	}

Willy Da Conceicao

student•

No era mas fácil simplemente declarar una variable, creo que no hace falta implementar useEffect y useState

const total = cart.reduce(
    (prev, current) => prev + current.price * current.quantity,
    0
  )

Daniel Sosa Alvirde

student•

Si le doy un refresh a la pagina me borra los items del carrito ¿Cómo puedo hacer persistente los datos?

andrés eduardo betancourt bescanza

student•

Creo que tendrias que guardarlos en el localStorage amigo

Juan Antonio Avalos Orozco

student•

Que es useEffect.

Juan Castro

teacher•

Mira esta lectura: https://platzi.com/clases/1651-react-ejs/22668-lectura-react-hooks/.

Leo Islas

student•

es el hoock que sustituye de alguna manera al compoentedidmount y componentwildmount de react https://es.reactjs.org/docs/hooks-effect.html checate la diferencia y los casos de uso

Humberto Fernandez

student•

Quizás no es la manera más limpia (creo qeu es un mal uso del map xd) pero así solucioné el tema de que se agregaban 2 elementos del mismo producto al carrito, ahora solo modifica la cantidad

const handleSubmit = () => {
    let onCart = false

    cart.map(item => {
      if (item.id == id) {
        onCart = true
        item.qty += qty
      }
    })

    if (!onCart) addToCart({ unit_amount, id, name, metadata, qty })
  }

Humberto Fernandez

student•

No se olviden de jalar el carrito del contexto

 const { cart, addToCart } = useContext(CartContext)

Javier Vargas

student•

La idea esta muy bien, el unico problema que veo es recorrer el array de cart con un map, al no retornar nada deberias usar un forEach.

import React, { useContext, useEffect, useState } from 'react';
import { Link } from 'gatsby';
import { Button, StyledCart } from '../styles/components';
import priceFormat from '../utils/priceFormat';
import { CartContext } from '../context';

export default function Cart() {
  const { cart } = useContext(CartContext);
  const [total, setTotal] = useState(0);

  const getTotal = () => {
    setTotal(cart.reduce((acc, current) => acc + current.unit_amount * current.quantity , 0));
  };

  useEffect(() => {
    getTotal();
  }, []);

  return (
    <StyledCart>
      <h3>Carrito de compras</h3>
      <table>
        <tbody>
          <tr>
            <th>Producto</th>
            <th>Precio</th>
            <th>Cantidad</th>
            <th>Total</th>
          </tr>
          {cart.map(swag => (
            <tr key={swag.id}>
              <td>
                <img src={swag.metadata.img} alt={swag.name}/> {swag.name}
              </td>
              <td>USD {priceFormat(swag.unit_amount)}</td>
              <td>{swag.quantity}</td>
              <td>{priceFormat(swag.quantity * swag.unit_amount)}</td>
            </tr>
          ))}
        </tbody>
      </table>
      <nav>
        <div>
          <h4>Subtotal: </h4>
          <small>Total: USD {priceFormat(total)}</small>
        </div>
        <div>
          <Link to='/'>
            <Button type='outline'>Volver</Button>
            <Button disabled={cart.length === 0}>Comprar</Button>
          </Link>
        </div>
      </nav>
    </StyledCart>
  )
};

export const LikeButton = styled.button`
	cursor: pointer;
	background-color: ${({ liked }) => (liked ? "crimson" : "white")};
	color: ${({ liked }) => (liked ? "white" : "crimson")};
	font-size: 2.5rem;
	border: 3px solid crimson;
	border-radius: 12px;
	padding: 0.6rem 0.5rem;

	&:before {
		content: '${({ liked }) => (liked ? "♥" : "♡")}';
	}
`

const [wishList, setWishList] = useState([])

const toggleWishList = (element, isInWishListState) => {
		if (isInWishListState)
			setWishList(
				wishList.filter((item) => {
					return item.sku !== element.sku
				})
			)
		else setWishList([...wishList, element])
	}

	const isInWishList = (sku) => {
		return wishList.some((item) => item.sku === sku)
	}

const handleSubmit = () => {
    let onCart = false

    cart.map(item => {
      if (item.id == id) {
        onCart = true
        item.qty += qty
      }
    })

    if (!onCart) addToCart({ unit_amount, id, name, metadata, qty })
  }

Construyendo el Carrito de Compras: Agregar productos al carrito

Introducción a Gatsby

¿Por qué Gatsby? Seguridad y Velocidad

¿Qué es Gatsby?

Diferencias entre SPA, SSR y Gatsby

Preparando el entorno

Requisitos previos y herramientas de desarrollo

Gatsby y Gatsby CLI y Starters

Configuración de ESLint

Fundamentos de Gatsby

Presentación y Estructura de Archivos de nuestro proyecto: Platziswag

Ecosistema de plugins

Usando React para manejar la parte visual e interactiva de nuestra aplicación

Creando la vista con React

Router en Gatsby y Componente Link

Layout en Gatsby

Graphql en Gatsby

¿Cómo funciona GraphQL en Gatsby?

Accediendo a nuestros datos en Gatsby desde GraphQL

Queries, Edges (conexiones) y Nodos en Gatsby

Consultas en GraphQL desde React

Usando plugins en Gatsby

Instalación y configuración de plugins

Imágenes como fuente de datos

Plugins de transformación

Estilizando nuestros componentes con styled-components

Estilos Globales con styled-components

Stripe checkout

Introducción a la API de Stripe Checkout

Agregando productos a nuestra tienda en línea

Productos en React

Generando páginas programáticamente

Creando páginas en función de los datos

Manejo de Gatsby Templates

Terminando la Vista de Detalle de los Productos

StaticQuery vs. useStaticQuery

Construyendo el Carrito de Compras: useContext

Construyendo el Carrito de Compras: Vista

Construyendo el Carrito de Compras: Agregar productos al carrito

Comprando productos

Gatsby a producción

Gatsby build para compilar nuestro proyecto

Deploy a Netlify