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

Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

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? Crea una cuenta 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 ‘sea 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 } } })