Bouwen · WooCommerce

Bouw een WooCommerce try-on-plugin

In één zin

Een WooCommerce-plugin roept de Photta API aan via standaard HTTP vanuit een WP-Cron-event, pollt de taak bij de volgende tick en importeert de voltooide afbeelding in de mediabibliotheek.

API-sleutel ophalenLees het try-on endpoint
  • Credits: 5 credits bij 2K · 6 credits bij 4K
  • Typische duur: 1.5–4 min
  • Verwerking: async, polling

Elk getal op deze pagina is afkomstig uit de Photta-API-documentatie · gecontroleerd

Er is geen PHP SDK nodig. WP-Cron dient de taak in, de volgende tick pollt deze, en WP-CLI importeert de voltooide afbeelding in de mediabibliotheek.

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

Hoe het werkt

Een cron-tick, een poll en een media-import

Plan de plugin, plan het werk in, dien in, poll bij de volgende tick, importeer.

  1. Stap 1

    Plan de plugin

    Eén wachtrijtabel, één cron-hook, één instellingenscherm voor de sleutel. Generatie vindt nooit plaats tijdens een paginaverzoek, dus niets wat een shopper doet kan hierop blijven hangen.

  2. Stap 2

    Haal een Photta API key op

    Lees deze uit de omgeving in wp-config.php in plaats van opslag in de options-tabel, zodat een database-export je inloggegevens niet bevat.

  3. Stap 3

    Plan het cron-event in

    Registreer een terugkerende hook en verwerk per run een handvol producten uit de wachtrij. Een site met echt verkeer krijgt frequente ticks; een rustige site heeft een echte systeem-cron nodig.

  4. Stap 4

    Dien het product in

    Verstuur de productafbeelding met wp_remote_post — dezelfde URL, headers en JSON-body als het cURL-voorbeeld. Sla het geretourneerde id op in de wachtrijrij.

  5. Stap 5

    Poll bij de volgende tick

    Lees de status uit voor elke rij die nog op processing staat. Omdat ticks minuten uit elkaar liggen, is één poll per tick meestal voldoende; niets slaapt binnen een verzoek.

  6. Stap 6

    Importeer de afbeelding

    Zodra een taak voltooid is, importeer je de URL in de mediabibliotheek en koppel je deze aan het product. WP-CLI voert de download uit, zodat de plugin het bestand nooit buffert.

De vier bewegende delen van de plugin

De Photta-aanroepen worden weergegeven vanuit de API-documentatie; wp_remote_post accepteert dezelfde URL, headers en body.

# wp-config.php holds the key; the plugin reads it with getenv()
# define( 'PHOTTA_API_KEY', getenv( 'PHOTTA_API_KEY' ) );
export PHOTTA_API_KEY="photta_live_xxx"
export PHOTTA_BASE_URL="https://api.photta.app/api/v1"
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')
# $ID is data.id from the POST response. Poll every 3 seconds until status is "completed" or "failed".
for i in $(seq 1 120); do
  RESULT=$(curl -s "https://api.photta.app/api/v1/tryon/apparel/$ID" -H "Authorization: Bearer $PHOTTA_API_KEY")
  STATUS=$(echo "$RESULT" | jq -r '.data.status')
  [ "$STATUS" = "completed" ] && break
  [ "$STATUS" = "failed" ] && echo "generation failed" && exit 1
  sleep 3
done
echo "$RESULT" | jq -r '.data.output_url'
# WP-CLI does the download, so the plugin never buffers the file itself
wp media import "$OUTPUT_URL" \
  --post_id="$PRODUCT_ID" \
  --title="Virtual try-on" \
  --featured_image

Veelgestelde vragen van developers

Vragen die WordPress-ontwikkelaars stellen

Is er een officiële PHP SDK?

Nee. De API is standaard REST over HTTPS met een Bearer-header, dus wp_remote_post dekt alles af zonder afhankelijkheden die up-to-date gehouden moeten worden.

Hoe voer ik de aanroep uit vanuit PHP?

wp_remote_post met de Authorization- en Content-Type-headers en een JSON-body. Het cURL-voorbeeld op deze pagina is exact hetzelfde verzoek, veld voor veld.

Waarom niet genereren tijdens het laden van de pagina?

Een generatie duurt langer dan een pagina zou moeten duren. Renderen tijdens een verzoek betekent dat een shopper wacht, een time-out het proces afbreekt en de credits sowieso verbruikt zijn.

Hoeveel producten moet één run verwerken?

Neem per tick een kleine selectie en laat de wachtrij over meerdere ticks leeglopen. Dat houdt elke run kort en zorgt dat je ruim binnen de gepubliceerde rate limit blijft.

Wat gebeurt er met mislukte taken?

Markeer de rij als failed en bewaar het fouttype uit de respons. Credits voor een mislukte generatie worden automatisch terugbetaald, dus bij een retry betaal je niet dubbel.

Gerelateerde pagina's

Gerelateerde artikelen

Elk getal op deze pagina is afkomstig uit de Photta-API-documentatie · gecontroleerd

Een plugin zonder dependency tree

Bearer-header, JSON-body, polling. Alles wat WordPress al standaard doet.

API-sleutel ophalenLees de snelstartgids