Configuración y Creación de Colecciones en Shopify

Contenido del curso

Conceptos básicos de Next.js 14

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

Data Fetching en Next.js

Next.js Avanzado

Autenticación y autorización

Inteligencia Artificial

Performance

Frontend Ops

Next.js es parte de tu nuevo stack

57
Next.js: Backend y Frontend con React Server Components
01:25 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:005:52

Configuración y Creación de Colecciones en Shopify

Curso de Next.js 14

Clase 29 de 57

Clase 29 / 57

Recursos

¿Cómo configurar colecciones en Shopify?

Crear colecciones en Shopify es un proceso esencial para organizar y presentar productos de manera efectiva dentro de tu tienda en línea. Imagina las colecciones como categorías personalizadas que facilitan a los clientes encontrar lo que buscan. Aquí te guiaré a través de los pasos para configurar colecciones en tu cuenta de Shopify.

Pasos para crear colecciones

Ingresa a Shopify: Accede a tu cuenta de Shopify usando tus credenciales.
Selecciona tu tienda: Dirígete a la lista de tiendas y selecciona la que estás desarrollando, en este caso, "Future World Next JS".
Configura las colecciones:
- Dirígete a la sección de productos y selecciona "Colecciones".
- Crea una nueva colección dándole un nombre, por ejemplo, "Tecnología - Realidad Virtual".
- Asegúrate de elegir el tipo de colección automatizada y utilizar etiquetas de productos para definir los criterios de los productos que pertenecerán a esta colección.

Organización y uso de etiquetas

Shopify permite el uso de etiquetas para automatizar la clasificación de los productos dentro de una colección. Al configurar las colecciones, puedes seleccionar etiquetas precreadas para ahorrar tiempo. Simplemente selecciona una etiqueta para cada colección y guarda los cambios. El proceso de actualización puede tardar unos minutos, pero este es un paso crucial para tener un catálogo organizado.

¿Cómo construir la tienda usando los componentes?

Una vez que hayas configurado tus colecciones, el siguiente paso es implementar estos elementos en la estructura de tu tienda.

Implementación de componentes

Ubicación de componentes: Dirígete a la carpeta de componentes en tu proyecto. Ahí encontrarás unos componentes precargados llamados Store.
Componentes para la tienda:
- Products Wrapper: Este componente actúa como un contenedor que agrupa todos los productos que serán mostrados.
- Product Guard: Este es el componente encargado de presentar cada producto. Utiliza Image y Link para mostrar la información, permitiendo la navegación hacia una página específica de cada producto.
Uso de enlaces y la API de Shopify:
- Los enlaces llevan a una página implementada denominada Product.Handle, la cual utiliza el Product ID del API de Shopify para mostrar el producto específico.

Ejemplo de código

import { ProductWrapper } from './components/Store';

const products = await getProductsFromAPI(); // Suponiendo que tienes una función para obtener productos

function StorePage() {
  return (
    <ProductWrapper products={products} />
  );
}

export default StorePage;

¿Cómo consumir las colecciones desde la tienda?

Para que las colecciones que has creado sean efectivas, necesitas hacer que tu tienda las consuma e integre, permitiendo navegar por categorías específicas.

Implementación en la página de la tienda:

Importar y utilizar el componente de categorías:
- Importa el componente ProductsCategory dentro de tu página de Store.
- Configura la función asíncrona para obtener productos usando tu servicio Get Products.
Configurar la petición de productos:
- Haz uso de un async function para obtener productos y pasar estos datos al ProductWrapper.

Ejemplo de obtención de productos

import { getProducts } from './services/ProductService';

export default async function Store() {
  const products = await getProducts();
  
  return (
    <ProductWrapper products={products} />
  );
}

Una vez configuradas las colecciones y consumidas por la tienda, tus clientes podrán disfrutar de una experiencia de compra más organizada y personalizada. Así que sigue adelante y experimenta con diferentes colecciones y productos, ¡tu tienda en Shopify está lista para destacar!

Resumen

¿Cómo configurar colecciones en Shopify?

Pasos para crear colecciones

Ingresa a Shopify: Accede a tu cuenta de Shopify usando tus credenciales.
Selecciona tu tienda: Dirígete a la lista de tiendas y selecciona la que estás desarrollando, en este caso, "Future World Next JS".
Configura las colecciones:
- Dirígete a la sección de productos y selecciona "Colecciones".
- Crea una nueva colección dándole un nombre, por ejemplo, "Tecnología - Realidad Virtual".
- Asegúrate de elegir el tipo de colección automatizada y utilizar etiquetas de productos para definir los criterios de los productos que pertenecerán a esta colección.

Organización y uso de etiquetas

¿Cómo construir la tienda usando los componentes?

Una vez que hayas configurado tus colecciones, el siguiente paso es implementar estos elementos en la estructura de tu tienda.

Implementación de componentes

