ユースケース

次のオプションを使用して Cloud Service インスタンスを作成します ​。

1. 環境 ドロップダウンで サンドボックス を選択します。
2. データをテスト ドロップダウンで「Adobe ストア」を選択します。

Adobe Experience Cloud アカウントにログインします ​

​ 次のオプションを使用して ​Cloud Service ストアフロントを設定します。

1. テンプレートの adobe-commerce/adobe-demo-store を選択します。
2. 接続方法として、使用可能なインスタンスを選択（メッシュ/SaaS） を選択します。

Commerce管理者で、Stores/Settings/Configuration/Payment Methods に移動します。

「一般設定」セクションで、Payment Services Sandbox ID と Payment Services Sandbox Key を入力します。 これらの ID は、​ サンドボックスのオンボーディング ​ に説明されている手順に従って取得できます

有効 ドロップダウンを はい に設定します。

「設定を保存」をクリックします。

前提条件で作成した ​ ストアフロント ​ に移動します。

製品を検索して選択します。 必要なカスタマイズを選択します。 次に、「買い物かごに追加」をクリックします。

{width="600" modal="regular"}

買い物かごアイコンを選択して、買い物かごを表示します。

{width="600" modal="regular"}

チェックアウト をクリックします。

{width="600" modal="regular"}

必要な連絡先の詳細と発送情報を入力します。 この注文には架空の情報を使用できます。

チェックアウトするには、小切手/マネーオーダー を選択します。 クレジットカードを使用する場合は、Paypal が提供するテストカード ​ のいずれかを使用します。 これらは、任意の将来の有効期限および任意の CVC で使用できます。

{width="600" modal="regular"} {width="600" modal="regular"}

Place Order をクリックします。

Commerce Admin: <your store URL>/admin を開きます。

Adobe IDを使用してログインします。

Sales/Orders に移動します。

{width="600" modal="regular"}

注文した商品を探し、詳細を確認します。

{width="600" modal="regular"}

前提条件で作成した ​ ストアフロント ​ を開きます。

Storefront Builder を開きます。 https://da.live/#/<GitHub User Name>/<Repository Name>/main/da/index.md に移動します。

インデックス ページを開きます。

カルーセルブロックの下に、「Adobe Store デモへようこそ」という行を編集して新しいタイトルを入力します。

送信アイコンをクリックし、「プレビュー」をクリックします。

プレビューページを確認して、「公開」をクリックします。

ストアフロントページを更新し、変更がライブになったことを確認します。

Storefront Builder で、インデックスページを選択し、「コピー」をクリックします。

メインフォルダーの下に 実験 フォルダーを作成します。作成するには、「新規 ボタンをクリックし、フォルダー を選択します。

experiments フォルダーに 1234 という名前のフォルダーを作成します。

インデックスページの 2 つのコピーを 1234 フォルダーに貼り付けます。

各ページを開き、名前を「homev1」および「homev2」に変更します。 これらは ​ 挑戦者 ​ です。

異なるコンテンツを含めるように各ページを変更します。 例えば、ヒーロー画像やテキストを変更します。 各ページの違いを識別できる必要があります。

チャレンジャーページをそれぞれ公開します。

コントロールページ（元のインデックスページ）を開きます。

タイトルが metadata の新しいブロックを追加します。

メタデータブロックの行に次の情報を追加します

• タイトル - Adobe Commerce

• 説明 – Web ストア

• 実験 – 1234

• 実験のバリアント

  • https://<your-site>.aem.live/experiments/1234/indexv1
  • https://<your-site>.aem.live/experiments/1234/indexv2

{width="600" modal="regular"}

匿名またはプライベートブラウジングウィンドウを開き、メインページに移動します。

プライベートブラウジングウィンドウを閉じ、前の手順を繰り返します。 ページを開くたびに、作成したランダムバリアントが表示されます。

前提条件で作成した ​ ストアフロント ​ を開き、変更する項目に移動します。 品目の SKU または製品コードを書き留めます。

AEM AssetsAdobe Experience Cloud​ で選択して、 を開きます。

{width="600" modal="regular"}

「Assets」をクリックします。

{width="600" modal="regular"}

SKU または 製品コード で商品を検索します。

編集する項目を選択し、「Adobe Expressで開く をクリックします。

{width="600" modal="regular"}

画像 パネルで「オブジェクトを挿入」を選択します。

{width="600" modal="regular"}

テキストボックスに、追加する画像を入力します。 例えば、「雪に覆われた松の木」。

{width="600" modal="regular"}

Brush size を調整し、生成された画像を追加する場所を描画します。 この例では、既存のオブジェクトの周囲に描画して、背景を選択します。

「生成」をクリックして結果を表示します。

目的のオプションを選択し、「保持 をクリックして、様々な結果から選択し す。

自分のスタッフ をクリックして、画像エディターに戻ります。

保存 をクリックして、画像タイプを指定します。

もう一度 保存 をクリックして、変更を保存します。

アセットを保存 ダイアログで、Commerce 保存先フォルダー を選択します。

{width="600" modal="regular"}

新しいアセットとして保存 をクリックして、画像を保存します。

AEM as a Cloud Serviceの ​ ナビゲーションパネル ​ から、Assets / ファイル / Commerce を選択し、前の節で作成したアセットをクリックします。

{width="600" modal="regular"}

プロパティ をクリックします。

{width="600" modal="regular"}

「Commerce」タブを選択します。

{width="600" modal="regular"}

Adobe Commerceに存在しますか？フィ ルドは はい に設定されています。

追加 をクリックして、アセットを追加する製品 SKU を入力します。

{width="600" modal="regular"}

アセットの位置とアセットタイプを選択します。

「基本」タブを選択し、「レビューステータス」タブを 承認済み に変更します。

{width="600" modal="regular"}

保存して閉じる をクリックします。

Adobe Commerce 管理者 で、カタログ/製品 に移動します。

前の節で画像を追加した製品を選択します。

「画像とビデオ」セクションを展開します。

{width="600" modal="regular"}

画像が画像のリストで使用できるようになったことを確認します。

ストアフロントに戻り、変更された製品のページに移動します。

新しい画像が表示されることを確認します。

{width="600" modal="regular"}

​ ユニバーサルエディター ​ を使用してストアフロントサイトを開きます。

編集するテキストのブロックを選択します。

プロパティ パネルで、「バリエーションを生成」をクリックします。

「生成 ボタンをクリックします。

生成テキストを選択またはカスタマイズします。

「公開」をクリックして、ストアフロントを更新します。

​ バリエーションを生成 ​ を開きます。

ヒーローバナー テンプレートを選択します。

「ユーザーのインタラクションの説明」テキストボックスに、「Adobeの社員とパートナーがAdobe ブランドの商品を購入する経験」と入力します。

ドメインの知識の URL に、www.adobestore.com と入力します。

生成 をクリックします。

コンテンツバリエーションを選択し、「画像を生成」をクリックします。

画像サイズ ドロップダウンから ワイドスクリーン （16:9） を選択します。

コンテンツタイプ ドロップダウンから「写真」を選択します。

スタイル 参照画像については、既存のAdobe ストアバナーを選択します。

使用する生成画像を選択し、「保存」をクリックします。

他の参照画像と一緒にこのプロセスを繰り返して、より多くのバリエーションを生成します。