Manejo de Gatsby Templates

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

Resumen

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.

JAIME URQUIZU

student•

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.

Wandy Rafael Santana Evangelista

student•

Por esa razon siempre inicio los cursos con mis propios estandares [well, estandares de la industria], asi evito esos errores y mi codigo se ve mas limpio y escalable. Recuerda, #NuncaParesDeAprender 💚

Iván Camilo González Alvarado

student•

Si ya sabe que deben ir cosas con mayúscula o minúscula debería confiar en usted y no hacerlo todo igual al profesor, si el man no pone una coma y usted sabe que va una coma tampoco la pone? De quejas sin sentido no se vive y de copiar códigos al pie de la letra tampoco, Saludos

Pedro Alejandro Silva Perez

student•

Está buenísimo este curso ¿Alguien en 2021 viéndolo? pa ser panas

Miguel Angel Reyes Moreno

student•

Aquí un pana :)

Carlos Mauricio

student•

Aqui en Octubre. Y en general todo bien.

Annderson Rey Sánchez

student•

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.

JAIME URQUIZU

student•

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!!!

Juan Antonio Avalos Orozco

student•

Agregar a la clase los archivos nuevos o modificados, tambien suele ayudar mucho. Es una buena area de mejora para este curso.

Wandy Rafael Santana Evangelista

student•

Creo que es una parte muy divertida [al menos para mi so], te empuja a tener que leer codigo y hacer tus propias implementaciones, y de esa manera aprendes X10. Recuerden, #NuncaParesDeAprender 💚

Robert Jarod Meza Garcia

student•

Me aparece loo siguiente :'( React Hook "useState" is called in function "productDetail" which is neither a React function component Se de react, se que mi componente es una funcion y no un clase

Jose Carlos Correa

teacher•

Los hooks de react tienen unas serie de reglas basicas que son muy importantes para su correcto funcionamiento, cosa que puedes aprender del curso de React.

El problema puede ser que tu componente tiene un nombre con minuscula, los componentes deben ser siempre llamados con pascal-case o quiza si estas haciendo un custom hook y no tiene el prefijo 'use'.

Espero que eso te ayude, de no ser asi comparte tu codigo y te ayudo a resolverlo. 🤘

Pablo Nicolás Alonso

student•

Cambia productDetail por ProductDetail export default function ProductDetail(...) Y listo.

Wandy Rafael Santana Evangelista

student•

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 💚

Irungaray Agustin

student•

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

andrés eduardo betancourt bescanza

student•

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

Irungaray Agustin

student•

Amigo, no termino de razonar del todo tu código, pero creo que te la complicaste, nada más era cuestión de poner

	const formatedPrice = priceFormat(unit_amount * qty);

unit_amount sería **price **en el código del profesor pero a mí stripe me lo devuelve así

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

Victor Marquez

student•

results { data: [Object: null prototype] { allStripeSku: [Object: null prototype] { edges: [Array] } } }

mi graphql no llama a mis datos

Emmanuel pallares

student•

Porque al final en la vista el precio me aparece como Nan aqui esta mi codigo

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

