Integración de Shopify en una Aplicación Web Next.js React

Integrar Shopify en una aplicación web Next.js React puede potenciar al máximo tu experiencia de eCommerce. Next.js ofrece renderizado del lado del servidor (SSR) y generación de sitios estáticos (SSG), mientras que Shopify se encarga de la gestión de productos, el checkout y los métodos de pago.

---

1. Configurar la API Storefront de Shopify

Shopify proporciona una API GraphQL Storefront para obtener productos, colecciones y sesiones de checkout.

Pasos:

1. Accede al panel de administración de Shopify.
2. Crea una aplicación privada o personalizada con acceso a la API Storefront.
3. Genera el token de acceso a la API Storefront.

---

2. Crear un Proyecto Next.js

npx create-next-app@latest shopify-next-app
cd shopify-next-app

Instala los paquetes necesarios:

npm install @shopify/hydrogen react-query graphql-request

---

3. Conectarse a la API de Shopify

Crea un archivo de utilidad lib/shopify.ts:

import { GraphQLClient } from 'graphql-request';

const endpoint = process.env.SHOPIFY_STORE_DOMAIN + '/api/2023-04/graphql.json';
const client = new GraphQLClient(endpoint, {
  headers: {
    'X-Shopify-Storefront-Access-Token': process.env.SHOPIFY_STOREFRONT_TOKEN || '',
  },
});

export async function fetchShopifyData(query: string, variables = {}) {
  return client.request(query, variables);
}

Agrega las variables de entorno en .env.local:

SHOPIFY_STORE_DOMAIN=https://tu-tienda.myshopify.com
SHOPIFY_STOREFRONT_TOKEN=tu_token_api

---

4. Obtener Productos en Next.js

Utiliza getStaticProps o getServerSideProps en una página:

import { fetchShopifyData } from '../lib/shopify';

const PRODUCTS_QUERY = `
{
  products(first: 5) {
    edges {
      node {
        id
        title
        handle
        images(first: 1) {
          edges {
            node {
              src
              altText
            }
          }
        }
        variants(first: 1) {
          edges {
            node {
              priceV2 {
                amount
              }
            }
          }
        }
      }
    }
  }
}
`;

export async function getStaticProps() {
  const data = await fetchShopifyData(PRODUCTS_QUERY);
  return { props: { products: data.products.edges } };
}

export default function Home({ products }) {
  return (
    <div>
      <h1>Productos de Shopify</h1>
      <ul>
        {products.map(({ node }) => (
          <li key={node.id}>
            <h2>{node.title}</h2>
            <p>${node.variants.edges[0].node.priceV2.amount}</p>
          </li>
        ))}
      </ul>
    </div>
  );
}

---

5. Integración del Checkout

Para implementar el proceso de pago, utiliza la mutación checkoutCreate de Shopify y redirige al usuario a la URL del checkout.

const CREATE_CHECKOUT = `
mutation checkoutCreate($lineItems: [CheckoutLineItemInput!]!) {
  checkoutCreate(input: { lineItems: $lineItems }) {
    checkout {
      webUrl
    }
  }
}
`;

---

6. Despliegue

• Utiliza Vercel o Netlify para desplegar tu aplicación Shopify en Next.js.
• Asegúrate de configurar todas las variables de entorno en la plataforma de alojamiento.

---

Contáctanos si necesitas una integración personalizada de Shopify + Next.js con funcionalidades avanzadas como funciones serverless, tiendas personalizadas y rendimiento optimizado

---