クイックビューを使用したカスタムポップアップの作成

e コマースエクスペリエンスではデフォルトのクイックビューが使用され、ポップアップに購入を促す商品情報が表示されます。ただし、このようなポップアップにカスタムコンテンツが表示されるように設定できます。ビューアに応じて、この機能を使用して、ホットスポット、サムネール画像、画像マップを選択し、情報や関連コンテンツを表示できます。

クイックビューは、Dynamic Mediaの次のビューアでサポートされています。

  • インタラクティブ画像（クリック可能なホットスポット）
  • インタラクティブビデオ（ビデオの再生中にクリック可能なサムネール画像）
  • カルーセルバナー（クリック可能なホットスポットまたは画像マップ）

各ビューアの機能は異なりますが、サポートされる 3 つすべてのビューアでクイックビューの作成手順は同じです。

クイックビューを使用してカスタムポップアップを作成するには：

  1. アップロードしたアセット用にクイックビューを作成します。

    一般には、使用しているビューアでアセットを使用するために編集するときにクイックビューを作成します。

    使用しているビューア クイックビューを作成する場合は、次の手順を実行します
    インタラクティブ画像 画像バナーへのホットスポットの追加
    インタラクティブビデオ ビデオへのインタラクティブ機能の追加.
    カルーセルバナー バナーへのホットスポットまたは画像マップの追加

  2. ビューアの埋め込みコードを取得し、Web サイトにビューアを統合します。

    使用しているビューア
    		 ビューアをWebサイトに統合する場合は、次の手順を実行します
    インタラクティブ画像 インタラクティブ画像の Web サイトへの統合.
    インタラクティブビデオ
    		 インタラクティブビデオの Web サイトへの統合.
    カルーセルバナー Web サイトページへのカルーセルバナーの追加.

  3. 現在使用しているビューアは、クイックビューの使用方法を認識している必要があります。

    ビューアは QuickViewActive というハンドラーを使用します。

    ​
    例Webページでインタラクティブ画像用に以下のサンプル埋め込みコードを使用するとします。

    chlimage_1-291

    ハンドラーは setHandlers を使用してビューアに読み込まれます。

    *viewerInstance*.setHandlers({ *handler 1*, *handler 2*}, ...

    上記のサンプル埋め込みコードの例を使用すると、次のコードが表示されます。

    s7interactiveimageviewer.setHandlers({
    quickViewActivate": function(inData) {
        var sku=inData.sku;
        var genericVariable1=inData.genericVariable1;
        var genericVariable2=inData.genericVariable2;
       loadQuickView(sku,genericVariable1,genericVariable2);
    }
})

    setHandlers() メソッドについて詳しくは、以下を参照してください。

  4. 次に、quickViewActivateハンドラーを設定する必要があります。

    quickViewActivateハンドラーは、ビューアのクイックビューを制御します。 このハンドラーには、クイックビューで使用する変数のリストと関数呼び出しが含まれています。埋め込みコードは、クイックビューのSKU変数セットとサンプルのloadQuickView関数呼び出しのマッピングを提供します。

    変数マッピング Web ページで使用する変数を SKU 値とクイックビューに含まれる一般変数にマッピングします。

    var *variable1*= inData.*quickviewVariable*

    提供された埋め込みコードには、SKU 変数用のサンプルマッピングが含まれています。

    var sku=inData.sku

    以下のように、クイックビューからの追加変数もマッピングします。

    var <i>variable2</i>= inData.<i>quickviewVariable2</i>
 var <i>variable3</i>= inData.<i>quickviewVariable3</i>

    関数呼び出し​ハンドラーには、クイックビューを機能させるために関数呼び出しも必要です。この関数は、ホストページからアクセスできることが前提となります。埋め込みコードは、サンプル関数呼び出しを提供します。

    loadQuickView(sku)

    このサンプル関数呼び出しは、関数 loadQuickView() が存在しアクセス可能であることが前提となります。

    quickViewActivate メソッドについて詳しくは、以下を参照してください。

  5. 以下の操作を実行してください。

    • 埋め込みコードの setHandlers セクションのコメントアウトを解除します。

    • クイックビューに含まれる追加変数をマッピングします。

      • 変数を追加する場合は、loadQuickView(sku,*var1*,*var2*) 呼び出しを更新します。

    • ビューア外でページにシンプルな loadQuickView () 関数を作成します。

      例えば、以下の場合は、ブラウザーのコンソールに SKU の値が書き込まれます。

    function loadQuickView(sku){
    console.log ("quickview sku value is " + sku);
}

    • Web サーバーにテスト HTML ページをアップロードし、開きます。

      クイックビューからの変数がマッピングされ、関数呼び出しが追加された状態で、ブラウザーコンソールは提供されたサンプル関数を使用してブラウザーコンソールに変数値を書き込みます。

  6. これで、関数を使用してクイックビューでシンプルなポップアップを起動できるようになりました。以下の例では、ポップアップに DIV を使用しています。

  7. ポップアップの DIV を以下のようなスタイルにします。必要に応じて独自のスタイルを追加します。

    <style type="text/css">
    #quickview_div{
        position: absolute;
        z-index: 99999999;
        display: none;
    }
