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

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

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

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

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

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

  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() メソッドについて詳しくは、以下を参照してください。

    • インタラクティブ画像ビューア - sethandlers
    • インタラクティブビデオビューア - 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() メソッドについて詳しくは、以下を参照してください。

    • インタラクティブ画像ビューア ‐ init
    • インタラクティブビデオビューア ‐ 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() を使用してビューアを呼び出す前に、ハンドラーが確実に読み込まれるようにします。

このページ