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_listingsunauthenticated_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@latestMasuk ke dalam folder proyek Anda:
Bash
cd nama-proyek-astro-andaBuat file
.envdi 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 builduntuk 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_TOKENdanSHOPIFY_SHOP_DOMAINke dalam pengaturan Environment Variables di dashboard hosting tersebut. Baca Mengenal Astro JS
Promo Aplikasi Tanpa Web Regarcomm
Level Up Bisnismu dengan Aplikasi Web dari Regarcomm Regarcomm Development Solusi Aplikasi Web Digital Saatnya bisnis naik level Level Up Bisnismu dengan Aplikasi Web Keren dari Regarcomm! Bosan sama sistem manual yang ribet? 🤯 Mau bisnis makin cuan dan efisien? Regarcomm Development hadir buat nyulap bisnismu jadi GO DIGITAL! ✨ ✨ Lihat Fitur 💬 Konsultasi
Promo Aplikasi Regarcomm Development
Level Up Bisnismu dengan Aplikasi Web dari Regarcomm 🔥 Level Up Bisnismu Pakai Aplikasi Web Keren dari Regarcomm! 🔥 Bosan sama sistem manual yang ribet? 🤯 Mau bisnis makin cuan dan efisien? Tenang, Regarcomm Development hadir buat nyulap bisnismu jadi GO DIGITAL! ✨ Kehebatan Produk Kami 🏃♂️💨 Absensi Anti Ribet: Lupakan absen manual yang bikin
Promo Bank Sampah
Aplikasi Bank Sampah Modern | Regarcomm Development Regarcomm Development Lihat Harga 🌱 Google Apps Script Edition Aplikasi Bank Sampah Modern Solusi manajemen praktis untuk Bank Sampah. Tanpa biaya server bulanan, otomatis cetak struk dan kirim bukti transaksi melalui WhatsApp. 📲 Konsultasi via WhatsApp Lihat Fitur Dashboard Bank Sampah Sistem manajemen transaksi NasabahAktif StatusOnline ♻️ Setoran
Aplikasi Web Tanpa Hosting & Domain
Regarcomm Development beri solusi praktis: membangun aplikasi web tanpa perlu membeli hosting atau domain dengan memanfaatkan Google Sheets + Google Apps Script. Pendekatan ini cocok untuk prototipe cepat, aplikasi internal, dashboard, atau form interaktif yang butuh backend sederhana dan penyimpanan data. Kenapa memakai Google Sheets + Apps Script? Tanpa biaya hosting/domain: data tersimpan di Google
Landing Page Regarcomm Development
Regarcomm Development – Jasa Pembuatan Website Profesional 💬 REGARCOMM DEVELOPMENT 💬 Hubungi WA Jasa Pembuatan Website Profesional Ingin punya website keren untuk kebutuhan pribadi atau bisnis? Kami siap membantu Anda membangun website yang modern, cepat, aman, dan sesuai kebutuhan! 🚀 💬 Konsultasi Gratis 🌐 Kunjungi Website Kami Layanan Website Kami Profil Diri Halaman identitas pribadi
