クイックビューを使用したカスタムポップアップの作成 using-quickviews-to-create-custom-pop-ups

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

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

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

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

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

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

ハンドラーは 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

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

• インタラクティブ画像ビューア ‐ イベントコールバック
• インタラクティブビデオビューア ‐ イベントコールバック
• インタラクティブビデオビューアでのインタラクティブデータのサポート ‐ インタラクティブデータのサポート

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

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

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

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

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

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

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

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

  クイックビューの変数がマッピングされます。関数の呼び出しが適切に行われています。また、変数値がブラウザーコンソールに書き込まれます。これは、提供されたサンプル関数を使用して行われます。

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

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

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

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>

ポップアップウィンドウの 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 pop-up
    }
</script>

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

カスタムポップアップウィンドウをフルスクリーンモードで表示する方法

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

ポップアップウィンドウを標準モードとフルスクリーンモードで表示させるには、ビューアのコンテナにポップアップウィンドウをアタッチします。この場合は、2 番目のハンドラーメソッド initComplete を使用します。

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

"initComplete":function() { code block }

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

• インタラクティブ画像ビューア ‐ init
• インタラクティブビデオビューア ‐ init

前の手順で言及したように、ビューアにポップアップをアタッチするには、以下のコードを使用します。

"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 から削除しました。
• ビューアコンテナーの指定
• ビューアコンテナにポップアップを添付しました。

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);
    }
});

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

*viewerInstance.*init()

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

s7interactiveimageviewer.init()

ビューアをホストページに埋め込んだら、必ずビューアインスタンスを作成してください。また、init() を使用してビューアを呼び出す前に、ハンドラーが確実に読み込まれるようにします。