見出し画像

Velo 第０１回　ライトボックスへデータを渡す

アクトワン Velo開発部

Wixにはライトボックスというポップアップが用意されていますが、ページ上のボタン (myButton) を押してライトボックス (myLightbox) を開いたとき、ページ上の何かしらのデータ (pagedata) をこのライトボックスに渡したいときがあります。

そんなときには openLightbox( ) 関数を使います。以下にコードを示してみましょう。

//openLightbox() を使うにはコードの冒頭で wixWindow をインポートしておきます。
import wixWindow from 'wix-window';

//ボタン(名前は「myButton」)をクリックしたときのイベントハンドラーを作ります。
export function myButton_click(event) {
　
　//イベントハンドラーの中にライトボックスを開いたときにページで得た値「pagedata1」を
　//「prop1」という名前でライトボックスに渡します。
　　wixWindow.openLightbox("myLightbox",{'prop1':pagedata1});
}

これでライトボックスに値が渡るのですが、ライトボックス側でその値を取り出す方法が必要です。
以下にコードを示してみましょう。

//ライトボックス側でも冒頭で wixWindow をインポートしておきます。
import wixWindow from 'wix-window';

//変数 value1 にページのデータ「pagedata1」を取り込みます
let value1 = wixWindow.lightbox.getContext().prop1;

以上のような感じです。
ライトボックスにオブジェクトを送るところがポイントです。

この方法は、Velo Developer certification の４択問題でも次のような設問と選択肢として出題されています。

【設　問】
When opening a lightbox using wixWindow, how do you pass data from the page to the lightbox?

【選択肢】
By adding a data object as an additional parameter when opening the lightbox using wixWindow.openLightbox('LightboxName', dataObj);

Velo開発のご依頼はこちら

この記事が気に入ったらサポートをしてみませんか？