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
1H
5M
38S

Manejo de Gatsby Templates

25/33
Recursos

En la clase anterior configuramos gatsby-node.jspara generar una p谩gina por cada producto de nuestra tienda, ahora las p谩ginas existen, pero no tienen los estilos ni muestran la informaci贸n que necesitamos.

En esta clase vamos a configurar los Gatsby Templates: los componentes que renderizamos cuando Gatsby construye las p谩ginas autogeneradas.

Aportes 13

Preguntas 4

Ordenar por:

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

o inicia sesi贸n.

En casi todos los cursos de PLATZI nos indican (repetidas veces) que se tiene que seguir una norma con las may煤sculas y el camelCase para los archivos, sobre todo por el hecho de ser coherente y constante鈥 Pues en el curso ya van como 3 veces que el profe no es constante con eso.
El problema no es el profe (que tambi茅n). El problema es que surgen errores en nuestras compilaciones que luego no encontramos el porqu茅 y perdemos mucho rato entendiendo que ha sido por este tema.
Por favor, cuando graben un curso d铆ganle al profesor que 鈥榮ea constante鈥 con la normativa que elija y emplee hasta el final鈥
Por favor.

Est谩 buen铆simo este curso 驴Alguien en 2021 vi茅ndolo? pa ser panas

Tuve este error

React Hook "useState" is called in function "productDetail" which is neither a React function component or a custom React Hook function

Lo solucione cambiando en nombre de la funci贸n a ProductDetail, colocando la primera letra en may煤scula.

Adem谩s, los estilos que presenta el profe al final de este v铆deo no se corresponden para nada con lo que se ve finalmente en nuestro proyecto鈥 y as铆 vamos desde el principio鈥 Arreglen esto por favor!!!

Hola Devs:
-Me he puesto a mejorar un poco el aspecto visual del proyecto, mas aun en la pagina donde muestra el detalle del producto, espero y les guste:
-Si desean los cambios que tengo, lo pueden encontrar en mi repositorio [accediendo al commit especifico de esta clase]: Click Aqui
-Cabe destacar que tuve que meterme al codigo y toquetear mucho, les invito hacerlo, aprendes X10.
Recuerden, #NuncaParesDeAprender 馃挌

Compa帽eros, para que el precio sea din谩mico y se actualice con la cantidad basta con poner:

export default function ProductDetail({ unit_amount, sku: id, product: {name, images, metadata} }) {
	const [size, setSize] = useState(3);
	const [qty, setQty] = useState(1);
	const formatedPrice = priceFormat(unit_amount * qty);

return (
	// ...
	<b>USD {formatedPrice}</b>
)

En mi caso Stripe me devuelve unit_amount en vez de price como al profesor. Es cuesti贸n de cambiar el prop en cualquier caso nada mas. Un saludo!

query{
  allStripePrice{
    edges{
      node{
        id
        unit_amount
        product{
          name
          images
          description
          metadata{            
            wear
          }      
        }
      }
    }
  }
}

Noten que cuando Agregan mas productos el precio no cambia, aqui el codigo que le agregue para hacerlo

import React, { useState } from "react"
import priceFormat from "../utils/PriceFormat"
import {
  Tag,
  SizeButton,
  QtyButton,
  SizeSelect,
  Button,
  StyledProductDetail,
  QtySelect,
} from "../styles/Components"
import { SEO, Stars } from "./"

export default function ProductDetails({
  id,
  unit_amount,
  product: { name, metadata },
}) {
  const price = priceFormat(unit_amount)
  const resetPrice = price.split("$")
  const newPrice = parseInt(resetPrice[1])
  const [precio, setPrecio] = useState({
    precioInicial: newPrice,
    dinero: newPrice,
  })
  const [size, setSize] = useState(2)
  const [quantity, setQuantity] = useState(1)

  const quitPriceAndQty = () => {
    if (quantity > 1) {
      setQuantity(quantity - 1)
      setPrecio({ ...precio, dinero: precio.dinero - precio.precioInicial })
    }
  }
  const setPriceAndQty = () => {
    setQuantity(quantity + 1)
    setPrecio({ ...precio, dinero: precio.dinero + precio.precioInicial })
  }
  return (
    <StyledProductDetail>
      <SEO title={name} />
      <img src={metadata.img} alt={name} />
      <div>
        <Tag>Popular</Tag>
        <h2>{name}</h2>
        <b>USD: {precio.dinero}</b>
        <Stars />
        {metadata.wear && (
          <SizeSelect selected={size}>
            <SizeButton onClick={() => setSize(1)}>XS</SizeButton>
            <SizeButton onClick={() => setSize(2)}>S</SizeButton>
            <SizeButton onClick={() => setSize(3)}>M</SizeButton>
            <SizeButton onClick={() => setSize(4)}>L</SizeButton>
          </SizeSelect>
        )}
        <p>Quantity:</p>
        <QtySelect>
          <button onClick={quitPriceAndQty}>-</button>
          <input type="text" disabled value={quantity} />
          <button onClick={setPriceAndQty}>+</button>
        </QtySelect>
      </div>
    </StyledProductDetail>
  )
}

Funciono Muy bien solo modifique si existia metadata

{metadata?.wear && (
                    <SizeSelect selected={size}>
                        <SizeButton onClick={() => setSize(1)}>XS</SizeButton>
                        <SizeButton onClick={() => setSize(2)}>S</SizeButton>
                        <SizeButton onClick={() => setSize(3)}>M</SizeButton>
                        <SizeButton onClick={() => setSize(4)}>L</SizeButton>
                        <SizeButton onClick={() => setSize(5)}>XL</SizeButton>
                    </SizeSelect>
                )}

adjunto como quedo 馃槃

No usamos Button ni QtyButton en esta clase y los us茅 en vez de la etiqueta com煤n button pero no cambi贸 el aspecto visual de la p谩gina.

Que chimbo que no tengan talla para gorditos XL.

Si tienen problemas con los estilos hace falta un div que los encapsule.

<StyledProductDetail>
      <SEO title={name} />
      <img src={metadata.img} alt="name" />
      <div>
        <Tag>Popular</Tag>
        <h2>{name}</h2>
        <b>MXN {formatPrice}</b>
        <Stars />
        {/* {metadata.wear && <h1>Color: Azul</h1>} */}
        <small>{metadata.description}</small>
        {metadata.wear && (
          <SizeSelect selected={size}>
            <SizeButton onClick={() => setSize(1)}>XS</SizeButton>
            <SizeButton onClick={() => setSize(2)}>S</SizeButton>
            <SizeButton onClick={() => setSize(3)}>M</SizeButton>
            <SizeButton onClick={() => setSize(4)}>L</SizeButton>
          </SizeSelect>
        )}
        <p>Cantidad</p>
        <QtySelect>
          <button onClick={() => (qty > 1 ? setQty(qty - 1) : null)}>-</button>
          <input type="text" disabled value={qty} />
          <button onClick={() => setQty(qty + 1)}>+</button>
        </QtySelect>
        <Button>Agregar al carrito</Button>
      </div>
    </StyledProductDetail>```

Por que product: { name, metadata } siguio funcionando aun sin editar las referencias dentro de la funcion? (ej. name)

tuve algunos problemas con la destructuracion y lo resolvi de la siguiente forma

export default function ProductDetail({ pageContext: { unit_amount, id, product: { name, metadata } } })