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

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

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

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

変更前の商品情報セクションを表示しているライブ ストアフロントの商品詳細ページ。

新しい Scriban テンプレートを作成してパブリッシュした後、商品情報セクションは次のようになります。

変更後の商品情報セクションを表示しているライブ ストアフロントの商品詳細ページ。

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

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

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

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

注記

Scriban の使用方法を説明するビデオは、Discover Sitecore チャンネルにあります。

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

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

  1. コンテンツ エディターで、sitecore\Content\<テナント>\<サイト>\Presentation\Rendering Variants に移動します。

  2. [Page Content] を右クリックし、[挿入 > バリアント定義] をクリックして、[メッセージ] ダイアログ ボックスに Product Information Scriban と入力し、[OK] をクリックします。

  3. コンテンツ ツリーで、新しく作成された [Product Information Scriban] アイテムを右クリックし、[挿入] > [Scriban] をクリックして、[メッセージ] ダイアログ ボックスで [OK] をクリックして、デフォルトの名前 (Scriban) を受け入れます。

  4. [コンテンツ] タブで、[VariantDetails] セクションの [テンプレート] フィールドで、以下のコードを入力します。

    RequestResponse
    <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. リボン メニューの [保存] をクリックしてから F9 を押して、変更をパブリッシュします。

  6. [サイト パブリッシュ] ダイアログ ボックスで、[パブリッシュ] セクションの [スマート パブリッシュ] オプションをクリックして、パブリッシュ言語とターゲットを指定し、[パブリッシュ] をクリックします。

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

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

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

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

    商品情報レンダリング バリアントが選択され、[ページ コンテンツ] ダイアログ ボックスが表示されます。

  3. [ツールボックス] の [ページ コンテンツ] セクションで、[ページ コンテンツ] レンダリングを選択して、在庫ステータスの上のページにドラッグし、リボン メニューの [保存] をクリックします。

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

    変更を加えたエクスペリエンス エディターでの [商品情報] セクション。

  5. リボンの [保存] をクリックして、変更をパブリッシュします。

    変更が加えられたライブ ストアフロントの商品情報セクション。

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

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

  1. Scriban テンプレートにロジックを追加して、空のフィールド ([商品番号]、[機能]、[色] など) を表示しないようにするには、/sitecore/Content/Sitecore/Storefront/Presentation/Rendering Variants/Page Content/Product Information Scriban/Scriban に移動して、以下のコードを Scriban テンプレートにコピーして、前のコードを置き換えます。

    RequestResponse
    {{ 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. リボン メニューの [保存] をクリックしてから F9 を押して、変更をパブリッシュします。

    これで、ライブ ストアフロント サイトでは、コンテンツのないラベルは表示されなくなりました。

何かフィードバックはありますか?

この記事を改善するための提案がある場合は、