Proses Setup Kolaborasi Astro Dengan shopify

Proses setup kolaborasi antara Astro JS dan Shopify (menggunakan Shopify Storefront API) melibatkan pemisahan fungsi: Shopify akan fokus mengurus data produk, inventaris, dan transaksi, sedangkan Astro akan bertindak sebagai mesin pembuat tampilan halaman web yang super cepat.

Berikut adalah panduan langkah demi langkah untuk melakukan setup dari awal hingga siap pakai:

Langkah 1: Setup di Sisi Shopify (Mendapatkan Akses API)

Sebelum masuk ke kode Astro, Anda perlu mengaktifkan akses API di toko Shopify Anda agar Astro bisa mengambil data produk.

Masuk ke Shopify Admin Anda.
Buka menu Settings (Pengaturan) > Apps and sales channels (Aplikasi dan saluran penjualan).
Klik Develop apps (Kembangkan aplikasi) di bagian atas, lalu klik Create an app.
Beri nama aplikasi Anda (misal: Astro Frontend) dan pilih akun pengembang Anda.
Di tab Configuration, cari bagian Storefront API integration dan klik Configure.
Centang semua hak akses (scopes) yang dibutuhkan, seperti:
- read_products (Membaca data produk)
- read_product_listings
- unauthenticated_read_product_listings (Wajib untuk checkout/keranjang publik)
Klik Save, lalu pindah ke tab API credentials dan klik Install app.
Salin Storefront API access token dan Shopify Domain toko Anda (misal: toko-anda.myshopify.com).

Langkah 2: Setup Project Astro JS

Sekarang, buka terminal di komputer Anda untuk membuat proyek frontend baru.

Jalankan perintah pembuatan proyek Astro:
Bash
```
npm create astro@latest
```
Masuk ke dalam folder proyek Anda:
Bash
```
cd nama-proyek-astro-anda
```

Buat file .env di akar folder proyek untuk menyimpan token Shopify dengan aman:

Cuplikan kode 
SHOPIFY_STOREFRONT_API_TOKEN=isi_dengan_token_storefront_anda
SHOPIFY_SHOP_DOMAIN=toko-anda.myshopify.com

Langkah 3: Membuat Fungsi Fetcher GraphQL Shopify

Shopify Storefront API berbasis GraphQL. Kita akan membuat fungsi pembantu (helper function) di Astro untuk melakukan request ke Shopify.

Buat file baru di src/utils/shopify.js:

JavaScript 
// src/utils/shopify.js

export async function shopifyFetch({ query, variables = {} }) {
  const domain = import.meta.env.SHOPIFY_SHOP_DOMAIN;
  const token = import.meta.env.SHOPIFY_STOREFRONT_API_TOKEN;

  try {
    const response = await fetch(`https://${domain}/api/2024-01/graphql.json`, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'X-Shopify-Storefront-Access-Token': token,
      },
      body: JSON.stringify({ query, variables }),
    });

    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }

    return await response.json();
  } catch (error) {
    console.error("Gagal mengambil data dari Shopify:", error);
    throw error;
  }
}

Langkah 4: Menampilkan Produk di Halaman Utama (`index.astro`)

Sekarang mari kita uji koneksinya dengan menarik daftar produk dari Shopify dan menampilkannya menggunakan komponen Astro.

Buka file src/pages/index.astro:

Cuplikan kode 
---
// src/pages/index.astro
import { shopifyFetch } from '../utils/shopify';

// Tulis Query GraphQL untuk mengambil 10 produk pertama
const graphqlQuery = `
  {
    products(first: 10) {
      edges {
        node {
          id
          title
          handle
          description
          images(first: 1) {
            edges {
              node {
                url
                altText
              }
            }
          }
          priceRange {
            minVariantPrice {
              amount
              currencyCode
            }
          }
        }
      }
    }
  }
`;

const response = await shopifyFetch({ query: graphqlQuery });
const products = response.data.products.edges;
---

<html lang="id">
  <head>
    <meta charset="utf-8" />
    <title>Toko Headless Astro + Shopify</title>
  </head>
  <body>
    <h1>Katalog Produk Kami</h1>
    
    <div class="product-grid">
      {products.map(({ node: product }) => {
        const image = product.images.edges[0]?.node;
        const price = product.priceRange.minVariantPrice;
        
        return (
          <div class="product-card">
            {image && <img src={image.url} alt={image.altText || product.title} width="200" />}
            <h2>{product.title}</h2>
            <p>{price.amount} {price.currencyCode}</p>
            <a href={`/produk/${product.handle}`}>Detail Produk</a>
          </div>
        );
      })}
    </div>
  </body>
</html>

