Wix ヘルプセンター
    ホーム
  1. サイトの作成
  2. 高度な機能
  3. CMS
  4. その他 Wix 製品と CMS の連携
    5. CMS：ストアの商品ページにコレクションコンテンツを表示する

CMS：ストアの商品ページにコレクションコンテンツを表示する

読了時間：8分
CMS（コンテンツ管理システム）を使用すると、コレクションのコンテンツをストアの商品ページに直接表示できるようになります。これにより、追加情報で商品のリストをパーソナライズしたり強化したりすることができ、顧客により充実した体験を提供することができます。

まず、Wix ストアのアプリコレクションを参照するコレクションを作成します。ここには、商品ページに統合したい追加情報を保存します。次に、ページ上のデータセットを設定し、Wix ストアのアプリコレクションと「詳細」CMS コレクションに接続します。最後に、リッチコンテンツ要素などのサポートされている要素を「詳細」コレクションに接続して、追加情報を表示します。

これはあなたのオンラインビジネスにとって画期的なことです。たとえば、ブティックオーナーが顧客に商品をより深く知ってもらいたいと考えていると想像してみてください。このプロセスを使用すると、商品ページで直接商品の裏話や具体的なお手入れの方法などの情報を簡単に追加することができます。
商品ページの詳細データセットのスクリーンショット。
始める前に：

ステップ 1 | Wix アプリコレクションを参照するコレクションを作成する

  1. 商品ページに統合したい追加情報を保持するための、複数アイテム（デフォルト）コレクションを作成します。
  2. 「＋アイテムを追加」をクリックして、追加の詳細を保存したい各商品のアイテムを追加します。
  3. 「＋フィールドを追加」をクリックして、保存したいコンテンツの種類ごとにフィールドを追加します（例：リッチコンテンツ）。
  4. 該当するセルをクリックして、各アイテムにコンテンツを追加します。
  5. 「参照」フィールドタイプを追加し、Wix ストアのアプリコレクションに接続します：
    1. 「フィールドを管理」をクリックし、「＋フィールドを追加」をクリックします。
    2. 「参照」を選択し、「フィールドタイプを選択」をクリックします。
      ヒント：アイテムのコンテンツを複数の商品に使用する場合は、「複数の参照先」フィールドを選択します。
    3. 「フィールド名」を入力します。
    4. （Velo のみ）必要に応じて、サイトのコードで使用されている「フィールド ID」を更新します。この ID は後で更新することはできません。
    5. 「参照先コレクション」ドロップダウンをクリックし、「Stores（ストア）」下の「Products（商品）」を選択します。
    6. （オプション）ヘルプテキストを入力して、フィールド名の横にマウスオーバーで表示されるツールチップテキストを追加します。
    7. 「保存」をクリックします。
Wix アプリコレクションの「詳細」に参照フィールドを作成している様子を示したスクリーンショット。
  1. 各アイテムについて、参照フィールドをクリックし、該当する商品を選択します。前のステップで複数の参照先フィールドを追加した場合、複数の商品を選択できます。
「詳細」コレクションの参照フィールドで対応する商品を選択しているスクリーンショット。

ステップ 2 | ページにデータセットを設定する

データセットは、ページ要素をコレクションにリンクして、要素に Wix ストアのアプリコレクションのコンテンツを表示できるようにします。ページには、Wix ストアのアプリコレクションに接続されたデータセットと、「詳細」CMS コレクションに接続されたデータセットが必要です。

  • Wix アプリコレクションデータセット：Wix ストアアプリ内で保存および管理されている商品情報を読み取ります。このデータセットに URL スラッグフィルターを追加します。サポートされている要素をデータセットに接続して、Wix ストアのコンテンツを表示することができます。
  • 詳細データセット：独自の CMS コレクションから、商品について保存した追加のコンテンツを読み取ります。参照フィールドまたは複数参照フィールドを絞り込むためのフィルターをデータセットに追加します。リッチコンテンツなどの要素をこのデータセットに接続して、CMS の「詳細」コレクションに追加したコンテンツを表示します。
この機能に必要なデータセットのスクリーンショット。
Wix エディタ
Wix Studio エディタ
  1. エディタにアクセスします。
  2. 商品ページにアクセスします：
    1. エディタ左側で「ページ・メニュー」 をクリックします。
    2. 「ショップページ」をクリックし、「商品ページ」を選択します。
  3. 「詳細」CMS コレクションに接続するデータセットを追加します：
    1. 左側の「CMS」  をクリックします。
    2. 「コンテンツパーツを追加」をクリックします。
    3. 「データセット」をクリックします。
    4. 「コレクションを接続」ドロップダウンをクリックし、「詳細」コレクションを選択します。
    5. 必要に応じて「データセット名」を編集し、「作成」をクリックします。
  4. Wix ストアアプリコレクションに接続するデータセットを追加します：
    1. 右側のパネルの下部にある「データセットを追加」をクリックします。
    2. 「コレクションを選択」ドロップダウンをクリックし、Wix アプリコレクションの「Stores」下で「Products」を選択します。
    3. 必要に応じて「データセット名」を編集し、「作成」をクリックします。
Wix ストアのアプリコレクションに接続するデータセットを作成している様子を示したスクリーンショット。
  1. Stores/Products データセットに URL スラッグフィルターを追加します：
    1. Stores/Products データセット横の「その他のアクション」アイコン  をクリックし、「データセット設定」を選択します。
    2. 「フィルター」下の「＋フィルターを追加」をクリックします。
    3. 「フィールド」ドロップダウンをクリックし、「Slug（テキスト）」を選択します。
    4. 「条件」の値は「である」のままにします。
    5. 「値の参照元」で「URL Slug」を選択します。
    6. 「フィルターを追加」をクリックします。
Wix アプリコレクションに URL スラッグフィルターを追加しているスクリーンショット。
  1. 「詳細」データセットに参照フィルターを追加します：
    1. 右側の「データセット設定」パネルの上部にある「すべてのページのデータセット」をクリックします。
    2. 「詳細」データセット横の「その他のアクション」アイコン  をクリックし、「データセット設定」を選択します。
    3. 「フィルター」下の「＋フィルターを追加」をクリックします。
    4. 「フィールド」ドロップダウンをクリックし、「参照（Products）」または「複数の参照先（Products）」を選択して、「フィルターを追加」をクリックします。
「詳細」データセットに参照フィルターを追加しているスクリーンショット。
  1. CMSの「詳細」コレクションから詳細を表示したい、サポートされている要素を追加します。たとえば、リッチコンテンツ要素またはプロギャラリーなどを追加することができます。
  2. 「詳細」データセットの該当するフィールドに要素を接続します。
リッチコンテンツ要素をリッチコンテンツフィールドに接続しているスクリーンショット。
  1. 「プレビュー」ツールバーを使用して、該当する商品の接続をテストします。
  2. 変更内容を公開する準備ができたら、サイトを公開します。

お役に立ちましたか？

|
この記事では下記を説明します：
  • ステップ 1 | Wix アプリコレクションを参照するコレクションを作成する
  • ステップ 2 | ページにデータセットを設定する