1. レンダリング (Scriban)

チュートリアル : 新しいScribanテンプレートの作成

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

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

Scribanテンプレート・コードを変更して、ライブ・ストアフロントでのコンテンツのレンダリング方法を変更することができます。このチュートリアルでは、Storefrontサイト テンプレートとMaster_Habitatカタログを使用して、PDPの製品情報セクションを変更する簡単な例を示します。既定では、次のようになります。

Product Detail Page on the live storefront showing product information section before change.

新しいScribanテンプレートを作成して公開すると、プロダクション情報セクションは次のようになります。

Product Detail Page on the live storefront showing product information section after change.

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

  • 新しいScribanテンプレートを作成する

  • 新しいレンダリング バリアントをパーシャル デザインに追加します

  • Scribanテンプレート コードにロジックを追加する

メモ

Scribanの使用方法を説明するビデオは、Discover Sitecoreチャネルでご覧いただけます。

新しいScribanテンプレートを作成する

新しいScribanテンプレートを作成するには:

  1. コンテンツ エディタで、sitecore\Content\<tenant>\<site>\Presentation\Rendering Variantsに移動します。

  2. Page Contentを右クリックし、Insert, Variant Definitionをクリックして、Messageダイアログボックスに「Product Information Scriban」と入力し、OKをクリックします。

  3. コンテンツ ツリーで、新しく作成した 製品情報Scriban アイテムを右クリックしてInsert > Scribanをクリックし、Messageダイアログ ボックスでOKをクリックして既定の名前 (Scriban) を受け入れます。

  4. ContentタブのVariantDetailsセクションのTemplateフィールドに、次のコードを入力します。

    <div class="product-name">
	<h1>{{i_item.DisplayName}}</ha>
 </div>

    <div class="product-number">
<label class="h5">{{sc_translate 'Item Number'}}:</label>
<span>{{i_item.ItemNumber}}</span>
</div>
    

    <div class="product-description">
<label class="h5">{{sc_translate 'Description'}}:</label>
<span>{{i_item.Description}}</span>
</div>
    

    <div class="product-features">
<label class="h5">{{sc_translate 'Features'}}:</label>
<span>{{i_item.Features}}</span>
</div>
    

    <div class="product-brand">
<label class="h5">{{sc_translate 'Brand'}}:</label>
<span>{{i_item.Brand}}</span>
</div>
    

    <div class="product-Color">
<label class="h5">{{sc_translate 'Color'}}:</label>
<span>{{i_item.Color}}</span>
</div>

  5. リボン メニューでSaveをクリックし、F9キーを押して変更内容を公開します。

  6. Publish Siteダイアログボックスの「Publishing」セクションで、「Smart publish」オプションをクリックし、公開言語とターゲットを指定して、「Publish」をクリックします。

新しいレンダリング バリアントをパーシャル デザインに追加します

新しいレンダリングバリアントをパーシャルデザインに追加するには:

  1. コンテンツ エディターで /sitecore/Content/Sitecore/Storefront/Presentation/Partial Designsに移動し、Default Main Product Page Contentを右クリックしてExperience Editorをクリックします。

  2. エクスペリエンス エディターで、製品情報レンダリングをクリックし、ツールバーの 削除 (X) をクリックします。

    Product Information rendering variant selected and Page Content dialog box displayed.

  3. ToolboxのPage Contentセクションで、レンダリングPage Contentを選択し、ストック ステータスの上のページにドラッグして、リボン メニューのSaveをクリックします。

  4. 追加したページ コンテンツ レンダリングをクリックし、VariantリストからProduct Information Scribanをクリックします。新しいフィールドが表示されます。

    Product Information section in the Experience Editor with changes.

  5. リボンのSaveをクリックし、変更内容を公開します。

    Product Information section on the live storefront with changes.

Scribanテンプレート コードにロジックを追加する

Scribanテンプレート コードにロジックを追加するには:

  1. 空のフィールド ( Item Number、Features、Colorなど) が表示されないようにScribanテンプレートにロジックを追加するには、/sitecore/Content/Sitecore/Storefront/Presentation/Rendering Variants/Page Content/Product Information Scriban/Scribanに移動し、次のコードをScribanテンプレートにコピーして、前のコードを置き換えます。

    {{ if o_pagemode.is_experience_editor }}
<div class="product-name">
<h1>Lorem ipsum dolor sit amet</h1>
</div>
<div class="product-number">
<label class="h5">{{ sc_translate 'Item Number' }}:</label>
<span>Lorem ipsum dolor sit amet</span>
</div>
<div class="product-description">
<label class="h5">{{ sc_translate 'Description' }}:</label>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</span>
</div>
<div class="product-features">
<label class="h5">{{ sc_translate 'Features' }}:</label>
<span>Lorem ipsum dolor sit amet</span>
</div>
<div class="product-brand">
<label class="h5">{{ sc_translate 'Brand' }}:</label>
<span>Lorem ipsum dolor sit amet</span>
</div>
<div class="product-Color">
<label class="h5">{{ sc_translate 'Colour' }}:</label>
<span>Lorem ipsum dolor sit amet</span>
</div>
{{ end }}
    

    <div class="product-name">
<h1>{{ i_item.DisplayName }}</h1>
</div>
{{ if i_item.ItemNumber | string.size > 0 }}
<div class="product-number">
<label class="h5">{{ sc_translate 'Item Number' }}:</label>
<span>{{ i_item.ItemNumber }}</span>
</div>
{{ end }}
    

    {{ if i_item.Description | string.size > 0 }}
<div class="product-description">
<label class="h5">{{ sc_translate 'Description' }}:</label>
<span>{{ i_item.Description }}</span>
</div>
{{ end }}
    

    {{ if i_item.Features | string.size > 0 }}
<div class="product-features">
<label class="h5">{{ sc_translate 'Features' }}:</label>
<span>{{ i_item.Features }}</span>
</div>
{{ end }}
    

    {{ if i_item.Brand | string.size > 0 }}
<div class="product-brand">
<label class="h5">{{ sc_translate 'Brand' }}:</label>
<span>{{ i_item.Brand }}</span>
</div>
{{ end }}
    

    {{ if i_item.Color | string.size > 0 }}
<div class="product-Color">
<label class="h5">{{ sc_translate 'Colour' }}:</label>
<span>{{ i_item.Color }}</span>
</div>
{{ end }}

  2. リボン メニューのSaveをクリックし、F9キーを押して変更内容を公開します。

    現在、ライブストアフロントサイトでは、コンテンツがないラベルは表示されません。

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