チュートリアル: クエリを使用して項目をレンダリングする

Version:

日本語翻訳に関する免責事項

このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。

このチュートリアルでは、関連製品とそのすべての子アイテムをレンダリングするブログ投稿のレンダリングバリアントを作成する方法について説明します。これを実現するために、クエリ項目でレンダリングバリアントを使用します。このチュートリアルでは、ブログ投稿と同じタグを共有する作成者の一覧を表示する方法のより複雑なシナリオについても説明します。

このチュートリアルの開始点は、ブログ記事のレンダリングバリアントの作成のチュートリアルで説明されているシナリオと同じです。このシナリオで説明する手順を実行するには、追加の製品リストとタグが必要です。

シナリオ

このシナリオには、次のものが含まれます。

ブログの投稿を含むサイト。
製品リスト。
クエリを使用して製品リストを参照するページテンプレート:
ブログページには、リストから選択された関連製品があります。
authorテンプレートは、_taggable基本テンプレートを継承します。
ブログ投稿と著者には、リストから割り当てられたタグがあります。

このチュートリアルでは、次の方法について説明します。

レンダリングバリアントを追加する

すべてのブログ記事に関連製品のリストを表示できるようにするために、まずページコンテンツレンダリングのレンダリングバリアントを作成します。

コンテンツエディタでPresentation/Rendering Variantsに移動し、Page Contentを右クリックして、Insert 、Variant Definitionの順にクリックします。
Related Productsと入力し、OKをクリックします。
次に、タイトルフィールドを作成するには、Related Productsバリアントを右クリックし、Insert、Text、Title」と入力して、OKをクリックします。
Variant DetailsセクションのTagフィールドでh3を選択し、TextフィールドにRelated Productsと入力します。

参照アイテムを追加する

次に、ブログ投稿のRelatedProductsフィールドに移動し、そのフィールドのコンテンツをレンダリングするレンダリングバリアント参照アイテムを作成します。レンダリングバリアント参照アイテムは、参照アイテムのフィールドを表示します。参照されたアイテムのフィールドを表示する場合は、このフィールドをPass through fieldフィールドで定義できます。

レンダリングバリアント参照アイテムを作成するには:

Related Productsバリアントを右クリックし、Insert、Referenceの順にクリックし、「RelatedProducts」と入力して、OKをクリックします。

Pass through fieldフィールドは、ネストされたアイテムのフィールドの名前を定義します。レンダリングバリアントは、Related Productsフィールドを通過するようになりました。
商品をタイトル順にリストするには、Related Productsバリアントを右クリックしてFieldをクリックし、「 Title」と入力してOKをクリックします。
Variant DetailsセクションのTagフィールドで、h4を選択します。

ここでブログページにページコンテンツバリアントを追加すると、次のようになります。

参照はRelatedProductsフィールドを通過し、コンテンツをレンダリングします。

クエリ項目を追加する

製品の子アイテムがある場合は、それをリストアップできるようにするために、クエリを使用しましょう。

クエリの子アイテムをレンダリングバリアントに追加するには:

バリアントRelated Products右クリックし、Queryをクリックして、OKをクリックします。
Variant DetailsセクションのQueryフィールドに、すべての子を検索するクエリを追加しますが、タイトルは省略します。query:./*@@templatename!='Page Data'

ここでPage contentバリアントをブログページに追加すると、次のようになります。

クエリはProductリストを通過し、コンテンツ (Product 1には3つのバリアントが含まれ、Product 2にはバリアントがありません) がレンダリングされます。
異なる製品間に分割線を追加するには、Related Productsバリアントを右クリックし、HTML Tagをクリックし、「 Line」と入力して、OKをクリックします。
Variant DetailsセクションのTagフィールドで、hrを選択します。

トークンを使用するクエリ項目を追加する

より複雑なクエリを作成できます。たとえば、類似のタグを持つ著者に対してクエリを実行する場合です。

このシナリオでは、ブログページと作成者にタグが含まれています。

メモ

このチュートリアルで説明されているシナリオを実行する場合は、作成者テンプレートがSXA _Taggable基本テンプレートを継承していることを確認する必要があります。

そして、テンプレートを継承します。

この例では、ブログ投稿ページとして同様のタグを持つすべての著者をリストするクエリを作成します。

トークンを使用するクエリ項目を作成するには:

コンテンツエディタでPresentation/Rendering Variantsに移動し、Page Contentを右クリックして、Insert 、Variant Definitionの順にクリックします。
Authors with similar interestと入力し、OKをクリックします。
バリアントAuthors with similar interest右クリックし、Fieldをクリックして、「Title」と入力し、OKをクリックします。
バリアントAuthors with similar interest右クリックし、Queryをクリックし、「 Query for authors 」と入力してOKをクリックします。
Queryフィールドで、Build Queryをクリックします。
Build Search Queryダイアログボックスで、最初に著者のテンプレートを検索します。「template」と入力し、「Authors」と入力します。
デフォルトのSXAトークンを追加することで、検索の範囲を設定できます。TaggedWithAtLeastOneTagFromCurrentPage|SxaTags
バリアントには、作成者に表示するフィールドを含むヘッダーラッパーも必要です。たとえば、名、姓、および画像のフィールドを追加します。
ここでレンダリングバリアントをブログ記事1に追加すると、ブログ記事1と同じタグManagementを持つすべての著者が一覧表示されます。

この記事を改善するための提案がある場合は、お知らせください!