クイックビューを使用してカスタムポップアップを作成する 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);
}

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

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

これで、関数を使用してクイックビューでシンプルなポップアップを起動できるようになりました。 以下の例では、ポップアップに 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>

テスト HTML ページをweb サーバーにアップロードし、開きます。 ユーザーがクイックビューを起動すると、ビューアにポップアップの 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);

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

*viewerInstance.*init()

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

s7interactiveimageviewer.init()

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