WixStudioでVeloを使う Step 34 「ライトボックスとセッションを組み合わせる」
はじめに
「サイトにお知らせを掲載する。でも、お知らせに掲載したところでどれだけ見て貰えるのか…」とちょっと疑問になった。なら、ライトボックスで表示する？でも、それはそれで毎回出られると邪魔なのが正直なところ。なら、1回なら…許容範囲？
情報を半強制的に提示するならライトボックスが便利だと思う。これをVeloで制御して、更にセッションと組み合わせたら更に便利になるんではなかろうかと思って検証した記事。
目的
サイトにアクセスしたらライトボックスを提示する。ライトボックスは全てのページで表示するが、一度閉じたら同一のタブでは表示しないようにする。「情報は提示したいけど、閲覧の邪魔はしたくない。」を実現するのが目的。ライトボックスとセッションをVeloで制御することで実現する。
準備
特別な要素は使わない。新規でサイトを用意し解説する。
ページを複数ページ用意する
サイトのどのページにアクセスしても、サイトを見に来られた方には必ず情報を提示したい。これを検証するためにページは複数ページ用意し、いずれのページにアクセスされても必ずライトボックスが表示されるようにしたい。
今回は新規ページとしてsecond-pageを追加した。
second-pageを追加
| ページ名 | URLスラッグ(ページのURLの最後の部分) |
|---|---|
| second-page | /page-2nd
|
メニューにもsecond-pageを追加して、ページ遷移が出来るようにしておく。
second-pageをメニューに追加
検証時にどちらのページを開いているのかわからなくなるので、second-pageにはテキスト要素を配置して見分けられるようにしておいた。
second-pageにテキスト要素を配置
ライトボックスを追加する
今回の主役になるライトボックスを追加する。ライトボックスを追加する際にいつも迷うが、ライトボックスは「要素を追加」->「レイアウトツール」で見つけることが出来る。
ライトボックスを追加する
どれを選んでもいい。とりあえず僕は一番上のシンプルなヤツ。
一番上のシンプルなヤツを追加した
| ライトボックスの名称 |
|---|
Center |
Veloでライトボックスを制御する際にライトボックスの名称が必要になるので確認しておく。一番上のシンプルなライトボックスはCenterという名称になっていた。変更も出来るのでわかりやすい物にかえてもいい。
ライトボックスの名称を変更してもいい
ライトボックスの表示設定を変更
ライトボックスは追加された初期状態ではライトボックスの自動表示がオンになっているのでオフに変更する
ライトボックスの自動表示をオフにする
以上で準備が終わり。
スクリプトを書く
今回のスクリプトは masterPage.js に書く。通常のページコードに記述しても動くが、ページコードに記述した場合に該当するページでのみ処理が行われることになる。今回はどのページに直接アクセスしてこられてもとしたいため、全てのページで読み込まれるmasterPage.jsに記載する。
ライトボックスを開く
まずは以下のコードを記述する。
import { openLightbox } from "wix-window-frontend"
$w.onReady( () => {
openLightbox('Center');
})
上記コードはライトボックスを表示する記述。ライトボックスの自動表示をオフにしたため、何かしらのきっかけがなければライトボックスが表示されない。今回はVeloを使ってライトボックスを表示するようにした。
ライトボックスの表示はwix-window-frontend.openLightbox()によって実現出来る。
ライトボックスを開いた形跡を残す
この状態ではライトボックスはページを遷移する度に開く。それは正直、邪魔。一度ライトボックスを開いたら、それ以降は同一タブ内では開かないようにしておきたい。そこでセッションを使って形跡を残すことを試す。
セッションと組み合わせた処理は以下。
import { openLightbox } from "wix-window-frontend";
import { session } from "wix-storage-frontend";
$w.onReady( () => {
const alreadyOpened = session.getItem('alreadyOpened');
if(alreadyOpened == null){
openLightbox('Center')
.then( () => {
session.setItem('alreadyOpened',1);
});
}
})
セッションを使えば同一タブ内で記録(形跡)を残すことが出来る。形跡の名称はalreadyOpenedとしておく。セッションを利用するので冒頭でimport { session } from "wix-storage-frontend";が必要。
const alreadyOpened = session.getItem('alreadyOpened');でセッション内からalreadyOpenedを確認する。要は形跡を取得。もし、形跡がなければalreadyOpenedはnullとなる。
if(alreadyOpened == null){ ... }はもし、形跡が存在しないならばと訳す。形跡が存在しないならばライトボックス(Center)を開く。openLightbox('Center')につづく.then( () => {sessionsetItem('alreadyOpened',1);});はライトボックスが閉じられたときに行う処理が記述できる。ライトボックスが閉じられたら形跡を残す必要があるのでsession.setItem('alreadyOpened',1);としておく。このとき1に意味はなく、null以外の何かが入っていればいい。
動作確認
サイトにアクセスし、ライトボックスが表示されることを確認する。
ライトボックスを閉じると、それ以降は別ページへ遷移してもライトボックスは表示されない。
ただし、これは同一タブ内だけの話。別タブを用意するとライトボックスはまた表示される。
まとめ
ライトボックスは簡単に組み込むことができるので便利に使いたい。標準でも十分使えるモノだと思うが、やはりVeloで少し制御を加えると一層便利になると思う。今回の実装では行っていないが、ライトボックス上にチェックボックスで「次回まで表示しない」などの要素を配置し、チェック状態に応じてsession.setItem('alreadyOpened',1);を制御すればまた面白い動きが実現出来る。
つづき
Discussion