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

Productos en React

23/33
Recursos

Aportes 19

Preguntas 6

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesi贸n.

Bufff鈥 Al final, con esfuerzo, conseguido:

Este curso me esta encantando. aunque es todo un reto para mi porque no domino Node y Graphql es nuevo para mi. aun as铆 lo he disfrutado mucho y he aprendido con cada error que he logrado corregir.
馃槃

A pesar de que el curso es de hace 2 a帽os, aun me funciona, con la diferencia de que para guardar los productos en stripe es con el CLI por consola, aqu铆 mi test

Realic茅 un tutorial para resolver los problemas de integraci贸n con Stripe https://platzi.com/tutoriales/1618-gatsby/6296-ajustes-para-integrar-stripe/

query {
  allStripeSku {
    edges {
      node {
        id
        price
        product {
          name
          metadata {
            description
            img
            wear
          }
        }
      }
    }
  }
}

驴C贸mo hicieron para hacer la petici贸n en 2020?
Tengo error con Sku, estoy usando Product y este no tiene el precio de los productos.
?

Ya que usamos Gatsby鈥
驴Debemos hacer build cada vez que cambiamos la informaci贸n de los productos? 馃槺馃

El Sku ahora esta obsoleto en las nuevas versiones para esto ahora se usa el allStripePrice aca la Doc https://www.gatsbyjs.com/plugins/gatsby-source-stripe/#how-to-query-with-prices.
En su archivo gatsby-config.js deben agregar Price al objects de esta manera

  {
    resolve: `gatsby-source-stripe`,
    options: {
      objects: ['Balance', 'BalanceTransaction', 'Product', 'ApplicationFee', 'Subscription', 'Price'],
      secretKey: process.env.STRIPE_SK,
      downloadFiles: true,
    }
  }

Aunque el curso este desactualizado nada nos cuesta buscar la informacion actualizada e implementarlos a nuestro proyecto

Para el problema con la imagen decidi usar la del sku! sin entrar al product! ya que me traia bien la ulr de la misma!

No s茅 si a alguien m谩s le pase esto, pero si les da el error 鈥楾ypeError: products.map is not a function鈥, es porque {products} es un objeto y no un array. Si entramos a products.edges ya tendremos un array y todo funcionar谩 correctamente.

import React from 'react'
import { Link } from 'gatsby'
import formatprice from '../utils/priceFormat'
import { StyledProducts } from '../styles/components'

export default function Products({products}) {
  return (
    <StyledProducts>
      <h2>Productos</h2>
      <section>
        {products.edges.map(({node}) => {
          const price = formatprice(node.unit_amount)
          return (
            <article key={node.id}>
              <img src={node.product.metadata.img} alt={node.product.name}/>
              <p>{node.product.name}</p>
              <small>USD {price}</small>
              <Link to={`/${node.id}`}>
                Comprar ahora <span></span>
              </Link>
            </article>
          )
        })}
      </section>
    </StyledProducts>
  )
}

Para los Platzi-nautas del 2021:

Si en las anteriores clases siguieron el camino recomendado de poner:

// gatsby-config.js
// ...
    {
      resolve: `gatsby-source-stripe`,
      options: {
        objects: [`Price`],
        secretKey: process.env.STRIPE_SK
      }
    }
// ...

Entonces, para que todo resulte bien bonito y no tengan un cartel rojo con letras a煤n m谩s rojas en la p谩gina:

// src/components/Products.js

import React from 'react';
import { Link } from 'gatsby'
import formatprice from '../utils/priceFormat'
import { StyledProducts } from '../styles/components'

export default function Products({ products }) {

  return (
    <>
      <StyledProducts>
        <h2>Productos</h2>
        <section>
          {products.map(({ node }) => {
            const price = formatprice(node.unit_amount)
            return (
              <article key={node.id}>
                <img src={node.product.metadata.img} alt={node.product.name} />
                <p>{node.product.name}</p>
                <small>USD {price}</small>
                <Link to={`/${node.id}`}>
                  Comprar ahora
                </Link>

              </article>
            )
          })}
        </section>
      </StyledProducts>
    </>
  )
}

// src/pages/index.js
import React from "react"
import { Jumbo, SEO, Products } from "../components"
import { graphql } from "gatsby"

export const query = graphql`
query GET_DATA{
  allSite {
    edges {
      node {
        siteMetadata {
          title
          description
          author
        }
      }
    }
  }
  allStripePrice{
    edges{
      node{
        id
        unit_amount
        product{
          name
          metadata{
            img
            description
            wear
          }      
        }
      }
    }
  }
}
`;

const IndexPage = ({ data }) => {
  console.log(data)
  return (
    <>
      <SEO title="Home" />
      <Jumbo description={data.allSite.edges[0].node.siteMetadata.description} />

      <Products products={data.allStripePrice.edges} />
    </>
  )
}

export default IndexPage

si no puedes ver las im谩genes, puede que esta etiqueta img te funcione

<img src={node.product.images}/>

Esto debido a que ha cambiado un poco la estructura respecto al video

Yo tenia problemas con las imagenes y lo solucion茅 remplazando los links de la metadata img (en la p谩gina de stripe) por los siguiente:
pin: https://i.postimg.cc/6qyBYsPV/pin.png
Sticker 2: https://i.postimg.cc/dVMJmxjd/stickers2.png
Mug: https://i.postimg.cc/QCwhz4L2/mug.png
Camiseta: https://i.postimg.cc/s2rDyNBy/camiseta.png
Sticker 1: https://i.postimg.cc/VNWsNWMt/stickers1.png
Hoodie: https://i.postimg.cc/xTB1pCnX/hoodie.png

Algo paso por aqui. Se llama 'Product.js' o 'Products.js', finalmente? :/

Hay que ignorar el comentario de cambiar el nombre del archivo a Product.js, al menos hasta este punto.

es recomendable utilizar un index.js (que funcione como indexador) en components?

a mi me dice que no encuentra la llave de conexion en el archivo config , es muy extra帽o sera que es por que lo estoy haciendo con las llaves test ?

Teniendo en cuenta que en el dashboard de Stripe no se pueden crear productos SKU, he modificado los scripts para poder mostrar la info de cada producto.

  1. Archivo gatsby-config.js
{
      resolve:`gatsby-source-stripe`,
      options:{
        objects: ['Product','Price'],
        secretKey: process.env.STRIPE_SK,
        downloadFiles: true,
      },

hasta el memento me ha ido bien tube problemas con el allStripeSku pero lo solucione con el Price y me funciono!