Implementación de la Vista de Producto en TypeScript y React

Resumen

Crear una vista efectiva y atractiva para los productos en una tienda en línea es una tarea que involucra conocimientos de programación, diseño de interfaces y una adecuada gestión de los datos. En esta guía, vamos a emplear TypeScript para mejorar la presentación de un producto y asegurarnos de que la información sea mostrada de manera coherente y estructurada. También aprenderemos a manejar datos de forma dinámica con servicios que interactúan con una API, en este caso, la de Shopify. Empecemos por entender cómo implementar la vista de un producto en nuestra aplicación.

¿Cómo mejorar la visualización de un producto en la página?

Para darle un aspecto más profesional a la vista de nuestro producto, utilizaremos un componente presentacional llamado ProductView. Este componente tendrá una estructura que incluye varios elementos esenciales como la imagen, el título, las etiquetas, la descripción, el precio y la cantidad del producto.

Para integrar ProductView en nuestra página de productos, reemplazaremos el retorno actual en el manejador con este nuevo componente. Es importante tener en cuenta que TypeScript nos ayudará a garantizar que pasamos todos los datos necesarios a ProductView mediante el uso de tipos, especificamente, ProductType.

¿Qué es la estructura ProductType y por qué es importante?

ProductType es un tipo que define las propiedades esperadas de un producto, asegurando así que la información necesaria está presente y es del tipo correcto. Este tipo incluye:

ID
Título
Descripción
Precio
Imagen
Cantidad
Handle
Etiquetas

Al obtener datos de nuestra API que no coinciden con esta estructura, necesitamos transformarlos adecuadamente.

¿Cómo transformar los datos de un producto para que coincidan con nuestra estructura de datos?

Para realizar esta transformación, primero tenemos que obtener el producto por su ID a través de un servicio dedicado. A continuación, mapeamos los datos que recibimos de la API a nuestro ProductType utilizando una función de transformación en nuestro servicio. Esto nos asegura que todos los componentes que dependen de estos datos reciban lo que esperan.

Hagamos un ejemplo con el mapeo de la ID del producto:

product.variants[0].admin_graphql_api_id

Dado que las variantes vienen en un arreglo, asumimos para nuestro ejemplo que solo hay una variante por producto.

¿Cómo se obtiene un producto específico mediante su ID?

Para buscar un producto por su ID, mejoraremos el servicio de obtención de productos para que pueda aceptar un ID opcional y devuelva el producto correspondiente en el formato ProductType. En este servicio, manejamos adecuadamente los errores y aseguramos que la estructura de datos transformada sea la que se retorna.

Aquí te dejo un pequeño pseudocódigo sobre cómo se haría esa petición en nuestro servicio:

if (ID) {
  return transformProduct(apiFetch(`products/${ID}`));
} else {
  return transformProduct(apiFetch('products'));
}

¿Cómo implementamos el servicio de productos en nuestra página?

Una vez que tengamos nuestro servicio listo y funcionando, podremos importarlo en nuestra página de productos y solicitar la información del producto utilizando el ID que obtenemos desde los parámetros de búsqueda (searchParams). Con esto, pedimos al servicio que nos devuelva el producto correcto, y pasamos estos datos al componente ProductView.

Por último, con nuestra página ya capaz de mostrar la información correcta, podemos estar seguros de que los visitantes tendrán una percepción más clara y detallada del producto que están considerando, proporcionando una experiencia de usuario más satisfactoria.

Seguir aprendiendo sobre cómo implementar y mejorar las estructuras de datos y la interacción con APIs no solo es fundamental para el desarrollo web moderno, sino que también es una aventura continua en la resolución de problemas y la innovación. ¡Adelante con tu proyecto y que cada paso te acerque a una tienda en línea impresionante!

Ricardo Rito Anguiano

student•

Amo que ya esten hechos los componentes y el curso se enfoque en NEXT en lugar de explicar paso a paso el css y el html. 💚

Gonzalo Gutiérrez Castillo

student•

Completamente de acuerdo, no se porque otros se quejan de esto, el hecho de que los componentes ya esten hechos da mas tiempo para que se profundice en lo que realmente nos interesa que es Next

Julian Cortes

student•

no seria mas limpio crear un getProduct ? para no incrementar la logica en getProducts

Carlos Alberto Vera Betancourt

student•