<style>
  .product-grid { display: flex; gap: 20px; flex-wrap: wrap; padding: 20px; }
  .product-card { border: 1px solid #ddd; padding: 15px; border-radius: 8px; width: 220px; }
  .product-card img { max-width: 100%; height: auto; }
</style>

Langkah 5: Membuat Halaman Detail Produk Dinamis

Agar setiap produk memiliki halamannya sendiri secara otomatis (misal: /produk/sepatu-keren), kita gunakan Dynamic Routing dari Astro.

Buat file baru di src/pages/produk/[handle].astro:

Cuplikan kode 
---
// src/pages/produk/[handle].astro
import { shopifyFetch } from '../../utils/shopify';

// 1. Beritahu Astro halaman apa saja yang perlu dibuat (Build Time)
export async function getStaticPaths() {
  const response = await shopifyFetch({
    query: `{ products(first: 250) { edges { node { handle } } } }`
  });
  
  return response.data.products.edges.map(({ node }) => ({
    params: { handle: node.handle },
  }));
}

const { handle } = Astro.params;

// 2. Ambil data lengkap produk berdasarkan handle yang sedang dibuka
const productQuery = `
  query getProduct($handle: String!) {
    product(handle: $handle) {
      title
      description
      images(first: 1) { edges { node { url } } }
      variants(first: 1) {
        edges {
          node { id }
        }
      }
    }
  }
`;

const productResponse = await shopifyFetch({
  query: productQuery,
  variables: { handle }
});

const product = productResponse.data.product;
const variantId = product.variants.edges[0]?.node.id; // Dibutuhkan untuk checkout nanti
---

<html lang="id">
<head><title>{product.title}</title></head>
<body>
  <a href="/">← Kembali ke Toko</a>
  <main>
    <h1>{product.title}</h1>
    <img src={product.images.edges[0]?.node.url} width="400" />
    <p>{product.description}</p>
    
    <button data-variant-id={variantId} id="buy-button">Beli Sekarang</button>
  </main>
</body>
</html>

Langkah 6: Integrasi Sistem Keranjang Belanja & Checkout

Halaman katalog di atas bersifat statis (Sangat cepat dan ramah SEO). Namun, untuk proses Beli Sekarang / Keranjang, kita perlu berinteraksi langsung dengan Shopify via browser pengguna (Client-side).

Cara paling instan tanpa perlu membuat sistem cart yang rumit dari nol adalah menggunakan Shopify Checkout URL. Kita bisa membuat baris kode JavaScript sederhana di dalam tag <script> pada halaman detail produk untuk langsung mengarahkan pengguna ke halaman pembayaran Shopify:

Tambahkan skrip ini di bagian bawah file src/pages/produk/[handle].astro Anda:

Cuplikan kode 
<script>
  import { shopifyFetch } from '../../utils/shopify';

  const buyButton = document.getElementById('buy-button');
  
  buyButton.addEventListener('click', async () => {
    const variantId = buyButton.getAttribute('data-variant-id');
    
    // Query mutasi GraphQL untuk membuat checkout instan dengan 1 barang
    const mutation = `
      mutation checkoutCreate($input: CheckoutInput!) {
        checkoutCreate(input: $input) {
          checkout {
            webUrl
          }
        }
      }
    `;
    
    const variables = {
      input: {
        lineItems: [{ variantId: variantId, quantity: 1 }]
      }
    };
    
    buyButton.innerText = "Memproses...";
    
    // Tembak langsung API Shopify dari browser pembeli
    const domain = "toko-anda.myshopify.com"; // Bisa di-hardcode di script client-side
    const token = "isi_token_storefront_anda"; // Untuk client-side pastikan token storefront aman (publik)
    
    const response = await fetch(`https://${domain}/api/2024-01/graphql.json`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json', 'X-Shopify-Storefront-Access-Token': token },
      body: JSON.stringify({ query: mutation, variables })
    });
    
    const result = await response.json();
    const checkoutUrl = result.data.checkoutCreate.checkout.webUrl;
    
    // Lempar pembeli ke halaman pembayaran resmi Shopify yang aman
    window.location.href = checkoutUrl;
  });
</script>

Langkah 7: Build & Deployment

Setelah semuanya berfungsi dengan baik di komputer lokal:

Jalankan npm run build untuk memverifikasi tidak ada eror GraphQL. Astro akan menghasilkan file HTML statis siap pakai.
Hubungkan repositori Git Anda ke platform seperti Vercel, Netlify, atau Cloudflare Pages. Jangan lupa untuk memasukkan SHOPIFY_STOREFRONT_API_TOKEN dan SHOPIFY_SHOP_DOMAIN ke dalam pengaturan Environment Variables di dashboard hosting tersebut. Baca Mengenal Astro JS