現在表示中:

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

クイックビューは、以下のビューアのダイナミックメディアでサポートされています。

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

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

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

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

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

     

    使用しているビューア クイックビューを作成するために実行する手順
    インタラクティブ画像 画像バナーへのホットスポットの追加
    インタラクティブビデオ ビデオへのインタラクティビティの追加
    カルーセルバナー バナーへのホットスポットまたは画像マップの追加
  2. ビューアの埋め込みコードを取得し、Web サイトにビューアを統合します。

    使用しているビューア
    Web サイトにビューアを統合するために実行する手順
    インタラクティブ画像 インタラクティブ画像の Web サイトへの統合
    インタラクティブビデオ
    インタラクティブビデオの Web サイトへの統合
    カルーセルバナー Web サイトページへのカルーセルバナーの追加
  3. 使用しているビューアが、クイックビューの使用方法を認識する必要があります。

    このために、ビューアは QuickViewActive というハンドラーを使用します。


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

     

    chlimage_1

    ハンドラーは 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 variable2= inData.quickviewVariable2
    var variable3= inData.quickviewVariable3

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

    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() を使用してビューアを起動する前に、ビューアインスタンスが作成され、ハンドラーが読み込まれていることを確認してください。

本作品は Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License によってライセンス許可を受けています。  Twitter™ および Facebook の投稿には、Creative Commons の規約内容は適用されません。

法律上の注意   |   プライバシーポリシー