Show Menu
主題×

使用 Velocity 自訂設計

使用開放原始碼 Velocity 設計語言來自訂建議設計。

Velocity 概述

有關 Velocity 的資訊,請參閱 velocity.apache.orghttps://velocity.apache.org。
所有 Velocity 邏輯、語法等,均可用於建議設計。即是說,您可使用 Velocity 取代 JavaScript 來建立 for 迴圈、 if 陳述式及其他程式碼。
Recommendations mbox 或 CSV 上傳項目中任何傳送至 productPage 的變數均可在設計中顯示。這些值以下列語法加以參考:
$entityN.variable

變數名稱必須遵循 Velocity 縮寫標記法,亦即包含前置 $ 字元,後接 Velocity 範本語言 (VTL) 識別碼。VTL 識別碼的開頭必須為字母字元 (a-z 或 A-Z)。
Velocity 變數名稱僅限於下列字元類型:
  • 字母 (a-z、A-Z)
  • 數字 (0-9)
  • 連字號 ( - )
  • 底線 ( _ )
下列變數可當成 Velocity 陣列使用。因此,可透過索引逐一查看或參照。
  • entities
  • entityN.categoriesList
例如:
#foreach ($category in $entity1.categoriesList) 
<br/>$category 
#end

#if ($entities[0].categoriesList.size() >= 3 ) 
$entities[0].categoriesList[2] 
#end

如果您在設計中使用設定檔指令碼,指令碼名稱前面的 $ 必須以 \ 來轉譯。例如, \${user.script_name}
可在設計中參照 (明確寫在程式碼中或透過迴圈) 的實體數上限是 99。範本指令碼長度最多可以包含 65,000 個字元。
例如,如果想要讓範本顯示類似下方的內容︰
您可使用下列代碼:
<table style="border:1px solid #CCCCCC;"> 
 
<tr> 
 
<td colspan="3" style="font-size: 130%; border-bottom:1px solid  
#CCCCCC;"> You May Also Like... </td> 
 
</tr> 
 
<tr> 
 
<td style="border-right:1px solid #CCCCCC;"> 
 
<div class="search_content_inner" style="border-bottom:0px;"> 
 
<div class="search_title"><a href="$entity1.pageUrl"  
style="color: rgb(112, 161, 0); font-weight: bold;"> 
$entity1.id</a></div> 
 
By $entity1.message <a href="?x14=brand;q14=$entity1.message"> 
(More)</a><br/> 
 
sku: $entity1.prodId<br/> Price: $$entity1.value 
 
<br/><br/> 
 
</div> 
 
</td> 
 
<td style="border-right:1px solid #CCCCCC; padding-left:10px;"> 
 
<div class="search_content_inner" style="border-bottom:0px;"> 
 
<div class="search_title"><a href="$entity2.pageUrl"  
style="color: rgb(112, 161, 0); font-weight: bold;"> 
$entity2.id</a></div> 
 
By $entity2.message <a href="?x14=brand;q14=$entity2.message"> 
(More)</a><br/> 
 
sku: $entity2.prodId<br/> 
 
Price: $$entity2.value 
 
<br/><br/> 
 
</div> 
 
</td> 
 
<td style="padding-left:10px;"> 
 
<div class="search_content_inner" style="border-bottom:0px;"> 
 
<div class="search_title"><a href="$entity3.pageUrl"  
style="color: rgb(112, 161, 0); font-weight: bold;"> 
$entity3.id</a></div> 
 
By $entity3.message <a href="?x14=brand;q14=$entity3.message"> 
(More)</a><br/> 
 
sku: $entity3.prodId<br/> Price: $$entity3.value 
 
<br/><br/> 
 
</div> 
 
</td> 
 
</tr> 
 
</table>

如果想在變數值後新增資訊,您可使用正規註釋來完成此項作業。例如: ${entity1.thumbnailUrl}.gif
您亦可在範本中使用 algorithm.name algorithm.dayCount 當作變數,因此,一個設計便可用於測試多個條件,而條件名稱可動態地在設計中顯示。藉此,訪客即知道自己正在看「最暢銷商品」或「看過這件的人也買那件」。甚至,您可以使用這些變數來顯示 dayCount (條件中使用的資料天數,例如「過去 2 天最暢銷的商品」等)。

實務範例: 連同建議的產品一起顯示主要項目

您可以修改設計來連同其他建議的產品一起顯示主要項目。例如,您可以在建議旁邊顯示目前項目當作參考。
方法是在設計中建立一欄,此欄使用您的建議所依據的 $key 屬性,而不是 $entity 屬性。例如,主要欄的程式碼可能如下所示:
<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>

結果會產生如下的設計,其中有一欄顯示主要項目。
當您建立 Recommendations 活動時,如果主要項目取自於訪客的設定檔,例如「上次購買的項目」,則 Target 會在可視化體驗撰寫器 (VEC) 中顯示隨機產品。這是因為當您設計活動時,沒有設定檔可用。訪客檢視頁面時就會看到預期的主要項目。

案例: 以逗號分隔符號取代售價中的小數點

您可以修改設計,以歐洲和其他國家/地區採用的逗號分隔符號,取代美國採用的小數點分隔符號。
下面顯示一條件式售價範例的其中一行程式碼:
<span class="price">$entity1.value.replace(".", ",") €</span><br>

以下程式碼為完整的條件式售價範例:
<div class="price"> 
    #if($entity1.hasSalesprice==true) 
    <span class="old">Statt <s>$entity1.salesprice.replace(".", ",") €</s></span><br> 
    <span style="font-size: 10px; float: left;">jetzt nur</span> $entity1.value.replace(".", ",") €<br> #else 
    <span class="price">$entity1.value.replace(".", ",") €</span><br> #end 
    <span style="font-weight:normal; font-size:10px;"> 
                                        $entity1.vatclassDisplay 
                                        <br/> 
                                        $entity1.delivery 
                                        <br> 
                                    </span>

案例: 使用 null 檢查邏輯建立 4x2 預設 Recommendations 設計

透過 Velocity 指令碼控制實體顯示的動態大小,下列範本可因應 1 對多結果,以免在 Recommendations 傳回的相符實體不足時建立空白的 HTML 元素。最適合使用此指令碼的情況是,備份建議不具有合理意義且已啟用局部範本轉譯。
下列 HTML 片段會取代 4x2 預設設計中的現有 HTML 部分 (為了簡潔起見,此處未包含 CSS):
  • 如果第五個實體存在,指令碼會插入右 div 標記,並使用 <div class="at-table-row"> 開啟新的一列。
  • 透過 4x2,最多將可顯示八個結果,但您可以修改 $count <=8 ,將此自訂為較小或較大的清單。
  • 請注意,邏輯不會平衡多個列上的實體。例如,如果有五個或六個要顯示的實體,並不會動態變成三個在頂端、兩個在底部 (或三個在頂端、三個在底部)。開始第二列之前,頂端列會顯示四個項目。
<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>