<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Scalev Storefront</title>
<style>
body {
font-family: Arial, sans-serif;
max-width: 1200px;
margin: auto;
padding: 20px;
background: #f5f5f5;
}
h1 {
text-align: center;
}
.products {
display: grid;
grid-template-columns: repeat(auto-fill,minmax(250px,1fr));
gap: 20px;
}
.card {
background: white;
border-radius: 10px;
padding: 15px;
box-shadow: 0 2px 8px rgba(0,0,0,.1);
}
.card img {
width: 100%;
border-radius: 8px;
}
button {
width: 100%;
padding: 10px;
border: none;
background: #0077ff;
color: white;
border-radius: 6px;
cursor: pointer;
}
button:hover {
background: #005ed1;
}
.cart {
background: white;
margin-top: 30px;
padding: 20px;
border-radius: 10px;
}
</style>
</head>
<body>
<h1>Scalev Storefront</h1>
<div class="products" id="products"></div>
<div class="cart">
<h2>Keranjang</h2>
<div id="cartContent">Belum ada item</div>
</div>
<script>
const STORE_ID = "store_xxxxxxxxx";
const STOREFRONT_API_KEY = "sfpk_xxxxxxxxx";
const API_BASE = `https://api.scalev.com/v3/stores/${STORE_ID}`;
let guestToken = localStorage.getItem("scalev_guest_token");
async function apiFetch(endpoint, options = {}) {
const headers = {
"Accept": "application/json",
"Content-Type": "application/json",
"X-Scalev-Storefront-Api-Key": STOREFRONT_API_KEY,
...(guestToken && {
"X-Scalev-Guest-Token": guestToken
}),
...(options.headers || {})
};
const response = await fetch(API_BASE + endpoint, {
credentials: "omit",
...options,
headers
});
const newGuestToken =
response.headers.get("X-Scalev-Guest-Token");
if (newGuestToken) {
guestToken = newGuestToken;
localStorage.setItem(
"scalev_guest_token",
newGuestToken
);
}
return response.json();
}
async function loadProducts() {
try {
const result = await apiFetch("/public/items");
const products = result.data || [];
document.getElementById("products").innerHTML =
products.map(product => `
<div class="card">
<img src="${product.image_url || ''}" alt="">
<h3>${product.name}</h3>
<p>
Rp ${Number(product.price || 0)
.toLocaleString('id-ID')}
</p>
<button onclick="addToCart('${product.unique_id}')">
Tambah ke Keranjang
</button>
</div>
`).join("");
} catch (err) {
console.error(err);
}
}
async function addToCart(productId) {
try {
await apiFetch("/public/cart/items", {
method: "POST",
body: JSON.stringify({
items: [
{
item_unique_id: productId,
quantity: 1
}
]
})
});
alert("Produk ditambahkan");
loadCart();
} catch (err) {
console.error(err);
}
}
async function loadCart() {
try {
const cart = await apiFetch("/public/cart");
const items = cart.items || [];
if (!items.length) {
document.getElementById("cartContent").innerHTML =
"Keranjang kosong";
return;
}
document.getElementById("cartContent").innerHTML =
items.map(item => `
<div style="margin-bottom:10px">
${item.name}
(${item.quantity}x)
</div>
`).join("");
} catch (err) {
console.error(err);
}
}
loadProducts();
loadCart();
</script>
</body>
</html>