export default function ProductDetails({
  id,

  product: { name, metadata, unit_mount }
}) {
  const price = priceFormat(unit_mount)
  console.log(unit_mount)
  console.log(price)
  const [size, setSize] = useState(2)
  const [quantity, setQuantity] = useState(1)
  return (
    <StyledProductDetail>
      <SEO title={name} />
      <img src={metadata.img} alt={name} />
      <div>
        <Tag>Popular</Tag>
        <h3>{name}</h3>
        <b>MXN: {price}</b>
        {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={() => (quantity > 1 ? setQuantity(quantity - 1) : null)}
          >
            -
          </button>
          <input type="text" disabled value={quantity} />
          <button onClick={() => setQuantity(quantity + 1)}>+</button>
        </QtySelect>
      </div>
    </StyledProductDetail>
  )
}

andrés eduardo betancourt bescanza

student•

A alguien mas le paso que no puede hacer uso de los hooks?? Invalid hook call. Hooks can only be called inside of the body of a function component. Ya cheque el codigo varias veces y nada

Este es mi productDetail.js

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

export default function ProductDetails({
  id,
  unit_mount,
  product: { name, metadata },
}) {
  const price = priceFormat(unit_mount)
  const [size, setSize] = useState(2)
  const [quantity, setQuantity] = useState(1)
  return (
    <StyledProductDetail>
      <SEO title={name} />
      <img src={metadata.img} alt={name} />
      <div>
        <Tag>Popular</Tag>
        <h2>{name}</h2>
        <b>USD: {price}</b>
        {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={() => (quantity > 1 ? setQuantity(quantity - 1) : null)}
          >
            -
          </button>
          <input type="text" disabled value={quantity} />
          <button onClick={() => setQuantity(quantity + 1)}>+</button>
        </QtySelect>
      </div>
    </StyledProductDetail>
  )
}

Erik Elyager

student•

Ese error es porque lo estás llamando en un componente de tipo clase.

Robert Jarod Meza Garcia

student•

Hola, me pasa lo mismo :/ y estoy completamente seguro que estoy trabajando con una funcion de react. Ayuda!

cindy yurley caceres parada

student•

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 :D

Miguel Angel Reyes Moreno

student•

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.

Yulianny Betancourt

student•

Que chimbo que no tengan talla para gorditos XL.

Willy Da Conceicao

student•

lul

Sergio Joaquín Ávila Vázquez

student•

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>
        <h3>{name}</h3>
        <b>MXN {formatPrice}</b>
        <Stars />
        {/* {metadata.wear && <h2>Color: Azul</h2>} */}
        <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>```

Juan Antonio Avalos Orozco

student•

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

Guillermo Loza Hernandez

student•

Supongo que des-estructuramos el objeto product que recibimos

product {
	name
	metadata
}

Con :

product: { name, metadata },

Lo que nos entrega dentro de nuestro return name y metadata como props

william parra

student•

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

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

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

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

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

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

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

export default function ProductDetails({
  id,

  product: { name, metadata, unit_mount }
}) {
  const price = priceFormat(unit_mount)
  console.log(unit_mount)
  console.log(price)
  const [size, setSize] = useState(2)
  const [quantity, setQuantity] = useState(1)
  return (
    <StyledProductDetail>
      <SEO title={name} />
      <img src={metadata.img} alt={name} />
      <div>
        <Tag>Popular</Tag>
        <h3>{name}</h3>
        <b>MXN: {price}</b>
        {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={() => (quantity > 1 ? setQuantity(quantity - 1) : null)}
          >
            -
          </button>
          <input type="text" disabled value={quantity} />
          <button onClick={() => setQuantity(quantity + 1)}>+</button>
        </QtySelect>
      </div>
    </StyledProductDetail>
  )
}

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

export default function ProductDetails({
  id,
  unit_mount,
  product: { name, metadata },
}) {
  const price = priceFormat(unit_mount)
  const [size, setSize] = useState(2)
  const [quantity, setQuantity] = useState(1)
  return (
    <StyledProductDetail>
      <SEO title={name} />
      <img src={metadata.img} alt={name} />
      <div>
        <Tag>Popular</Tag>
        <h2>{name}</h2>
        <b>USD: {price}</b>
        {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={() => (quantity > 1 ? setQuantity(quantity - 1) : null)}
          >
            -
          </button>
          <input type="text" disabled value={quantity} />
          <button onClick={() => setQuantity(quantity + 1)}>+</button>
        </QtySelect>
      </div>
    </StyledProductDetail>
  )
}

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

<StyledProductDetail>
      <SEO title={name} />
      <img src={metadata.img} alt="name" />
      <div>
        <Tag>Popular</Tag>
        <h3>{name}</h3>
        <b>MXN {formatPrice}</b>
        <Stars />
        {/* {metadata.wear && <h2>Color: Azul</h2>} */}
        <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>```

Manejo de Gatsby Templates

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