ビュー
ビューは、ウィジェットの「ページ」のように機能します。
- 各ウィジェットには、少なくとも1つのビューが必要です。
- ウィジェットには常に初期ビューがあります。これは、ウィジェットが最初に表示されたときに表示されるビューです。
ビューの種類
オーバーレイビュー
オーバーレイビューは、ウェブサイト上の他のコンテンツの上に浮遊します。画面の中央やページの端に配置できます。
オーバーレイビューには、オプションでバックドロップを設けることができます。これはビューの背後に配置され、ページ全体を覆います。これにより、ビューが視覚的に焦点となるように、ページを暗くしたり明るくしたりすることができます。
埋め込みビュー
埋め込みビューは、ページの特定のセクションに挿入されます。このビューはページ上でスペースを占め、他の要素のフローとレイアウトに影響を与えます。
埋め込みセレクター
ビューの挿入ポイントは、CSS Selector として指定されます。
例えば、セレクターの #banner_container は、以下のHTMLドキュメントのセクションをターゲットにするために使用できます。
<!doctype html>
<html>
<head>
...
</head>
<body>
...
<div id="banner_container">...</div>
...
</body>
</html>埋め込みセレクターの優先順位
INFO
埋め込みは、ブラウザの機能 document.querySelector と同様の方法で機能します。
複数のセレクターを使用したい状況があるかもしれません。例えば、デスクトップサイトとモバイルサイトの両方に表示されるウィジェットがあり、それぞれ異なるHTMLを持っている場合などです。
埋め込みセレクターの例：#desktop-wrapper, .mobile-embed。
これは、ドキュメント内で最初に現れる方に応じて、#desktop-wrapper または .mobile-embed のいずれかを見つけます。どちらか一方しか現れない場合でも有効であり、その場所に埋め込みが表示されます。
WARNING
ChromeのDevice Modeのようなツールを使用して、デスクトップとモバイルの両方で埋め込みをテストすることをお勧めします。
埋め込みモード
埋め込みビューは、ターゲットとするページの指定箇所に先頭に追加 (prepended) されるか、末尾に追加 (appended) されます。これにより、そのセクションに既に存在する他のコンテンツの前後どちらかにビューが挿入されます。
埋め込みラッパーの高さ
埋め込みビューは、ページに挿入される前に「ラッパー」要素内に作成されます。デフォルトでは、このラッパー要素はビュー自体の高さを自動的に引き継ぎますが、特定の高さを指定することもできます。
例えば、これによりラッパーの高さをビューよりも高くすることで、ビューをページの一部に埋め込み、垂直方向に中央揃えにすることができます。
Z-Index
z-index プロパティを使用すると、ページ上の他のコンテンツに対するビューの重なり順を上書きすることができます。
INFO
一部のウェブサイトでは、ビューがページ上の他のコンテンツよりも上に表示されるように、z-index に大きな値を指定する必要がある場合があります。
トランジション
ビューは、表示される際に画面にトランジションするように設定できます。
INFO
「ビューを切り替える (Switch to View)」アクションを使用してあるビューから別のビューに切り替わる場合、トランジションはスキップされます。これは、Offer Flyout ウィジェットテンプレートのように、ウィジェットに連続する画面として機能する複数のビューがある一般的なユースケースを可能にするためです。