Velocity テンプレートでの数値の操作

デフォルトでは、Velocity テンプレートは、すべてのエンティティ属性を文字列値として扱います。 数学演算を実行したり、別の数値と比較したりするために、エンティティ属性を数値として扱うことができます。 エンティティ属性を数値として扱うには、次の手順に従います。

  1. ダミー変数を宣言し、任意の整数値または double 値に初期化します。
  2. 使用するエンティティ属性が空白でないことを確認します(Target Recommendations のテンプレートパーサーでテンプレートを検証および保存するために必要です)。
  3. 手順 1 で作成したダミー変数の parseInt または parseDouble メソッドにエンティティ属性を渡し、文字列を整数値または倍精度値に変換します。
  4. 新しい数値に対して数学演算または比較を実行します。

例:割引価格の計算

値引きを適用するために、品目の表示価格を 0.99 ドル減らすとします。これを実行するには、以下のアプローチを使用します。

#set( $double = 0.1 )

#if( $entity1.get('priceBeforeDiscount') != '' )
    #set( $discountedPrice = $double.parseDouble($entity1.get('priceBeforeDiscount')) - 0.99 )
    Item price: $$discountedPrice
#else
    Item price unavailable
#end

例:項目の評価に応じて表示する星の数の選択

項目の顧客評価の平均値に基づいて適切な数の星を表示するとします。 これを実行するには、以下のアプローチを使用します。

#set( $double = 0.1 )

#if( $entity1.get('rating') != '' )
    #set( $rating = $double.parseDouble($entity1.get('rating')) )
    #if( $rating >= 4.5 )
        <img src="5_stars.jpg">
    #elseif( $rating >= 3.5 )
        <img src="4_stars.jpg">
    #elseif( $rating >= 2.5 )
        <img src="3_stars.jpg">
    #elseif( $rating >= 1.5 )
        <img src="2_stars.jpg">
    #else
        <img src="1_star.jpg">
    #end
#else
    <img src="no_rating_default.jpg">
#end

例:項目の長さ(分)に基づく時間と分単位での時間の計算

分単位で保存したムービーの長さを時間と分の単位で表示するとします。これを実行するには、以下のアプローチを使用します。

#if( $entity1.get('length_minutes') )
#set( $Integer = 1 )
#set( $nbr = $Integer.parseInt($entity1.get('length_minutes')) )
#set( $hrs = $nbr / 60)
#set( $mins = $nbr % 60)
#end

重要品目と推奨商品の表示

他の推奨商品と並べて重要品目を表示するようにデザインを変更することができます。例えば、レコメンデーションの隣に参考のため現在の品目を表示してみてはどうでしょうか。

これを行う際のレコメンデーションは、$entity 属性ではなく、$key 属性を使用するデザインに列を作成することです。例えば、重要列のコードは次のようになります。

<div class="at-table-column">
   <a href="$key.pageURL">
      <img src=$key.thumbnailUrl" class="at-thumbnail"/>
      <br/><h3>$key.name</h3>
      <br/><p class="at-light">$key.message</p>
      <br/><p class="at-light">$key.value</p>
   </a>
</div>

結果は次のようなデザインになります。1 列が重要品目を表示しています。

rec_key image

Recommendations アクティビティの作成時に、主要項目が訪問者のプロファイルから取得された項目(「最後に購入された項目」など)の場合 Target、Visual Experience Composer (VEC)にランダムな製品が表示されます。 これは、アクティビティをデザインしている間は、プロファイルを利用できないためです。訪問者がページを表示すると、期待された重要品目が表示されます。

文字列値での置換の実行

デザインを変更して、文字列内の値を置き換えることができます。 例えば、米国で使用されている小数点の区切り文字を、ヨーロッパや他の国で使用されているコンマ区切り文字に置き換えます。

次のコードは、条件付き販売価格の例にある 1 行を示しています。

<span class="price">$entity1.value.replace(".", ",") &euro;</span><br>

以下のコードは、販売価格の条件全体の例です。

<div class="price">
    #if($entity1.hasSalesprice==true)
    <span class="old">Statt <s>$entity1.salesprice.replace(".", ",") &euro;</s></span><br>
    <span style="font-size: 10px; float: left;">jetzt nur</span> $entity1.value.replace(".", ",") &euro;<br> #else
    <span class="price">$entity1.value.replace(".", ",") &euro;</span><br> #end
    <span style="font-weight:normal; font-size:10px;">
                                        $entity1.vatclassDisplay
                                        <br/>
                                        $entity1.delivery
                                        <br>
                                    </span>

テンプレートサイズのカスタマイズと空白値の確認

エンティティ表示の動的サイズ変更を制御する Velocity スクリプトを使用して、以下のテンプレートを 1 対多の結果に対応させて、Recommendations から返されたエンティティが十分でない場合に空のHTML要素が作成されるのを回避します。 このスクリプトは、バックアップのレコメンデーションが理解できず、Partial Template Rendering が有効になっているシナリオに最適です。

以下の HTML スニペットは、4x2 デフォルトデザインの既存の HTML 部分を置き換えます(ここでは、簡潔にするために CSS は含まれません)。

  • 5 番目のエンティティが存在する場合、スクリプトは div 終了タグを挿入し、<div class="at-table-row"> で新しい行を開始します。
  • 4x2 の場合、表示される最大の結果は 8 ですが、これは $count <=8 を変更することで、より小さい、または大きいリスト用にカスタマイズできます。
  • このロジックは、複数の行にあるエンティティのバランスを取らないことに注意してください。例えば、表示するエンティティが 5 個または 6 個ある場合、動的に上に 3 個、下に 2 個(または上に 3 個、下に 3 個)にはなりません。上の行に 4 項目表示してから 2 番目の行が開始します。
<div class="at-table">
  <div class="at-table-row">
    #set($count=1)
    #foreach($e in $entities)
        #if($e.id != "" && $count < $entities.size() && $count <=8)
            #if($count==5)
                </div>
                <div class="at-table-row">
            #end
            <div class="at-table-column">
                <a href="$e.pageUrl"><img src="$e.thumbnailUrl" class="at-thumbnail" />
                    <br/>
                    <h3>$e.name</h3>
                    <br/>
                    <p class="at-light">$e.message</p>
                    <br/>
                    <p class="at-light">$$e.value</p>
                </a>
            </div>
            #set($count = $count + 1)
        #end
    #end
  </div>
</div>

Target