Ürün .js, cart.js ve diğer JSON adresleri

Shopify ürününü, sepeti, önerileri ya da arama önerilerini vitrinden JSON olarak okuyun: /products/<handle>.js, /cart.js ve diğer Ajax API adresleri.

Ürün
GET /products/<handle>.js
Sepet
GET /cart.js
Fiyatlar
Para biriminin alt birimi (12900 = 129,00)
Yetki
Gerekmez, yalnızca vitrin
Son kontrol

Kısaca

Ürün adresine .js eklediğinizde, örneğin /products/example-product.js, Shopify ürünü JSON olarak döndürür: ID’leriyle varyantlar, fiyatlar, stok durumu, seçenekler ve görseller. /cart.js mevcut sepeti, /recommendations/products.json ilgili ürünleri, /search/suggest.json da tahmini arama sonuçlarını verir. Bunlar belgelenmiş Ajax API adresleridir; token gerektirmez, her planda çalışır ama yalnızca online mağazanın zaten gösterdiği veriyi verir.

Nasıl kullanılır

  1. Ürün JSON’unu görmek için tarayıcıda https://your-store.com/products/<handle>.js adresini açın.
  2. Tema JavaScript’inde adresi window.Shopify.routes.root üzerinden kurun; pazarın dil yolu korunur.
  3. Sepet için /cart.js kullanın (currency alanı, müşterinin gördüğü para birimini söyler).
  4. Öneriler ve arama önerileri için /recommendations/products.json?product_id=<id>&intent=related ya da /search/suggest.json?q=<terim> kullanın.

Kod

fetch-product.js
// Reads a product as JSON from the storefront. Prices are in the currency's
// subunit (12900 = 129.00) and in the customer's presentment currency.
async function getProduct(handle) {
  const response = await fetch(`${window.Shopify.routes.root}products/${handle}.js`);
  if (!response.ok) throw new Error(`Product ${handle}: HTTP ${response.status}`);
  return response.json();
}

getProduct('example-product')
  .then((product) => {
    for (const variant of product.variants) {
      console.log(variant.id, variant.title, variant.price, variant.available);
    }
  })
  .catch((error) => console.error(error.message));
endpoints.txt
# Documented storefront JSON endpoints (Ajax API), prefix with the locale path
GET  /products/<handle>.js                         one product: variants, prices, images, options
GET  /cart.js                                      the current cart, including currency
POST /cart/add.js, /cart/change.js, /cart/update.js, /cart/clear.js
GET  /recommendations/products.json?product_id=<id>&limit=4&intent=related
GET  /search/suggest.json?q=<query>&resources[type]=product

# Examples
https://your-store.com/products/example-product.js
https://your-store.com/fr/cart.js
https://your-store.com/recommendations/products.json?product_id=1234567890123&limit=4&intent=complementary

Lintel tarafından yazıldı. MIT lisansı: kendi mağazanızda da müşteri işlerinizde de ücretsiz kullanabilirsiniz.

Sınırlar ve özel durumlar

  • Ürün JSON’u en fazla 250 varyant listeler.
  • Fiyatlar müşterinin gördüğü para biriminde ve o para biriminin alt biriminde gelir.
  • /products/<handle>.json ve /products.json birçok mağazada yanıt verir ama Shopify’ın Ajax API referansında yer almaz; yapıları ve limitleri garanti değildir. .js adreslerini, uygulamalar için de Storefront API’yi kullanın.
  • Tahmini arama, istek limitini aştığınızda 429 döndürür; müşteri yazarken çağrıları geciktirin (debounce).

Sık sorulan sorular

Shopify ürünü JSON olarak nasıl alınır?
Ürün adresine .js ekleyin; örneğin your-store.com/products/example-product.js.
Shopify’da .js ile .json arasındaki fark nedir?
Shopify’ın Ajax API’si .js ürün adresini ve cart.js’i belgeliyor. .json karşılıkları birçok mağazada var ama belgelenmemiş; .js üzerine kurun.
Fiyatlar neden 129,00 yerine 12900 görünüyor?
Ajax API tutarları para biriminin alt biriminde döndürür; çoğu para biriminde göstermeden önce 100’e bölün.
/cart.js için API anahtarı gerekir mi?
Hayır. Ziyaretçinin kendi sepetini vitrin oturumundan okur; token gerekmez.
  • Gösterilen tarihte bir Shopify mağazasında denendi. Shopify yönetim panelini sık değiştirir; bir adım farklı görünüyorsa fikir genellikle hâlâ geçerlidir.
  • Örneklerde yer tutucu ID’ler ve your-store.myshopify.com kullanılır. Kendi değerlerinizle değiştirin.
  • Kod parçaları MIT lisanslıdır.

Mağazanız için kurulmasını, test edilmesini ve bakımını isterseniz: Shopify geliştirme.

Geliştirmek istediğiniz bir şey mi var? Gelin, birlikte konuşalım.

Aynı anda sınırlı sayıda proje alıyoruz.

Gencer KarakayaShopify mühendisi

Proje özetinizi bir mühendis okur; size e-postayla yanıt veririz.