En efecto compañero creo que del modo en que el profesor implemento la funcionalidad rompe el principio SRP de los principios SOLID al cargar dos responsabilidades en una sola función

Andres Gallego

student•

Si les sale error del icono en ProductViewItemsOrder, solamente es instalar el paquete de iconos npm install react-icons --save

Carlos Mario Gomez Gelvez

student•

Hice un tipado de todo la data que nos entrega shopify por si quieren agregarlo a su proyecto export interface ProductTypes { id: number; title: string; body_html: string; vendor: string; product_type: string; created_at: string; handle: string; updated_at: string; published_at: string; template_suffix: any; published_scope: string; tags: string; status: string; admin_graphql_api_id: string; variants: Variant[]; options: Option[]; images: Image[]; image: Image2;} export interface Variant { id: number; product_id: number; title: string; price: string; sku: any; position: number; inventory_policy: string; compare_at_price: string; fulfillment_service: string; inventory_management: any; option1: string; option2: any; option3: any; created_at: string; updated_at: string; taxable: boolean; barcode: any; grams: number; image_id: any; weight: number; weight_unit: string; inventory_item_id: number; inventory_quantity: number; old_inventory_quantity: number; requires_shipping: boolean; admin_graphql_api_id: string;} export interface Option { id: number; product_id: number; name: string; position: number; values: string[];} export interface Image { id: number; alt: any; position: number; product_id: number; created_at: string; updated_at: string; admin_graphql_api_id: string; width: number; height: number; src: string; variant_ids: any[];} export interface Image2 { id: number; alt: any; position: number; product_id: number; created_at: string; updated_at: string; admin_graphql_api_id: string; width: number; height: number; src: string; variant_ids: any[];}

export interface ProductTypes {
  id: number;
  title: string;
  body_html: string;
  vendor: string;
  product_type: string;
  created_at: string;
  handle: string;
  updated_at: string;
  published_at: string;
  template_suffix: any;
  published_scope: string;
  tags: string;
  status: string;
  admin_graphql_api_id: string;
  variants: Variant[];
  options: Option[];
  images: Image[];
  image: Image2;
}

export interface Variant {
  id: number;
  product_id: number;
  title: string;
  price: string;
  sku: any;
  position: number;
  inventory_policy: string;
  compare_at_price: string;
  fulfillment_service: string;
  inventory_management: any;
  option1: string;
  option2: any;
  option3: any;
  created_at: string;
  updated_at: string;
  taxable: boolean;
  barcode: any;
  grams: number;
  image_id: any;
  weight: number;
  weight_unit: string;
  inventory_item_id: number;
  inventory_quantity: number;
  old_inventory_quantity: number;
  requires_shipping: boolean;
  admin_graphql_api_id: string;
}

export interface Option {
  id: number;
  product_id: number;
  name: string;
  position: number;
  values: string[];
}

export interface Image {
  id: number;
  alt: any;
  position: number;
  product_id: number;
  created_at: string;
  updated_at: string;
  admin_graphql_api_id: string;
  width: number;
  height: number;
  src: string;
  variant_ids: any[];
}

export interface Image2 {
  id: number;
  alt: any;
  position: number;
  product_id: number;
  created_at: string;
  updated_at: string;
  admin_graphql_api_id: string;
  width: number;
  height: number;
  src: string;
  variant_ids: any[];
}

Lizbeth Grisales

student•

que detallazo 🤍 gracias

Gerardo J. Rito

student•

muchas gracias!!

Jose Miguel Valero Reyes

student•

ahora, para que modificar el metodo de getProducts? en teoria esto deberia traernos todos los productos, no seria mas limpio crear un nuevo metodo que me traiga solo un producto segun el id? algo como getProduct? pregunto mas que nada para conocer bien la arquitectura de nextjs.

Jose Miguel Valero Reyes

student•

pregunta quizas innecesaria: 1.- cual es el standar para escribir los directorios que son asociados a una vista? con Mayuscula o minuscula?

veo que tienes el directorio de Store con mayusculas y el directorio de products con minusculas, cual seria el correcto o el standard? o simplemente escribimos como queramos sin ninguna regla?

gracias.

Josue David

student•

tengo el codigo igual al profesor y tambien he levantado el proyecto en la rama de los recursos del proyecto y no me funciona en ningun caso. No entiendo la verdad.

Juan Carlos Montilla Sánchez

student•

Hola, Josue.

Comparte tu código para ayudarte