Ubicación de componentes: Dirígete a la carpeta de componentes en tu proyecto. Ahí encontrarás unos componentes precargados llamados Store.
Componentes para la tienda:
- Products Wrapper: Este componente actúa como un contenedor que agrupa todos los productos que serán mostrados.
- Product Guard: Este es el componente encargado de presentar cada producto. Utiliza Image y Link para mostrar la información, permitiendo la navegación hacia una página específica de cada producto.
Uso de enlaces y la API de Shopify:
- Los enlaces llevan a una página implementada denominada Product.Handle, la cual utiliza el Product ID del API de Shopify para mostrar el producto específico.

Ejemplo de código

import { ProductWrapper } from './components/Store';

const products = await getProductsFromAPI(); // Suponiendo que tienes una función para obtener productos

function StorePage() {
  return (
    <ProductWrapper products={products} />
  );
}

export default StorePage;

¿Cómo consumir las colecciones desde la tienda?

Para que las colecciones que has creado sean efectivas, necesitas hacer que tu tienda las consuma e integre, permitiendo navegar por categorías específicas.

Implementación en la página de la tienda:

Importar y utilizar el componente de categorías:
- Importa el componente ProductsCategory dentro de tu página de Store.
- Configura la función asíncrona para obtener productos usando tu servicio Get Products.
Configurar la petición de productos:
- Haz uso de un async function para obtener productos y pasar estos datos al ProductWrapper.

Ejemplo de obtención de productos

import { getProducts } from './services/ProductService';

export default async function Store() {
  const products = await getProducts();
  
  return (
    <ProductWrapper products={products} />
  );
}

Comentarios (7)7 comentarios

Omar Alejandro Morales Mendoza

Hace 3 años

Si alguno presenta el siguiente problema

No olviden agregar en su archivo types.d.ts

Espero les sea de utilidad

Alfonso G. Bastias

Hace 2 años

Creo que no es que sea avanzado el curso, sino que es desordenado.

Kevin Mejia

Sería bueno que no se de por hecho cosas y que en el curso se construyan los propios del mismo para no tener que ir al repo a copiar y pegar. Hay gente novata que toma los cursos y eso es practica para saber la razón por la cual se hace cada paso.

Juan David Vanegas Roldán

Es que este es un curso avanzado, lo advierten desde el principio. No es nivel básico. Ya debes estar en capacidad de leer código y poderlo entender.

Xavier Flores

concuerdo con JuanDavid

Fernanda Aguilar Pfannschmidt

Toca cambiar a la Platzi api porque se acabo el periodo de prueba en Shopify 😑

Lucho Cadiz

Hace 9 meses•editado

Para los que esten trabajando con las ultimas versiones de la api de shopify les comento que el response de product varia en algunas propiedades en comparacion a como esta en el video por lo que no les va a mostrar los productos en el store. Recomiendo que saquen los tipos que le devuelve la api y que lo adapten en los componentes segun sus nuevos propiedades. Saludos.

Kevin Riquelme Valdes

Porque no usar la api creada en la clase pasada para hacer la peticion de los productos?

Juan Carlos Montilla Sánchez

Hola, Kevin.

¿Cómo así?

Hasta este punto estamos utilizando la API de la clase anterior, fíjate que tenemos el método getProducts() y lo pasamos como props a el ProductsWrapper

Nicolás García López

No entiendo una cosa. Se Supone que dentro de App estar nuestras rutas donde las nombramos y dentro de ellas si son paginas deben tener el archivo page.tsx, que es lo que renderizara cuando entremos a esta ruta, pero en algún momento del curso se elimino este page.tsx y solo dejo el de ...categories y es allí donde se renderiza nuestro llamado de getProducts, si yo intento eliminar tal como el lo tiene en el repositorio el page.tsx de store me saldra la pagina de not-found porque evidentemente no hay pagia que renderizar, por ello no entiendo como es que funciona dejando solo page.tsx pero dentro de ...categories, le he dado vueltas pero sigo sin entender y sigo sin lograr hacerlo funcionar

Recuerdate las clases al principio del curso, donde el profesor explica que iban a ser capturadas todas las rutas sin necesidad de escribirlas manualmente, es por eso que con un solo page.tsx o page.js podemos mostrar la vista de los productos. Es muy importante entender el filesystem en Next.JS.

Debes tener en cuenta tener los [[categories]] -> esto captura cualquier categoría y no hace falta tener un page.tsx dentro de la carpeta Store, ya que eso sería una vista antes de las categorías

WYLDER ESTIVEN QUICENO OLAYA

Para visualizar el price, cree el tipo VariantType en el archivo types.d.ts y lo agregue a ProductType

|type VariantType = {

price: number;

};

type ProductType = {

id: string;

title: string;

description: string;

variants: VariantType[];

image: string;

quantity: number;

handle: string;

tags: string;

Luego en ProductsCard.tsx uso

{product.variants.shift()?price}

shift me retorna siempre el primer elemento de una lista

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

Route Grouping en Next.js sin crear segmentos

error.tsx para manejar errores en Next.js

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

Filtrar productos por colección en Shopify

params y searchParams en Next.js

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

Checkout de Shopify sin errores de hidratación

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

Analiza tu 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

Configuración y Creación de Colecciones en Shopify