Toteutus · Shopify

Rakenna Shopify-sovellus try-on-sovitukseen

Yhdellä lauseella

Shopify try-on -sovellus lukee tuotekuvan Admin API:sta, tekee POST-kutsun Phottaan, pollaa työtä taustaprosessissa ja antaa sitten valmiin URL-osoitteen Shopifylle productCreateMedia-kutsulla.

Hanki API-avainLue try-on-endpointin dokumentaatio
  • Credits: 5 credits resoluutiolla 2K · 6 credits resoluutiolla 4K
  • Tyypillinen kesto: 1.5–4 min
  • Käsittely: asynkroninen, polling

Jokainen luku tällä sivulla on peräisin Photta-rajapinnan dokumentaatiosta · tarkistettu

Lue tuotekuva Admin API:sta, renderöi try-on Phottalla ja vie tulos takaisin tuotemediana. Neljä kutsua, ei omaa kuvankäsittelyä.

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')

Miten se toimii

Tuotesivulta try-on-kuvaksi

Määritä sovelluksen scopet, lue kuva, lähetä pyyntö, pollaa pyyntöpolun ulkopuolella, liitä media.

  1. Vaihe 1

    Määritä sovelluksen scopet

    Try-on-sovelluksen täytyy lukea tuotteita ja kirjoittaa mediaa. Pyydä vain ne tuote-scopet, joita sovelluksesi todella käyttää, älä mitään muuta — kauppiaat lukevat suostumusnäkymän.

  2. Vaihe 2

    Hanki Photta API -avain

    Yksi avain ympäristöä kohden, säilytettynä sovelluksesi palvelinpuolen konfiguraatiossa. Se ei koskaan kulje storefrontiin tai kauppiaan selaimeen.

  3. Vaihe 3

    Lue tuotekuva

    Hae tuotteelta sen ensimmäinen kuva. Kyseinen URL on julkinen, mikä on juuri sitä mitä Photta-endpoint odottaa — ei uudelleenlatausta, ei hallittavia allekirjoitettuja URL-osoitteita.

  4. Vaihe 4

    Lähetä try-on-pyyntö

    Lähetä kuva POST-pyynnöllä mannekiinin ja asennon kanssa. Vastaus on välitön ja sisältää generointi-id:n; mitään ei ole vielä renderöity.

  5. Vaihe 5

    Pollaa taustatyössä

    Shopify odottaa webhook-käsittelijän vastaavan sekunneissa, ja generointi kestää sitä kauemmin. Kuittaa pyyntö, lisää työnjonoon ja pollaa 3 sekunnin välein workerista.

  6. Vaihe 6

    Liitä media

    Anna valmis URL Shopifylle, ja se lataa tiedoston itse. Tallenna kuva myös omalle puolellesi, jotta galleria säilyy itsenäisesti.

Neljä kutsua alusta loppuun

Photta-pyyntö ja polling on renderöity suoraan API-dokumentaatiosta; Shopify-kutsut ovat Admin API:n omia.

// 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" }],
  },
});

Kehittäjien usein kysymää

Shopify-kehittäjien usein kysymät kysymykset

Missä Photta-avainta säilytetään Shopify-sovelluksessa?

Sovelluspalvelimesi ympäristössä, ei koskaan teemassa, app blockissa tai app proxy -vastauksessa. Kaiken, minkä storefront voi lukea, voi lukea myös asiakas.

Mitä Shopify-scopeja tämä vaatii?

Tuotekuvan lukemisen ja tuotemedian kirjoittamisen. Photta ei tarvitse lainkaan Shopify-pääsyä — sovelluksesi on ainoa osapuoli, joka keskustelee molempien suuntien kanssa.

Miten pidän webhookin nopeana?

Kuittaa heti, lisää työ jonoon ja pollaa workerista. Generointi kestää kauemmin kuin webhook-käsittelijän tulisi kestää, joten mikään sitä odottava ei kuulu käsittelijään.

Voinko laskuttaa kauppiaita kuvakohtaisesti?

Tämä on oma hinnoittelupäätöksesi. Photta veloittaa tiliäsi kutsuittain credits-yksiköissä, joten kuvakohtainen kustannus on tiedossa ennen renderöintiä; se, mitä laskutat päälle, on sinusta kiinni.

Entä jos tuotteella ei ole kuvaa?

Ohita se sen sijaan, että lähettäisit paikkamerkkikuvan. Endpoint vaatii oikean valokuvan vaatteesta, ja paikkamerkki kuluttaa credits-yksiköitä kuvaan, jota kukaan ei julkaise.

Liittyvät sivut

Aiheeseen liittyvää luettavaa

Jokainen luku tällä sivulla on peräisin Photta-rajapinnan dokumentaatiosta · tarkistettu

Julkaise sovellus, älä putkistoa

Tämän sivun Photta-kutsut tulevat suoraan API-dokumentaatiosta. Hanki avain, ja ensimmäinen renderöinti on valmis muutamassa minuutissa.

Hanki API-avainLue pikaopas