1. レンダリングバリアント

ウォークスルー

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

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

このウォークスルーでは、関連する製品とそのすべての子項目をレンダリングするブログ記事のレンダリングバリアントを作成する方法を説明します。クエリ項目を組み合わせたレンダリングバリアントを用いてこれを実現します。また、同じタグを共有する著者リストを表示するより複雑なシナリオも説明しています。

このウォークスルーの出発点は、「ブログ投稿のレンダリングバリアント作成 」ウォークスルーで説明されているシナリオと同じです。このシナリオで説明したステップを実行するには、追加の製品リストとタグが必要です。

シナリオ

このシナリオには以下が含まれます:

  • ブログ記事を掲載するサイト。

  • 製品リスト。

    Different product variants in the content tree.

  • クエリを用いて製品リストを参照するページテンプレート:

    Page template assigned by using a query.

  • ブログページには、リストから選ばれた関連商品が掲載されています:

    Related products assigned.

  • 著者テンプレートは _taggableの基本テンプレートを引き継ぎます:

    Base template taggable inherited.

  • ブログ記事と著者には、以下のリストからタグが割り当てられています:

    Authors and their assigned tags.
    Blogs and their assigned tags.

このウォークスルーでは、以下の方法を説明します:

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

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

  1. コンテンツエディターでPresentation/Rendering Variantsに移動し、右クリックで**「ページコンテンツ**」をクリックし、「挿入」→「バリアント定義」をクリックします。

  2. Related Productsを入力してOKをクリックします。

  3. 次に、タイトルフィールドを作成するには、関連製品のバリアントを右クリックし、「挿入」をクリックし、「テキスト」をクリックし、「Title」を入力、「**OK」**をクリックします。

  4. バリアント詳細セクションのタグ欄でh3を選択し、テキスト欄でRelated Productsを入力します。

    Rendering variant for the Page Content rendering.

参照項目を追加してください

次に、ブログ記事のRelatedProductsフィールドに表示されるレンダリングバリアント参照項目を作成し、そのフィールドの内容をレンダリングします。レンダリングバリアント参照項目は参照された項目のフィールドを表示します。参照項目のフィールドを表示したい場合は、Pass through fieldフィールドでこのフィールドを定義できます。

レンダリングバリアント参照項目を作成するには:

  1. 関連製品バリアントを右クリックし、「挿入」をクリックし、「参考文献」をクリックし、「入力RelatedProducts」をクリックし、「**OK」**をクリックします。

    パススルーフィールドは、入れ子された項目からフィールド名を定義します。レンダリングバリアントは現在、関連製品フィールドを通過します。

  2. 製品名順にリストアップするには、「関連製品」バリアントを右クリックし、「 フィールド」をクリックし、「 Title」を入力し、「 **OK」**をクリックしてください。

  3. バリアント詳細セクションのタグ欄でh4を選択します。

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

    Page Content variant on the page.

    参照はRelatedProductsフィールドを通過し、以下の内容をレンダリングします:

    Related products field.

クエリ項目を追加

製品の子項目をリストアップするために、もしあればクエリを使いましょう。

クエリ子項目をレンダリングバリアントに追加するには:

  1. 右クリックで 関連製品バリアントをクリックし、「 クエリ」をクリックし、「 **OK」**をクリックします。

  2. Variant Detailsセクションのクエリ欄に、すべての子を検索しつつタイトルを省略するクエリを追加してください:query:./*@@templatename!='Page Data'

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

    SXA-related-products-query-without-line.PNG

    クエリは製品リストを通過し、内容をレンダリングします

    、製品2はバリアントなしです。

    SXA-Related-products-product-list.PNG

  3. 異なる製品間の区切り線を追加するには、「 関連製品バリアント」を右クリックし、「 HTMLタグ」をクリックし、「 Line」を入力し、「 **OK」**をクリックしてください。

  4. バリアント詳細セクションのタグ欄で、hrを選択します。

    SXA-related-products-query.PNG

トークンを使うクエリアイテムを追加してください

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

この場合、ブログページと著者にはタグが付けられます。

SXA-blog-post-1-tag-management.PNG
SXA-tags-per-author.PNG

!注このウォークスルーで説明されているシナリオを実行したい場合は、AuthorテンプレートがSXA _Taggableベーステンプレートを継承していることを確認しなければなりません。

SXA-taggable.PNG

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

SXA-blog-authors-tags.png

この例では、ブログ投稿ページに類似タグを持つすべての著者をリストアップするクエリを作成します。

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

  1. コンテンツエディターでPresentation/Rendering Variantsに移動し、右クリックで 「ページコンテンツ」をクリックし、「 挿入」→ 「バリアント定義」をクリックします。

  2. 同じ興味を持つ著者を入力して**「OK」**をクリックします。

  3. 「似た興味を持つ著者」を右クリックし、「フィールド」をクリックし、Titleを入力して「**OK」**をクリックします。

  4. 「似た興味を持つ著者」を右クリックし、「クエリ」をクリックし、「著者のためのクエリ」を入力して**「OK」**をクリックします。

  5. クエリ欄で「クエリを作成」をクリックします。

  6. 「 Build Search Query 」ダイアログボックスで、まず「Authors' template」を検索してください

    template、Authors。

  7. デフォルトのSXAトークンを追加することで検索範囲を絞ることができます

    |SxaTags

    SXA-Build-query.PNG

  8. このバリアントには、著者に表示されるフィールドを含むヘッダーラッパーも必要です。例えば、名前、姓、画像のフィールドを追加してください:

    SXA-blog-author-tags-wrapper.PNG

  9. もし今、ブログ記事1にレンダリングバリアントを追加すると、ブログ記事1と同じタグを持つすべての著者( Management)が一覧表示されます。

    SXA-authors-similar-interests.PNG
    SXA-blog-post-1-tag-management.PNG
    SXA-blog-tags-author.png
この記事を改善するための提案がある場合は、 お知らせください!