Velo 第４１回 ライトボックスからデータを受取る
第０１回の続編です。ライトボックスはポップアップとして活用されますがページコードを持っています。従ってライトボックス側のコーディングにより設定したオブジェクトをライトボックスに持たせて元のページで受け取ることができます。ただしプロミス処理が加わりますので難しく感じます。
API Reference から、wix-window-frontend モジュールの openLightBox( ) メソッドを調べます。(翻訳に AI は使ってません^^;)
openLighbox( )・・・ライトボックスを開きオプションとしてデータを渡す
【説明】この関数はライトボックスが閉じられたときに解決するプロミスを返す。ライトボックスが close( ) 関数を使ってプログラムで閉じられた場合またそのときにデータをもっている場合のみ、プロミスはそのデータオブジェクトに解決する。データオブジェクトをライトボックスに送っていた場合は getContext( ) 関数でそのデータを取り出すことができる。
ただし、データを渡すためにはライトボックスが openLightbox( ) 関数を使ってプログラムで開かれなければならない。ライトボックスが自動的に開いたりページ要素からのリンクで開いた場合にはデータをライトボックスに渡すことはできない。
重ねて注意すると、ライトボックスを選択し、表示設定から「ライトボックスの自動表示」を「オフ」にし、ページ要素とのリンクはすべて外れていることを確認し、プログラムでライトボックスを開ける工夫をしなければならない。
例えば、ボタン(openButton)を追加し、イベントハンドラー(onClick)を設定し、コールバックにライトボックス(loginLightbox)を開く openLightbox( ) 関数を含めると機能する。
以下のコードをご覧下さい。ライトボックスを開くページ側のコードです。
// モジュールをインポート
import wixWindowFrontend from 'wix-window-frontend';
// ボタンにイベントハンドラーを設定する
export function openButton_click(event) {
// ２つのプロパティ data1, data2 をもつオブジェクトをライトボックスに送る
wixWindowFrontend.openLightbox("loginLightbox",
{
"data1": $w('#pageSend1').value,
"data2": $w('#pageSend2').value
})
// close()関数が呼び出されプロミスがオブジェクトに解決した場合の非同期コード
// ２つのプロパティ data1, data2 をもつオブジェクトをライトボックスから受取る
.then((lightboxDataObj) => {
$w('#pageReceive1').text = lightboxDataObj.data1;
$w('#pageReceive2').text = lightboxDataObj.data2
})
}
ライトボックスを開いた元のページにデータを渡すためには、ライトボックスをプログラムで閉じなければならない。もしサイト訪問者が × アイコンや「閉じる」ボタンでライトボックスを閉じると、データは元のページに渡されない。
従って確実にデータを元のページに渡すためには上記手段をすべて無効にし、プログラムによって閉じる方法を取らなければならない。
例えばボタン(closeButton)を追加し、イベントハンドラー(onClick)を設定し、コールバックにclose( ) 関数を含めると機能する。
以下のコードをご覧下さい。ライトボックス側のコードです。
// モジュールをインポート
import wixWindowFrontend from 'wix-window-frontend';
// ライトボックスの初期化後にページデータをオブジェクトから受取る
$w.onReady(() => {
let pageDataObj = wixWindowFrontend.lightbox.getContext();
$w('#lightBoxReceive1').text = pageDataObj.data1;
$w('#lightBoxReceive2').text = pageDataObj.data2;
});
// ライトボックスをボタンのイベントハンドラーで閉じる
export function closeButton_click(event) {
wixWindowFrontend.lightbox.close(
// 同時にライトボックスデータをオブジェクトとして保存する
{
"data1": $w('#lightBoxSend1').value,
"data2": $w('#lightBoxSend2').value
})
}【注意】openLightbox( ) 関数を呼び出すときはライトボックスの「名前」を使い、IDは使わない。ライトボックスの名前はライトボックスを選択し、「表示設定」をクリックすれば表示される。onReady( )イベントが発出して初めて openLightbox( ) は呼び出せる。