ウォークスルー

ランディングページを作成する

この手順では、新しいページを作成してストアフロントサイトに追加します。このページは、顧客が送信したURLをクリックした際に見えるストアフロント商品ページを作成するために使われます。これはEmail Experience Managerの自動化メールキャンペーンの一環です。

ランディングページを作成するには:

1. コンテンツエディターでsitecore/Content///Homeへ行ってください。

2. Homeアイテムを右クリックして「挿入、ページ」をクリックします。

3. メッセージダイアログボックスでページ名を入力してください。例えばfridge-campaignのように、OKをクリックします。

   ページ名はストアフロントのURLで使われます。例えば、fridge-campaignは www.storefront.com/fridge-campaignになります。

4. 新しく作成したページを右クリックし、エクスペリエンスエディターをクリックしてください。

5. リボンのExperience AcceleratorタブのLook & Feelセクションで「 Pick Page Design」をクリックしてください。

6. 表示されるダイアログボックスの ページデザイン リストで、「 デフォルトコマースページ 」をクリックして **「OK」**をクリックします。

7. リボンの上で「 保存」をクリックします。

ストアフロントページを作成する

この手順では、プロモーションしたい冷蔵庫の詳細と画像を含むエクスペリエンスエディターを使ってストアフロントページを作成します。

ストアフロントページを作成するには:

1. アプリケーションウィンドウの右側で矢印をクリックすると ツールボックスを開きます。

2. Commerce Catalogセクションから、Catalog Item Containerコンポーネントをページにドラッグします。

3. カタログアイテムコンテナツールバーで「その他」→「コンポーネントプロパティ編集」を選択します。

4. General, Data Sourceセクションで「Browse」をクリックし、「Home/Catalogs/Habitat_Master/Departments/Appliances」に行き、「Habitat Viva 4-Door 22」を選択してください。立方フィート冷蔵庫(Cubic Foot Refrigerator)とアイスメーカーを選び、「**OK」**をクリックします。

5. 「OK」をクリックして**「コントロールプロパティ」**ダイアログボックスを閉じます。

   カタログアイテムコンテナレンダリングは、カタログレンダリング群のデータソースとして製品アイテムを設定します。コンテナレンダリング内に追加されたすべてのカタログレンダリングは、選択した製品コンテキストを使用します。これにより、製品コンテキストが利用できないページに商品情報を表示できます。

6. ページ構造セクションから、**スプリッター(列)**コンポーネントをページにドラッグして、情報を2つの列に整理します。

7. Commerce CatalogセクションからProduct Imagesコンポーネントをコンテナの左列にドラッグします。

8. Commerce Catalogセクションから、以下のコンポーネントをコンテナの右列にドラッグしてください:

   • 製品情報
   • 製品在庫
   • 製品バリアント
   • 製品価格の構成要素

   いずれの場合も、「関連コンテンツ選択」ダイアログボックスで、同じ名前の既存のコンテンツをクリックして「OK」をクリックします。

9. Commerce Cartセクションから「Add to Cart」コンポーネントをページにドラッグし、変更を保存します。

   ランディングページの表示はエクスペリエンスエディターでこんな感じです。

   

10. ホームタブで「公開」をクリックし、「アイテム公開」ダイアログボックスで**「スマート・パブリッシュ**」を選択し、「公開」をクリックします。「OK」をクリックして進めます。

    ライブストアフロントではURLを使ってページにアクセスし、このような見た目になります。

    

!ヒントメールキャンペーンのランディングページ作成方法については、Discover Sitecoreチャンネルで公開されている 動画 をご覧ください。