UGCのインストール

ここでは、ショートフォームにおける、ユーザー生成コンテンツ(UGC)のインストール方法について説明します。

UGC 編集ページのインストール

showShortformUgcEdit(config) 関数を呼び出すことで、ショートフォームの UGC を生成および編集できるページを読み込むことができます。 config オブジェクトを使用して必要な設定を渡すことができ、特定のイベント (保存、削除、閉じる) が完了すると、その時点で定義されたユーザー定義関数を実行できます。

次のように window.cloud.shoplive.showShortformUgcEdit(config)呼び出すことができます。

const config = {
  userId: 'USER_ID',
  userName: 'USER_NAME',
  profileImage: 'https://example.com/profile.jpg',
  shortsId: '123456789',
  skus: ['sku1', 'sku2'],
  tags: ['tag1', 'tag2'],
  onCustomSaveCompleted: (payload) => {
    console.log('Save completed:', payload);
  },
  onCustomDeleteCompleted: (payload) => {
    console.log('Delete completed:', payload);
  },
  onCustomCloseEdit: (payload) => {
    console.log('Edit closed:', payload);
  },
};

window.cloud.shoplive.showShortformUgcEdit(config);

UGC 関数呼び出しに必要な設定

export interface TShortsUGCConfig {
  shortsId?: string; // 作成時に生成されたショートフォームの固有ID
  userId: string; // クエリパラメータのユーザーID
  userName?: string; // クエリパラメータのユーザー名
  profileImage?: string; // クエリパラメータのプロフィール画像
  onCustomSaveCompleted?: (payload: TShortsUGCConfig) => void; // 保存完了時に実行できるカスタム関数
  onCustomDeleteCompleted?: (payload: TShortsUGCConfig) => void; // 削除完了時に実行できるカスタム関数
  tags?: string[]; // タグのリスト
  skus?: string[]; // 商品の固有IDリスト
  brandIdentifier?: string; // ブランド識別子
  onCustomCloseEdit?: (payload: TShortsUGCConfig) => void; // 詳細ページが閉じられる際に実行できるカスタム関数
}

クエスチョンマーク(?)でマークされたプロパティはオプションです。

• Optional プロパティの値を設定しない場合、その値は既定値として扱われ、関連付けられている特定の関数では機能しない場合があります。（一般的な機能の動作には影響しません）

• その他のプロパティは、値の入力は必須となります。。値がない場合、関数が機能しない可能性があります。(現在、userId のみが必須です。）

UGCリストページのインストール

setShortformUgcList(containerId, config) 関数を呼び出すことで、ショートフォームの UGC リストページを特定のコンテナに動的に読み込むことができます。この関数は、UGC のリストを非同期的に取得し、指定したコンテナにレンダリングします。以下のように containerId と config を指定して、ショートフォームリストを構成することができます。

const config = {
  userId: 'USER_ID',
};

window.cloud.shoplive.setShortformUgcList('ugc-list-container', config);

次の方法で、特定のページにショートフォームの UGC リストを読み込むことができます。

//shortform_ugc.html

{...}
<div id="my-page-view" />
<script>
window.cloud.shoplive.setShortformUgcList('ugc-list-container', {
  userId: 'USER_ID',
  userName: 'USER_NAME',
  profileImage: 'https://example.com/profile.jpg',
  shortsId: '123456789',
  skus: ['sku1', 'sku2'],
  tags: ['tag1', 'tag2'],
  onCustomSaveCompleted: (payload) => {
    console.log('保存完了:', payload);
  },
  onCustomDeleteCompleted: (payload) => {
    console.log('削除完了:', payload);
  },
  onCustomCloseEdit: (payload) => {
    console.log('編集終了:', payload);
  },
});
</script>

上記のコードは、次のように機能します。

1. userId の確認 :  config オブジェクトに userId がない場合は、警告メッセージが表示され、関数を終了します。

2. UGC の初期化を確認する : ショートフォームの UGC の初期化が完了していない場合は、タスクが完了するのを待ちます。

3. HTML 要素のチェック: 指定された containerId に対応する HTML コンポーネントがない場合は、警告メッセージを出力して終了します。

4. ショートフォームの UGC リストを読み込む : ショートフォームの UGC リストコンポーネントを非同期的に読み込み、リストをそのコンテナにレンダリングします。