Introducci贸n a Gatsby

1

驴Por qu茅 Gatsby? Seguridad y Velocidad

2

驴Qu茅 es Gatsby?

3

Diferencias entre SPA, SSR y Gatsby

Preparando el entorno

4

Requisitos previos y herramientas de desarrollo

5

Gatsby y Gatsby CLI y Starters

6

Configuraci贸n de ESLint

Fundamentos de Gatsby

7

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

8

Ecosistema de plugins

9

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

Creando la vista con React

10

Router en Gatsby y Componente Link

11

Layout en Gatsby

Graphql en Gatsby

12

驴C贸mo funciona GraphQL en Gatsby?

13

Accediendo a nuestros datos en Gatsby desde GraphQL

14

Queries, Edges (conexiones) y Nodos en Gatsby

15

Consultas en GraphQL desde React

Usando plugins en Gatsby

16

Instalaci贸n y configuraci贸n de plugins

17

Im谩genes como fuente de datos

18

Plugins de transformaci贸n

19

Estilizando nuestros componentes con styled-components

20

Estilos Globales con styled-components

Stripe checkout

21

Introducci贸n a la API de Stripe Checkout

22

Agregando productos a nuestra tienda en l铆nea

23

Productos en React

Generando p谩ginas program谩ticamente

24

Creando p谩ginas en funci贸n de los datos

25

Manejo de Gatsby Templates

26

Terminando la Vista de Detalle de los Productos

27

StaticQuery vs. useStaticQuery

28

Construyendo el Carrito de Compras: useContext

29

Construyendo el Carrito de Compras: Vista

30

Construyendo el Carrito de Compras: Agregar productos al carrito

31

Comprando productos

Gatsby a producci贸n

32

Gatsby build para compilar nuestro proyecto

33

Deploy a Netlify

No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Aprende todo un fin de semana sin pagar una suscripci贸n 馃敟

Aprende todo un fin de semana sin pagar una suscripci贸n 馃敟

Reg铆strate

Comienza en:

5D
18H
42M
36S

Construyendo el Carrito de Compras: Agregar productos al carrito

30/33
Recursos

Aportes 10

Preguntas 0

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

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.

Construyendo el Carrito de Compras: Agregar productos al carrito

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>
      <h2>Carrito de compras</h2>
      <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>
          <h3>Subtotal: </h3>
          <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>
  )
};

A solo un par de clases de terminar el curso y todav铆a no entiendo porqu茅 hicimos el componente 鈥淛umbo鈥, o m谩s bien, porqu茅 le pusimos "Jumbo"
En mi caso me gust贸 el nombre y nombr茅 la app 鈥淛umbo Store鈥 jajaj
No hay cosa m谩s horrible que los proyectos 鈥減latzi esto鈥 鈥減latzi lo otro鈥

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

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.

curso de carrito de compra

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)
	}

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
  )

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

Que es useEffect.

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 })
  }