Productos en React

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

Clase anteriorSiguiente clase

JAIME URQUIZU

student•

Bufff... Al final, con esfuerzo, conseguido:

Johan Stivens Suarez Galindo

student•

Bro, no tuviste inconvenientes cargando las imágenes? a mi no me cargan 😥

JAIME URQUIZU

student•

johan, sí, tuve problemas. En cualquier vídeo de Platzi siempre tienes que mirar si los vídeos corresponden y el orden de los mismos también. Creo que estaban algunos mal colocados y después ya los pusieron en orden. Sigue todos los pasos tal cual te los proponen y verás que quizá te falta una línea de código o que no has seguido algún paso correctamente.

Duvan Carvajal

student•

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

Jose Carlos Correa

teacher•

A mí me parece Gatsby una excelente tecnología para incursionar en Graphql, Node quizá no puesto que si necesitas nociones intermedias de Node para comprender que está pasando y cómo hacer ciertas cosas. Pero me encanta que haya gente como tú aventurándose al mundo de Graphql con esta tecnología. Siempre la recomiendo para explorar Graphql sin configurarlo.

Alejandro Patiño Cardona

student•

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

cindy yurley caceres parada

student•

no tuviste problemas con la integracion?

Abdías N. Estrada Roca

student•

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

Juan Luis Rojas León

student•

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

Johan Stivens Suarez Galindo

student•

Hola, necesito ayuda!

Alguien sabe porque no me quieren cargar las imágenes? Revisando el query si trae los links en donde están alojadas, pero no se quieren mostrar, qué puede ser?

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 <span>👉</span>
              </Link>
            </article>
          )
        })}
      </section>
    </StyledProducts>
  )
}

Agradecería si alguien me pudiese ayudar!

Luis Mojica

teacher•

Me parece que te falta un espacio entre la ubicacion del recurso y el atributo alt de la imagen, pero habria que ver como estan formateados esos valores.

Luis Mojica

teacher•

...O cadenas mejor dicho.

Miguel Angel Reyes Moreno

student•

¿Por qué hacemos import formatprice from '../utils/priceFormat' si el archivo lo exportamos como priceFormart? No le encuentro sentido a esto.

Leonardo de los angeles Espinoza Hernandez

student•

Hola @miguelangelre28

Cuando exportas una función de la siguiente forma:

export default miFuncion

Lo que pasa es que puedes importarla en cualquier archivo con el nombre que quieras, si no tienes consistencia a la hora de importar las funciones con el mismo nombre o simplemente pones un nombre diferente, a la larga puedes causar confusiones por errores como este.

Hay una forma especial para que exportes las funciones y las tengas que importar con el mismo nombre siempre, se le conoce como import nombrado y lo puedes hacer de la siguiente forma

export const miFuncion = () => {}

y al momento de importarlo en otro archivo lo haces así: import { miFuncion } from './ruta_del_archivo' De esa forma mantienes una mejor consistencia cuando llamas funciones externas ya que si lo escribes de una forma diferente, tendrás un error.

Un saludo! Espero mi comentario sea de ayuda

Te recomiendo el curso de React avanzado donde puedes ver estos imports nombrados en un proyecto real.

Miguel Angel Reyes Moreno

student•

No sé si a alguien más le pase esto, pero si les da el error 'TypeError: 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>
      <h3>Productos</h3>
      <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>
  )
}

Carlos Quesada Díaz

student•

Genial! Muchas gracias.

También al usar allStripePrice he tenido que ajustar algunas cosas como la imagen según el nombre que tenían en graphql, como images

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

Ricardo Oriel Cuan Sánchez

student•

¿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. ?

Alejandro Zapata Molina

student•

Hola Ricardo, ya logre solucionarlo, mira mi ultimo aporte en la clase anterior :D

Raziel Carvajal

student•

Yo también puse otro aporte, revisar lo podría funcionarte.

Juan Castro

teacher•

Ya que usamos Gatsby... ¿Debemos hacer build cada vez que cambiamos la información de los productos? :scream::thinking:

Jose Carlos Correa

teacher•

Si algo cambia dentro de tu configuración del proyecto (gatsby-config, gatsby-ssr, gatsby-node) o agregas algún campo en la información que recibes de algún plugin de fuente de datos, la respuesta es si.

Geordano Polanco Rodríguez

student•

Está claro que si cambias la configuración debes de regenerar el proyecto.

Pero cada vez que la fuente de datos cambie tengo que hacerlo? Si creo un nuevo post en mi blog por ejemplo.

David Flores Medrano

student•

no me cargan las imagenes.. ni los precios.. sera de usar stripe cli?

Erik Elyager

student•

En aplicaciones web busca siempre en la consola de las developer tools, ahí puede haber un error que te de un mejor indicio de qué está pasando.

Antonio Bielma López

student•

Me sale el siguiente error:

TypeError: products.map is not a function

 return (
  12 |     <StyledProducts>
  13 |         <h2>Productos</h2>
> 14 |         <section>
     | ^  15 |             {products.map(({ node }) => {
  16 |                 const price = formatprice(node.price)
  17 |                 return (

andrés eduardo betancourt bescanza

student•

Esto puede ocurrir porque quizás products no es un array

Antonio Bielma López

student•

Tienes razón, no era. jaja

Javier Romero

student•

a mi no me funciona allStripeSku yo me rindo

Alex Camacho

teacher•

¡Hola Javi! :D ¿Cuál es el problema que tienes? ¿En qué te puedo ayudar?

andrés eduardo betancourt bescanza

student•

Revisa los aportes bro, hazlo de la siguiente manera

objects: ["Product", "Price"],

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

andrés eduardo betancourt bescanza

student•

Una duda, al venir las imagenes de los productos desde stripe, no realizarian el proceso de gatsby-transformer-sharp eso no hace la paginas mas lenta?

Erik Elyager

student•

No todas las imágenes necesitan ser super optimizadas, mientras stripe de imágenes de un tamaño razonable, no hay mayor problema con traerlas de ahí.

Carlos Miguél Correa Millán

student•

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

Rafael Guillermo Rodriguez Garcia

student•

julio 2023, el Sku camina perfecto, solo debes crear el producto con esa opción.

cindy yurley caceres parada

student•

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!

Pablo Nicolás Alonso

student•

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>
        <h3>Productos</h3>
        <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

Carlos Sepulveda

student•

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

Nicolás Posa

student•

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

Alex Leonardo Rodriguez Carvajal

student•

excelente ! muchas graicas nicolas, esto era lo que me hacia falta!

Juan Antonio Avalos Orozco

student•

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

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

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 <span>👉</span>
              </Link>
            </article>
          )
        })}
      </section>
    </StyledProducts>
  )
}

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>
      <h3>Productos</h3>
      <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>
  )
}

 return (
  12 |     <StyledProducts>
  13 |         <h2>Productos</h2>
> 14 |         <section>
     | ^  15 |             {products.map(({ node }) => {
  16 |                 const price = formatprice(node.price)
  17 |                 return (

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

// 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>
        <h3>Productos</h3>
        <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

Productos en React

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