[Premium]{class="badge positive" title="Consulte o que está incluído no Target Premium."}

Personalizar um design usando o Velocity

Use a linguagem de design de código aberto Velocity para personalizar designs de recomendação no Adobe Target Recommendations.

Visão geral de Velocity section_C431ACA940BC4210954C7AEFF6D03EA5

Informações sobre Velocity podem ser encontradas em https://velocity.apache.org.

Toda a lógica, sintaxe etc. do Velocity podem ser usados para um design de recomendação. Isso significa que você pode criar loops for, instruções if e outros códigos usando Velocity em vez do JavaScript.

Os atributos de entidade enviados a Recommendations na mbox productPage ou no carregamento de CSV podem ser exibidos em um design, com exceção dos atributos de "valores múltiplos". Qualquer tipo de atributo pode ser enviado; no entanto, Target não passa atributos do tipo "multi-value" como uma matriz sobre a qual um modelo pode iterar (por exemplo, entityN.categoriesList).

Esses valores são referenciados com a seguinte sintaxe:

$entityN.variable

Os nomes de atributos de entidade devem seguir a notação abreviada Velocity, que consiste em um caractere $ à esquerda, seguido por um Identificador de VTL (Linguagem de Modelo) Velocity. O identificador VTL deve começar com um caractere alfanumérico (a-z ou A-Z).

Os nomes dos atributos de entidade do Velocity estão restritos aos seguintes tipos de caracteres:

Os atributos a seguir estão disponíveis como Velocity matrizes. Como tal, eles podem ser iterados ou referenciados por meio do índice.

Por exemplo:

#foreach ($category in $entity1.categoriesList)
<br/>$category
#end

Ou

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

Para obter mais informações sobre Velocity variáveis (atributos), consulte https://velocity.apache.org/engine/releases/velocity-1.7/user-guide.html#variables.

Se você usar um script de perfil em seu design, o $ precedente ao nome do script deve ser evitado com um \ (barra invertida). Por exemplo:

\${user.script_name}

Por exemplo, se você deseja um design que exibe algo semelhante a isto:

é possível usar o seguinte código:

<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>

Você também pode usar algorithm.name e algorithm.dayCount como atributos de entidade em designs, assim, um design pode ser usado para testar vários critérios e o nome do critério pode ser exibido de forma dinâmica no design. Isso mostra ao visitante que ele ou ela está olhando para os "mais vendidos" ou "pessoas que viram isso compraram aquilo." Você ainda pode usar esses atributos para exibir o dayCount (número de dias dos dados usados nos critérios, como "mais vendidos nos últimos dois dias" etc.

Trabalhando com números em modelos Velocity

Por padrão, os modelos Velocity tratam todos os atributos de entidade como valores de cadeia de caracteres. Talvez você queira tratar um atributo de entidade como um valor numérico para executar uma operação matemática ou compará-lo a outro valor numérico. Para tratar um atributo de entidade como um valor numérico, siga estas etapas:

Exemplo: Calcular um preço com desconto

Suponha que você queira reduzir o preço exposto de um item em US$ 0,99 para aplicar um desconto. Você poderia usar a seguinte abordagem para obter esse resultado:

#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

Exemplo: Escolher o número de estrelas para exibir com base na classificação de um item

Suponha que você deseja exibir um número apropriado de estrelas com base na média numérica das classificações atribuídas por clientes para um item. Você poderia usar a seguinte abordagem para obter esse resultado:

#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

Exemplo: Calcular o tempo em horas e minutos com base na duração em minutos de um item

Suponha que você armazene a duração de um filme em minutos, mas deseja exibi-la em horas e minutos. Você poderia usar a seguinte abordagem para obter esse resultado:

#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

Exibir um item principal com produtos recomendados section_7F8D8C0CCCB0403FB9904B32D9E5EDDE

Você pode modificar seu design para mostrar seu item principal ao lado de outros produtos recomendados. Por exemplo, você pode querer mostrar o item atual para referência ao lado das recomendações.

Para fazer isso, crie uma coluna em seu design que use o atributo $key no qual você está baseando sua recomendação, em vez do atributo $entity. Por exemplo, o código da sua coluna chave pode ter esta aparência:

<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>

O resultado é um design como o seguinte, em que uma coluna mostra o item chave.

Ao criar sua atividade do Recommendations, se o item chave for obtido do perfil do visitante, como "último item comprado", o Target exibe um produto aleatório no Visual Experience Composer (VEC). Isso ocorre porque um perfil não está disponível enquanto você projeta a atividade. Quando os visitantes visualizam a página, eles verão o item chave esperado.

Executar substituições em um valor de sequência. section_01F8C993C79F42978ED00E39956FA8CA

Você pode modificar o design para substituir valores em uma sequência de caracteres. Por exemplo, a substituição do ponto decimal usado nos Estados Unidos pela vírgula usada na Europa e em outros países.

O código a seguir mostra uma única linha em um exemplo condicional do preço de venda:

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

O código a seguir é um exemplo condicional completo de um preço de venda:

<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>

Personalizar o tamanho do modelo e procurar valores em branco default

Usando um script Velocity para controlar o dimensionamento dinâmico da exibição da entidade, o modelo a seguir acomoda um resultado de 1 para muitos para evitar a criação de elementos de HTML vazios quando não forem retornadas entidades correspondentes suficientes de Recommendations. Este script é mais adequado para cenários nos quais as recomendações reserva não fazem sentido e em que o Partial Template Rendering está habilitado.

O trecho HTML a seguir substitui a porção HTML existente no design 4 x 2 padrão (o CSS não está incluído aqui por motivos de brevidade):

<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>