Geliştir · Shopify

Bir Shopify try-on uygulaması geliştirin

Tek cümlede

Bir Shopify try-on uygulaması, ürün görselini Admin API’den okur, Photta’ya POST eder, işi bir arka plan worker’ında poll eder, ardından productCreateMedia aracılığıyla tamamlanan URL’yi Shopify’a iletir.

API anahtarı alınTry-on endpoint’ini inceleyin
  • Credits: 2K'da 5 credits · 4K'da 6 credits
  • Tipik süre: 1.5–4 min
  • İşleme: asenkron, polling

Bu sayfadaki her veri şuradan alınmıştır: Photta API dokümantasyonu · kontrol edildi

Admin API üzerinden ürün fotoğrafını okuyun, Photta ile try-on render işlemini yapın ve sonucu ürün medyası olarak geri yükleyin. Dört çağrı, kendi tarafınızda görsel işleme yok.

RESPONSE=$(curl -s -X POST https://api.photta.app/api/v1/tryon/apparel \
  -H "Authorization: Bearer $PHOTTA_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
  "product_type": "top",
  "product_images": [
    "https://cdn.yourstore.com/products/shirt-front.jpg"
  ],
  "product_back_image": "https://cdn.yourstore.com/products/shirt-back.jpg",
  "product_category": "t_shirt",
  "mannequin_id": "mnk_f3a9b1",
  "pose_id": "pose_c2d4e5",
  "background": "https://cdn.yourstore.com/backgrounds/studio-loft.jpg",
  "lock_background": true,
  "resolution": "2K",
  "aspect_ratio": "3:4",
  "body_size": "M",
  "expression": "neutral",
  "user_instruction": "Keep the collar pattern crisp and centered."
}')
ID=$(echo "$RESPONSE" | jq -r '.data.id')

Nasıl çalışır

Ürün sayfasından try-on görseline

Uygulama kapsamlarını belirleyin, fotoğrafı okuyun, gönderin, istek akışı dışında poll edin, medyayı ekleyin.

  1. Adım 1

    Uygulama kapsamlarını belirleyin

    Bir try-on uygulamasının ürünleri okuması ve medya yazması gerekir. Yalnızca uygulamanızın gerçekten kullandığı ürün kapsamlarını talep edin, fazlasını değil — satıcılar onay ekranını okur.

  2. Adım 2

    Bir Photta API anahtarı alın

    Ortam başına bir anahtar, uygulamanızın sunucu tarafı yapılandırmasında saklanır. Asla storefront tarafına veya satıcının tarayıcısına iletilmez.

  3. Adım 3

    Ürün görselini okuyun

    Ürünün ilk görselini sorgulayın. Bu URL herkese açıktır ve Photta endpoint’inin beklediği tam olarak budur — yeniden yükleme yok, yönetilecek imzalı URL yok.

  4. Adım 4

    Try-on isteğini gönderin

    Görseli bir manken ve bir poz ile birlikte POST edin. Yanıt anında döner ve oluşturma kimliğini taşır; henüz hiçbir şey render edilmemiştir.

  5. Adım 5

    Arka plan işinde poll edin

    Shopify, webhook işleyicisinin saniyeler içinde yanıt vermesini bekler; görsel oluşturma işlemi ise bundan daha uzun sürer. Yanıtı onaylayın, kuyruğa alın ve worker üzerinden her 3 saniyede bir poll edin.

  6. Adım 6

    Medyayı ekleyin

    Tamamlanan URL’yi Shopify’a iletin, dosyayı kendisi indirir. Galerinin bağımsız olarak kalması için görseli kendi tarafınızda da saklayın.

Baştan sona dört çağrı

Photta istek ve poll adımları API dokümantasyonundan alınmıştır; Shopify çağrıları doğrudan Admin API’ye aittir.

// Shopify Admin GraphQL — the product's first image is your source photo
const query = `query($id: ID!) {
  product(id: $id) { title images(first: 1) { nodes { url } } }
}`;

