ヘルプセンター
    ヘルプセンター
  1. サイトの作成
  2. 高度な機能
  3. CMS
  4. CMSコレクションのコンテンツをサイトに接続する
    5. CMSのリクエストダイナミックライトボックス

CMSのリクエストダイナミックライトボックス

票を集める
現在のところ、ライトボックスをCMSコレクションに接続してダイナミックにすることはできません。ただし、ライトボックスの付属要素をCMSコレクションのコンテンツに接続して、要素をダイナミックにすることはできます（テキスト、画像、ボタンなど）。  
私たちは常に製品のアップデートと改善に努めており、皆様からのフィードバックは大変ありがたく思っています。 

回避策

Veloを使用すると、ダイナミックアイテムページから開き、ライトボックスが開かれたページに表示されているのと同じアイテムを表示するライトボックスを作成できます。

例えば、提供するサービスを表示する動的なアイテムページがある場合、ページ上のボタンをライトボックスにリンクさせることができます。ライトボックスでは、テキスト、画像、ボタンなどの要素を、同じコレクションに接続するデータセットに接続できます。その結果、訪問者がダイナミックアイテムページのボタンをクリックすると、ライトボックスが開き、ページに表示されている同じアイテムの詳細情報が表示されます。 
始める前に
あなたのサイトが以下のようなものであることを確認してください： 
Wixエディター
スタジオエディター
  1. 編集者のところに行ってください。
  2. 関連するダイナミック・アイテムのページに移動する。 
  3. ベロ・デヴ・モードを有効にする： 
    1. エディター上部のDev Modeをクリックする。 
    2. Dev Modeをオンにする]をクリックします。 
  4. 以下のコード・スニペットをコピーして、ページ・コードの上部に貼り付けてください：
1インポートwixWindowFrontend から 'wix-window-frontend';
ダイナミック・アイテム・ページのコードの先頭にコード・スニペットを追加したスクリーンショット。
  1. Copy the code snippet below and paste it after: $w.onReady(function () {
1$w('#openLightbox').onClick(async () => {
2        const item = await $w('#dynamicDataset').getCurrentItem();
3        const id = item._id;
4        wixWindowFrontend.openLightbox("Dynamic Lightbox", id);
5    })
6
ダイナミック・アイテム・ページのコードに2番目のスニペットを貼り付けたスクリーンショット。
  1. 貼り付けたサンプルコードで、以下のIDをあなたのサイトで使用しているものに置き換えてください：
    • openLightbox： ライトボックスを開くボタンのIDに置き換える。 
    • ダイナミック・データセット： 動的項目ページデータセットのIDに置き換える。 
    • ダイナミック・ライトボックス： ライトボックスの名前で置き換える。 
コード内で置き換える必要のあるIDとライトボックス名を示すスクリーンショット。
  1. エディターでライトボックスに移動する。 
  2. データセットを追加し、ダイナミック・アイテム・ページと同じコレクションに接続します：
    1. クリック CMS  エディターの左側にある
    2. コンテンツ要素の追加をクリックします。 
    3. データセット」をクリックする。
    4. Choose a collectionドロップダウンをクリックし、ダイナミック・アイテム・ページに接続するのと同じコレクションを選択します。 
    5. 作成」をクリックする。 
  3. データセット設定の「最大表示項目 」フィールドをクリックし、「1」と入力する。
  4. ライトボックスの要素（テキスト、画像、ボタンなど）をデータセットに接続します：
    1. ライトボックスの該当する要素をクリックします。 
    2. をクリックする。 CMSへの接続 アイコン .
    3. Connections の下のドロップダウンをクリックし、関連するコレクション・フィールドまたは データセット・アクションを選択します。 
    4. 接続したいライトボックスの各要素について、この手順を繰り返します。 
  5. 以下のコードスニペットをコピーして、ライトボックスのコードの一番上に貼り付けてください： 
1インポートwixWindowFrontend から 'wix-window-frontend';
2インポートwixData から 'wix-data';
コード・スニペットをライトボックス・コードの先頭に貼り付けたスクリーンショット。
  1. Copy the code snippet below and paste it after: $w.onReady(function () {
1const getData = async () => {
2       const id = await wixWindowFrontend.lightbox.getContext();
3       $w('#dataset1').setFilter(wixData.filter().eq('_id', id));
4}
5getData();
上のコードスニペットをライトボックスのコードに追加したスクリーンショット。
  1. 貼り付けたサンプルコードのdataset1 を lightbox データセットの ID に置き換えます。 
  2. サイトをプレビューして機能をテストしてください。 
  3. 準備ができたら、サイトを公開する。 
注意： 予定されている機能や時間の予測を含むすべての情報は、純粋に参考情報であり、Wixの裁量でいつでも変更または中止される可能性があります。これらの情報は、将来の利用可能性や実装を約束、確約、保証するものではなく、購入を決定する際に依拠すべきではありません。

関連コンテンツ

Wixエディターライトボックスの追加と設定

プロを雇う

あなたのサイトの目標達成をお手伝いするWixパートナーをご紹介します。
マッチング