Jose Luis Bedoya

student•

increible clase, tengo muchas ganas de usar los server components!

Guido Juliano Mazzuchini Ubaldi

student•

El SyntheticEvent es una abstracción del evento nativo del navegador. Esto le permite a React tener un comportamiento consistente en todos los navegadores.

Gerardo Castillo

student•

Interesante. Aquí hay un recurso para profundiar un poco:

Gerardo J. Rito

student•

en next.js 16 los params y searchParams se reciben como Promise tarde horas tratando de solucionarlo.

interface ProductPageProps {    searchParams:Promise<{        id?:string    }>}export default async function ProductPage({searchParams}: ProductPageProps){    const {id}=await searchParams;    const products=await getProduct(id)      const product=products[0];    return <ProductView product={product}/>}

Carlos Alberto Vera Betancourt

student•

He aplicado el principio de Responsabilidad Única (SRP) de SOLID al separar las funcionalidades en servicios distintos. En lugar de tener una sola función con dos responsabilidades, ahora tenemos dos funciones especializadas: una para obtener todos los productos y otra para obtener un producto específico. Esto mejora la mantenibilidad, legibilidad y escalabilidad del código.

import { env } from "@/config/env"
import { shopifyUrls } from "./urls"

// Función para transformar productos de la API a nuestro formato
const transformProducts = (products: any[]): ProductType[] => {
  return products.map((product: any) => ({
    id: product.id,
    title: product.title,
    description: product.body_html,
    price: parseFloat(product.variants[0].price),
    image: product.images[0].src,
    quantity: product.variants[0].inventory_quantity,
    handle: product.handle,
    tags: product.tags,
  }))
}

// Servicio para obtener todos los productos
export const getProducts = async (): Promise<ProductType[]> => {
  try {
    const response = await fetch(shopifyUrls.products.all, {
      headers: new Headers({
        'X-Shopify-Access-Token': env.SHOPIFY_ACCES_TOKEN
      })
    })
    
    if (!response.ok) {
      throw new Error(`Error: ${response.status}`)
    }
    
    const { products } = await response.json()
    return transformProducts(products)
  } catch (error) {
    console.error('Error fetching products:', error)
    return []
  }
}

