Cenários de modificação da página

Os cenários neste tópico mostram como as alterações feitas em sua página afetam a capacidade da Adobe Target de exibir uma experiência.

O seletor do Target determina onde exibir uma experiência. Se uma página for modificada fora do Target, as alterações poderão afetar a capacidade de o Target exibir a experiência.

Durante o uso do seletor, a classe única não é equivalente à ID. O seletor sempre funciona com uma classe única. Se nenhuma classe for atribuída ao elemento, o seletor calculará o número de irmãos anteriores que têm o mesmo nome de tag.

Cenário: insira um elemento com um nome de classe diferente antes do elemento selecionado

Neste exemplo, um novo elemento foi inserido como um irmão do elemento no seletor do Target.

Há uma possibilidade de a primeira classe presente no elemento poder ser adicionada pelo JavaScript. Nesse caso, a entrega falha e a ação não é aplicada.

Elemento inserido:

<li class="kids-section">Kids</li>

Selecionado:

<li class="women-section">Women</li>

Seletor: #wrap > ul.nav:eq(0) > li.women-section:eq(0)

Resultado:

O seletor funciona como esperado, pois li.women-section:eq(0) não é afetado.

Antes:

<div id="wrap">
     <ul class="nav">
        <li class="men-section"> Men</li> <li class="women-section">Women</li>
     </ul>
</div>

Depois:

<div id="wrap">
    <ul class="nav">
        <li class="kids-section">Kids</li>
        <li class="men-section"> Men</li>       <li class="women-section">Women</li>
    </ul>
</div>

Cenário: insira um elemento com o mesmo nome de classe do elemento selecionado

Neste cenário, é feita uma tentativa de inserir uma lista quando um item em uma lista é selecionado.

Elemento inserido:

<ul class="nav">
   <li class="item"> Sale </li>
   <li> class="item"> Offers </li>
</ul>

Selecionado

<li class="women-section">Women</li>

Seletor: #wrap > ul.nav:eq(0) > li.women-section:eq(0)

Resultado:

O seletor não funciona, pois ul.nav:eq(0) fornece um elemento adicionado dinamicamente. O elemento não estará disponível e a ação não será aplicada. Quando um item de lista semelhante com a mesma classe é adicionado de modo dinâmico ou manual após a criação de uma atividade, um novo elemento é criado na primeira posição. Isso interrompe o seletor.

Antes:

<div id="wrap">
    <ul class="nav">
        <li class="men-section"> Men</li>       <li class="women-section">Women</li>
    </ul>
</div>

Depois (tentativa):

<div id="wrap">
     <ul class="nav">
        <li class="item"> Sale</li>
        <li> class="item"> Offers</li>
     </ul>
     <ul class="nav">
       <li class="men-section"> Men</li>
       <li class="women-section">Women</li>
    </ul>
</div>

Cenário: insira um elemento depois do elemento selecionado

Neste cenário, um item de lista é inserido após o elemento selecionado.

Elemento inserido:

<ul class="nav">
   <li class="men-section"> Men Clothes</li>
   <li class="women-section"> Women Clothes</li>
</ul>

Selecionado:

<li class="women-section">Women Shoes</li>

Seletor: #wrap > ul.nav:eq(0) > li.women-section:eq(0)

Resultado:

Nesse caso, insira uma lista depois do fim da lista com o item de lista selecionado funcionando conforme esperado. O novo elemento é adicionado à mesma posição do elemento selecionado em relação ao elemento pai.

Antes:

<div id="wrap">
    <ul class="nav">
        <li class="men">Men Shoes </li>       <li class="women">Women Shoes</li>
    </ul>
</div>

Depois:

<div id="wrap">
    <ul class="nav">
        <li class="men">Men Shoes </li>
        <li class="women">Women Shoes</li>
    </ul>
      <ul class="nav">
        <li class="men-section">Men Clothes</li>
        <li class="women-section"> Women Clothes</li>
    </ul>
</div>

Cenário: remova o elemento imediatamente antes do outro elemento

Neste cenário, o item de lista antes do elemento selecionado é excluído.

Elemento removido:

<li class="men-section"> Men </li>

Selecionado:

<li class="women-section">Women</li>

Seletor: #wrap > ul.nav:eq(0) > li.women-section:eq(0)

Resultado:

O elemento foi removido com êxito porque a classe do item selecionado não foi alterada.

Antes:

<div id="wrap">
    <ul class="nav">
        <li class="men-section">Men</li>
        <li class="women-section">Women</li>
    </ul>
</div>

Depois:

<div id="wrap">
    <ul class="nav">
        <li class="women-section">Women</li>
    </ul>
</div>

Cenário: remova o elemento logo após o outro elemento

Neste cenário, o item de lista depois do elemento selecionado é excluído.

Elemento removido:

<li class="kids-section">Kids</li>

Selecionado:

<li class="women-section">Women</li>

Seletor: #wrap > ul.nav:eq(0) > li.women-section:eq(0)

Resultado:

O elemento foi removido com êxito porque a classe do item selecionado não foi alterada. O elemento removido inclui uma classe única dentro de sua sub-árvore pai.

Antes:

<div id="wrap">
    <ul class="nav">
        <li class="men-section">Men</li>
        <li class="women-section">Women</li>
        <li class="kids-section">Women</li>
    </ul>
</div>

Depois:

<div id="wrap">
    <ul class="nav">
        <li class="men-section">Men</li>
        <li class="women-section">Women</li>
    </ul>
</div>

Cenário: remova o elemento selecionado

Neste cenário, o item de lista selecionado é excluído.

Elemento removido:

<li class="women-shoes">Women</li>

Selecionado:

<li class="women-shoes">Women</li>

Seletor: #wrap > ul.nav:eq(0) > li.women-section:eq(0)

Resultado:

O elemento foi removido com êxito.

Antes:

<div id="wrap">
    <ul class="nav">
        <li class="men-section">Men</li>
        <li class="women-shoes">Women</li>
    </ul>
</div>

Depois

<div id="wrap">
    <ul class="nav">
       <li class="men-section">Men</li>
    </ul>
</div>

Cenário: renomeie a classe do elemento selecionado

Neste cenário, a classe do item de lista selecionado foi alterada.

Elemento alterado:

<li class="women-section">Women</li>

Selecionado:

<li class="women-section">Women</li>

Seletor: #wrap > ul.nav:eq(0) > li.women-section:eq(0)

Resultado:

Não é possível renomear a classe do elemento porque class não foi encontrado.

Antes:

<div id="wrap">
    <ul class="nav">
        <li class="men-section">Men</li>
        <li class="women-section">Women</li>
    </ul>
</div>

Depois (tentativa):

<div id="wrap">
    <ul class="nav">
        <li class="men-section">Men</li>
        <li class="women-shoes">Women</li>
    </ul>
</div>