ビルド · WooCommerce

WooCommerceのtry-onプラグインを構築する

要約

WooCommerceプラグインは、WP-CronイベントからプレーンなHTTP経由でPhotta APIを呼び出し、次のティックでジョブをポーリングして、完成した画像をメディアライブラリにインポートします。

APIキーを取得try-on endpointを読む
  • Credits: 2Kで5 credits · 4Kで6 credits
  • 所要時間の目安: 1.5–4 min
  • 処理方式: 非同期、ポーリング

このページに記載されている数値はすべて以下に基づきます: Photta APIドキュメント · 確認済み

PHP SDKは不要です。WP-Cronがジョブを送信し、次のティックでポーリングを行い、WP-CLIが生成された画像をメディアライブラリにインポートします。

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

仕組み

cronティック、ポーリング、メディアインポート

プラグインの設計、タスクのスケジュール、送信、次のティックでのポーリング、インポート。

  1. ステップ 1

    プラグインを設計する

    1つのキューテーブル、1つのcronフック、キー用の1つの設定画面。生成はページリクエスト中には一切行われないため、購入者の操作がハングすることはありません。

  2. ステップ 2

    Photta APIキーを取得する

    optionsテーブルに保存するのではなく、wp-config.php内の環境変数から読み取ることで、データベースのエクスポートに認証情報が含まれないようにします。

  3. ステップ 3

    cronイベントをスケジュールする

    定期実行フックを登録し、1回の実行でキューにある商品を数件ずつ処理します。実際のアクティブなトラフィックがあるサイトでは頻繁にティックが発生しますが、アクセスの少ないサイトでは実際のシステムcronが必要です。

  4. ステップ 4

    商品を送信する

    wp_remote_postで商品画像を送信します — cURLサンプルと同じURL、ヘッダー、JSONボディを使用します。返されたidをキューの行に保存します。

  5. ステップ 5

    次のティックでポーリングする

    まだprocessingのすべての行のステータスを読み取ります。ティックは数分間隔であるため、通常は1ティックあたり1回のポーリングで十分です。リクエスト内でスリープ処理が発生することはありません。

  6. ステップ 6

    画像をインポートする

    ジョブが完了したら、URLをメディアライブラリにインポートして商品に紐付けます。ダウンロードはWP-CLIが実行するため、プラグインがファイルをバッファリングすることはありません。

プラグインを構成する4つの要素

Phottaの呼び出しはAPIドキュメントに従って実装されます。wp_remote_postは同じURL、ヘッダー、ボディを受け取ります。

# 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

開発者からのよくある質問

WordPress開発者からよくある質問

公式のPHP SDKはありますか？

いいえ。APIはBearerヘッダーを使用するプレーンなHTTPS経由のRESTであるため、wp_remote_postですべてカバーでき、依存関係の更新維持も不要です。

PHPから呼び出すにはどうすればよいですか？

Authorizationヘッダー、Content-Typeヘッダー、およびJSONボディを指定してwp_remote_postを使用します。このページのcURLサンプルは、フィールド単位でまったく同じリクエストです。

なぜページロード時に生成しないのですか？

生成には通常のページ処理以上の時間がかかります。リクエスト中にレンダリングを行うと、購入者を待たせることになり、タイムアウトで処理が中断されても、どちらにしてもcreditsは消費されてしまいます。

1回の実行でいくつの商品を処理すべきですか？

ティックごとに少数を処理し、複数のティックにわたってキューを消費させてください。これにより、各実行を短く保ち、公開されているrate limit内に確実に収めることができます。

失敗したジョブはどうなりますか？

行をfailedとマークし、レスポンスのエラータイプを保持します。失敗した生成のcreditsは自動的に返金されるため、リトライ時に二重に支払うことはありません。

関連ページ

関連資料

このページに記載されている数値はすべて以下に基づきます: Photta APIドキュメント · 確認済み

依存関係のないプラグイン

Bearerヘッダー、JSONボディ、ポーリング。WordPressがすでに標準で備えているものだけで完結します。

APIキーを取得クイックスタートを読む