// Servicio para obtener un solo producto por ID
export const getProduct = async (id: string): Promise<ProductType | null> => {
  try {
    const response = await fetch(`${shopifyUrls.products.all}?ids=${id}`, {
      headers: new Headers({
        'X-Shopify-Access-Token': env.SHOPIFY_ACCES_TOKEN
      })
    })
    
    if (!response.ok) {
      throw new Error(`Error: ${response.status}`)
    }
    
    const { products } = await response.json()
    
    if (products.length === 0) {
      return null
    }
    
    // Transformamos y devolvemos el primer producto (debería ser el único)
    const transformedProducts = transformProducts(products)
    return transformedProducts[0]
  } catch (error) {
    console.error(`Error fetching product with id ${id}:`, error)
    return null
  }
}
```import { env } from "@/config/env"import { shopifyUrls } from "./urls"
// Función para transformar productos de la API a nuestro formatoconst transformProducts = (products: any\[]): ProductType\[] => {  return products.map((product: any) => ({    id: product.id,    title: product.title,    description: product.body\_html,    price: parseFloat(product.variants\[0].price),    image: product.images\[0].src,    quantity: product.variants\[0].inventory\_quantity,    handle: product.handle,    tags: product.tags,  }))}
// Servicio para obtener todos los productosexport const getProducts = async (): Promise\<ProductType\[]> => {  try {    const response = await fetch(shopifyUrls.products.all, {      headers: new Headers({        'X-Shopify-Access-Token': env.SHOPIFY\_ACCES\_TOKEN      })    })        if (!response.ok) {      throw new Error(`Error: ${response.status}`)    }        const { products } = await response.json()    return transformProducts(products)  } catch (error) {    console.error('Error fetching products:', error)    return \[]  }}
// Servicio para obtener un solo producto por IDexport const getProduct = async (id: string): Promise\<ProductType | null> => {  try {    const response = await fetch(`${shopifyUrls.products.all}?ids=${id}`, {      headers: new Headers({        'X-Shopify-Access-Token': env.SHOPIFY\_ACCES\_TOKEN      })    })        if (!response.ok) {      throw new Error(`Error: ${response.status}`)    }        const { products } = await response.json()        if (products.length === 0) {      return null    }        // Transformamos y devolvemos el primer producto (debería ser el único)    const transformedProducts = transformProducts(products)    return transformedProducts\[0]  } catch (error) {    console.error(`Error fetching product with id ${id}:`, error)    return null  }}

Erick Marty Terrazas Zeballos

student•

Wow me confundi un poco el mio no captura mis varaibles de entorno por que son de servidor tuve que agregar un una nueva variable de cliente en .env NEXT_PUBLIC_SHOPIFY_HOSTNAME ademas me sale problema de cors.

Implementación de la Vista de Producto en TypeScript y React

Conceptos básicos de Next.js 14

Optimización Web con Next.js: Velocidad y Rendimiento Mejorados

Creación de Proyectos Next.js con TypeScript y App Router

Creación de Tienda Online con NextGIS y Shopify

Rutas Estáticas y Dinámicas en Next.js: Creación y Uso Práctico

Implementación de Layouts en Next.js: Globales y Locales

Navegación Optimizada con Next.js Usando el Componente Link

Rutas Dinámicas y Parámetros en Next.js: Implementación Práctica

Uso de React Server Components en Next.js: Cliente vs Servidor

Arquitectura de Componentes para Landing Page en Next.js

Manejo de estilos y estáticos en Next.js 14

Implementación de CSS Modules en Next.js para Estilizar Componentes

Instalación y Configuración de Sass en Next.js

Estilos Globales con SASS para Temas Oscuros en Aplicaciones Web

Agregar Archivos Estáticos en Next.js: Imágenes y Recursos Internos

Optimización de Imágenes con Next.js: Uso de Next.Image

Optimización y Responsividad con NextImage en Next.js

Optimización de Fuentes de Google en Next.js con Roboto

Estilos Dinámicos en React con Classnames y useState

Data Fetching en Next.js

Creación de Tienda en Shopify para Desarrollo con Next.js

Creación y uso de variables de entorno en Next.js

Consumo de APIs con Shopify y React Server Components

Implementación de Loader en Next.js para Carga de Productos

Implementación de Root Grouping en Next.js

Manejo de Errores en Next.js con React Error Boundary

Next.js Avanzado

Manejo de Errores y Páginas 404 en Next.js

React Server Components en Next.js: Renderizado y Optimización

Diferencias entre archivos Template y Layout en Next.js

Arquitectura Escalable para Aplicaciones de Software

Creación de APIs con Next.js y Road Handlers

Configuración y Creación de Colecciones en Shopify

Patrones de Fetching en Next.js: Secuencial y Paralelo

Filtrado Dinámico de Productos en Shopify mediante API Collections

Uso de searchParams y params en componentes React cliente-servidor

Implementación de la Vista de Producto en TypeScript y React

Gestión de Caché en Next.js: Tipos y Recomendaciones Prácticas

Revalidación de Caché en Next.js: Endpoints por Tag y Path

Redirección en Next.js: Server y Client Components

Creación de un Componente React para Sanitizar HTML

SEO Dinámico y Estático en Next.js para Mejorar Posicionamiento Web

Autenticación y autorización

Implementación de API GraphQL en Shopify para Autenticación Segura

Uso de Server Actions en Next.js para Formularios React

Implementación de Signup con GraphQL y Shopify

Implementación de Cookies de Acceso en Shopify con Next.js

Implementación de Flujo de Login con Tokens y Cookies

Validación de Access Tokens en Next.js con GraphQL y Cookies

Implementación de Carrito de Compras con React Icons

Manejo de estado global con Sustant en Next.js 13

Implementación de Carrito de Compras en JavaScript y CSS

Solución de errores de hidratación en carritos con Next.js y Shopify

Implementación de Middlewares en Next.js para Control de Acceso

Inteligencia Artificial

Implementación de Chatbots con Next.js y Vercel AI SDK

Creación de un Chatbot de Ventas con Personalidad y Contexto

Performance

Implementación de Parallel Routing en Next.js para Cargas Independientes

Análisis de Bundle en Next.js con Bundle Analyzer

Frontend Ops

"Implementación del Edge Runtime en Next.js"

Despliegue de Aplicaciones NxJS en Vercel

Arquitectura de Proyectos Next.js para Entornos Empresariales

Next.js es parte de tu nuevo stack

Next.js: Backend y Frontend con React Server Components