ユースケース

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

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

​ 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"}

「注文を配置」をクリックします。

Commerce管理者を開きます：<your store URL>/admin。

Adobe IDでログインします。

Sales > Orders​に移動します。

最近の注文を表示するCommerce管理画面の {width="600" modal="regular"}

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

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

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

ストアフロントビルダーを開きます。 https://da.live/#/<GitHub User Name>/<Repository Name>/main/da/index.mdに移動します。

Index ページを開きます。

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

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

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

ストアフロントページを更新して、変更が有効であることを確認します。

ストアフロントビルダーで、インデックスページを選択し、コピー​をクリックします。

New ボタンをクリックし、Folder​を選択して、メインフォルダーの下に​experiments フォルダーを作成します。

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

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

各ページを開き、「homev1」と「homev2」の名前を変更します。 これらはあなたの​ チャレンジャーです。

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

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

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

タイトルが​ メタデータ ​の新しいブロックを追加します。

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

• タイトル - 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 Assetsを開くには、Adobe Experience Cloudで選択します。

Adobe Experience Cloud インターフェイス {width="600" modal="regular"}を示すAEM Assets セレクター

Assets​をクリックします。

AEM Assets インターフェイス {width="600" modal="regular"}のAssets ナビゲーション オプション

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

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

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

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

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

テキストボックスに、追加する画像を記述します。 例えば、「スノーマツの木」です。

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

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

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

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

Your Stuff​をクリックして、画像エディターに戻ります。

保存​をクリックして、画像の種類を指定します。

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

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

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

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

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

{width="600" modal="regular"}を含むAEM AssetsのCommerce フォルダー

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

AEM Assets ツールバー {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"}

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

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

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

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

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

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

Generate Variationsを開く

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

ユーザーインタラクションの説明 テキストボックスに、「Adobeの従業員およびパートナーがAdobe ブランドの製品を購入するためのエクスペリエンス」と入力します。

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

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

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

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

コンテンツの種類 ドロップダウンから、写真​を選択します。

スタイル​の参照画像で、既存のAdobe ストアバナーを選択します。

使用する生成された画像を選択し、保存​をクリックします。

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