CMS：カスタムイベントギャラリーを作成する

カスタムイベント詳細ページを作成することにはいくつかの利点があります。組み込みのイベントギャラリーを使用する場合、ギャラリーの表示方法の制御に制約があります。ただし、カスタムイベントギャラリーを作成すると、表示内容と表示方法を完全に制御することができます。

この記事では、以下に示すカスタムイベントギャラリーを構築するために必要な手順について説明します。リピーターを使用して、イベントを表示するギャラリーエフェクトを作成します。また、データセットを使用してそのリピーターをサイトのイベントコンテンツに接続します。同じ手順に従って、サイトのデザインやニーズに応じてイベントをカスタマイズして表示することができます。

カスタムイベントギャラリーページを作成する前に、Wix イベントアプリをサイトに追加する必要があります。ここで、「Events」という名前のコレクションがサイトに追加されていることをご確認ください。このコレクションにはすべてのイベントデータが含まれています。

また、以下についても理解しておく必要があります：

まず、ページにリピーターを追加し、表示したい情報を表示できるように設定します。この例では、まずはじめに 1つの画像と 2つのテキストパーツを含むリピーターを選択しています。

追加情報を表示するために、リピーターにもう 1つテキストパーツを追加します。リピーターのデザインは自由に変更が可能です。たとえば、丸い画像、追加のボタン、または任意のパーツを追加できます。ここでは一部のフォントサイズを変更し、パーツを移動しました。

エディタでは、リピーターは次のように表示されます：

リピーターで実際に表示するコンテンツは簡単に設定できます。データセットを使用してサイトに接続すると、テキストと画像にサイトのイベントコンテンツが入力されます。また、リピーターに表示されるアイテム数についても心配する必要はありません。リピーターをデータセットに接続した時点で、アイテム数が自動で設定されます。

リピーターが Wix イベントアプリからイベントコンテンツを取得できるよう、ページにデータセットを追加します。このデータセットが、「Events」コレクションのコンテンツとページの要素をつなぐ役割を果たします。

次に、データセットを「Events」コレクションに接続します。

最後に、「データに接続」ボタン  を使用して接続を作成します。リピーターを「Events」コレクションに接続し、次に各ページ要素を「Events」コレクションのフィールドに接続します。表示するコンテンツはコレクションから選択できます。この例では、以下を表示するように選択しています。

これで作業は完了です。サイトをプレビューまたは公開して、カスタムイベントギャラリーの動作を確認できるようになりました。続いて、以下ではカスタムイベントギャラリーに機能を追加する方法をご説明します。

上記で作成したギャラリーには、現在のステータスに関係なくサイトのすべてのイベントが表示されます。つまり、キャンセルされたイベントやすでに開始されているイベント、過去のイベントも表示されます。一部のイベントを表示したくない場合は、データセットのフィルターを使用して、選択したイベントのサブセットのみを表示することができます。

この例では、今後のイベントのみを表示します。そのためには、データセットの「Status」フィールドでフィルターを追加し、ステータスが「SCHEDULED（スケジュール済み）」のイベントのみを表示するよう設定します。

デフォルトでは、イベントは作成された順に、古いものから新しいものの順に表示されます。表示されたイベントの順序を変更するには、データセットの並び替えを使用してイベントの順序を定義します。

この例では、イベントを開始日の近い順に表示します。そのために、データセットの「Start（開始日）」フィールドに古いものから新しいものへの並び替えを追加します。

イベントギャラリー内の各イベントのイベント詳細ページや登録フォームにリンクを張ることもできます。これらのリンクを追加する方法は 2つあります：

カスタムイベントギャラリーに接続されたデータセットを使用して、組み込みのイベント詳細ページまたは登録フォームへのボタンを簡単に作成することができます。

この例では、詳細ページと登録ページの両方にボタンを作成します。まず、リピーターアイテムに 2つのボタンを追加し、テキストを編集します。

次に、「データに接続」ボタン  を使用してボタンリンクを接続します。詳細ボタンはサイトイベントページの URL、登録ボタンは登録用の URL にリンクさせています。

サイト上に独自のイベント詳細ページを作成することもできます。そのためには、動的ページを作成し、必要なイベント情報の詳細を表示するようにデザインします。詳細ページから登録フォームへのリンクを設定することもできます。次に、上で作成したリピーターにボタンを追加し、「データに接続」ボタン  を使用してボタンのリンクをカスタマイズしたイベント詳細の動的ページに接続します。

カスタムイベント詳細ページの作成方法はこちら