const res = await admin.graphql(query, { variables: { id: productGid } });
const { data } = await res.json();
const productImage = data.product.images.nodes[0].url;
const res = await fetch("https://api.photta.app/api/v1/tryon/apparel", {
  method: "POST",
  headers: { Authorization: `Bearer ${process.env.PHOTTA_API_KEY}`, "Content-Type": "application/json" },
  body: JSON.stringify({
    "product_type": "top",
    "product_images": [
      "https://cdn.yourstore.com/products/shirt-front.jpg"
    ],
    "product_back_image": "https://cdn.yourstore.com/products/shirt-back.jpg",
    "product_category": "t_shirt",
    "mannequin_id": "mnk_f3a9b1",
    "pose_id": "pose_c2d4e5",
    "background": "https://cdn.yourstore.com/backgrounds/studio-loft.jpg",
    "lock_background": true,
    "resolution": "2K",
    "aspect_ratio": "3:4",
    "body_size": "M",
    "expression": "neutral",
    "user_instruction": "Keep the collar pattern crisp and centered."
  }),
});
const { data } = await res.json(); // data.id, data.status
async function waitFor(id) {
  for (let attempt = 0; attempt < 120; attempt++) {
    const res = await fetch(`https://api.photta.app/api/v1/tryon/apparel/${id}`, { headers: { Authorization: `Bearer ${process.env.PHOTTA_API_KEY}` } });
    const { data } = await res.json();
    if (data.status === "completed") return data.output_url;
    if (data.status === "failed") throw new Error(data.error_message ?? "generation failed");
    await new Promise((r) => setTimeout(r, 3000));
  }
  throw new Error("timed out after 6 minutes");
}
// Shopify downloads the URL itself, so hand it the Photta output_url
const mutation = `mutation($id: ID!, $media: [CreateMediaInput!]!) {
  productCreateMedia(productId: $id, media: $media) {
    mediaUserErrors { field message }
  }
}`;

await admin.graphql(mutation, {
  variables: {
    id: productGid,
    media: [{ originalSource: outputUrl, mediaContentType: "IMAGE", alt: "Virtual try-on" }],
  },
});

Geliştiricilerin sıkça sorduğu sorular

Shopify geliştiricilerinin sorduğu sorular

Photta anahtarı bir Shopify uygulamasında nerede tutulur?

Uygulama sunucunuzun ortamında tutulur; asla temada, bir uygulama bloğunda veya app proxy yanıtında yer almaz. Storefront tarafının okuyabildiği her şeyi müşteriler de okuyabilir.

Bu işlem hangi Shopify kapsamlarına ihtiyaç duyar?

Ürün görselini okuma ve ürün medyası yazma. Photta’nın hiçbir Shopify erişimine ihtiyacı yoktur — her iki tarafla da konuşan tek unsur sizin uygulamanızdır.

Webhook yanıtını nasıl hızlı tutabilirim?

Hemen onay verin, işi kuyruğa alın ve worker üzerinden poll edin. Render işlemi, bir webhook işleyicisinin beklemesi gerekenden daha uzun sürer; bu nedenle bunu bekleyen hiçbir şey işleyicinin içinde yer almamalıdır.

Satıcıları görsel başına faturalandırabilir miyim?

Bu sizin fiyatlandırma tercihinizdir. Photta hesabınızı çağrı başına credits ile ücretlendirir; böylece görsel başına maliyet render işleminden önce bellidir. Üzerine ne kadar ekleyeceğiniz size kalmıştır.

Ürünün fotoğrafı yoksa ne olur?

Yer tutucu göndermek yerine işlemi atlayın. Endpoint gerçek bir kıyafet fotoğrafına ihtiyaç duyar ve bir yer tutucu, kimsenin yayınlamayacağı bir görsel için credits harcar.

İlgili sayfalar

İlgili kaynaklar

Bu sayfadaki her veri şuradan alınmıştır: Photta API dokümantasyonu · kontrol edildi

Altyapıyı değil, uygulamayı yayınlayın

Bu sayfadaki Photta çağrıları doğrudan API dokümantasyonundan alınmıştır. Bir anahtar alın ve ilk render’ı dakikalar içinde gerçekleştirin.

API anahtarı alınHızlı başlangıç kılavuzunu inceleyin