</style>

  8. HTML ページのボディにポップアップの DIV を配置します。

    要素の1つに、ユーザーがクイックビューを起動したときにSKU値で更新されるIDが設定されます。 この例にはこれに加え、ポップアップを表示後に再び隠すための単純なボタンも含まれています。

    <div id="quickview_div" >
    <table>
        <tr><td><input id="btnClosePopup" type="button" value="Close"        onclick='document.getElementById("quickview_div").style.display="none"' /><br /></td></tr>
        <tr><td>SKU</td><td><input type="text" id="txtSku" name="txtSku"></td></tr>
    </table>
</div>

  9. ポップアップのSKU値を更新できる関数を追加します。手順5で作成したシンプルな関数を置き換えて、ポップアップを表示します。 ポップアップを表示させます。

    <script type="text/javascript">
    function loadQuickView(sku){
        document.getElementById("txtSku").setAttribute("value",sku); // write sku value
        document.getElementById("quickview_div").style.display="block"; // show popup
    }
</script>

  10. Web サーバーにテスト HTML ページをアップロードし、開きます。ユーザーがクイックビューを起動すると、ビューアにポップアップの DIV が表示されます。

  11. 全画面表示モードでカスタムポップアップを表示する方法

    インタラクティブビデオビューアなどの一部のビューアでは、全画面表示モードでの表示をサポートしています。ただし、前の手順で説明したポップアップを使用すると、全画面表示モード中はビューアの背後に表示されるようになります。

    標準モードと全画面表示モードの両方でポップアップを表示させるには、ビューアのコンテナにポップアップをアタッチします。2つ目のハンドラメソッドinitCompleteを使用します。

    initComplete ハンドラーは、ビューアの初期化後に呼び出されます。

    "initComplete":function() { code block }

    init() メソッドについて詳しくは、以下を参照してください。

  12. 前の手順で説明したポップアップをビューアにアタッチするには、次のコードを使用します。

    "initComplete":function() {
    var popup = document.getElementById('quickview_div');
    popup.parentNode.removeChild(popup);
    var sdkContainerId = s7interactivevideoviewer.getComponent("container").getInnerContainerId();
    var inner_container = document.getElementById(sdkContainerId);
    inner_container.appendChild(popup);
}

    上記のコードでは、次の処理が行われました。

    • カスタムポップアップを識別しました。
    • DOM からの削除
    • ビューアコンテナの指定
    • ビューアコンテナへのポップアップのアタッチ

  13. setHandlersコード全体は、次のようになります（インタラクティブビデオビューアを使用）。

    s7interactivevideoviewer.setHandlers({
    "quickViewActivate": function(inData) {
        var sku=inData.sku;
        loadQuickView(sku);

    },
    "initComplete":function() {
        var popup = document.getElementById('quickview_div'); // get custom quick view container
        popup.parentNode.removeChild(popup); // remove it from current DOM
        var sdkContainerId = s7interactivevideoviewer.getComponent("container").getInnerContainerId();
        var inner_container = document.getElementById(sdkContainerId);
        inner_container.appendChild(popup);
    }
});

  14. ハンドラーを読み込んだ後で、ビューアを初期化します。

    *viewerInstance.*init()

    ​
    例：この例では、インタラクティブ画像ビューアを使用します。

    s7interactiveimageviewer.init()

    ホストページにビューアを埋め込んだ後で、init() を使用してビューアを起動する前に、ビューアインスタンスが作成され、ハンドラーが読み込まれていることを確認してください。

このページ