Store - Instalar estrelas com paginação.md

#Como funciona o script de rate para paginação

Table of Contents

• 1. Sobre o _productContainer
• 2. Sobre o _watchSubtree
• 3. Testando o widget

Exemplo de script

    var _trustvox_shelf_rate = _trustvox_shelf_rate || [];
    _trustvox_shelf_rate.push(['_storeId', '944']);
    _trustvox_shelf_rate.push(['_productContainer', '.prateleira']);
    _trustvox_shelf_rate.push(['_watchSubtree', true]);
    
    (function() {
        var tv = document.createElement('script');
        tv.type = 'text/javascript'; tv.async = true;
        tv.src = '//s3-sa-east-1.amazonaws.com/trustvox-rate-widget-js/widget.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(tv, s);
    })();

Sobre o _productContainer

Esta configuração é usada para os casos em que há uma paginação de javascript na página. O widget monitora essa div e, quando novos elementos são adicionados, realiza uma nova busca por produto.

Detalhes

• Os produtos tem que ser adicionados diretamente a esta div. Em divs aninhadas precisa de uma config a mais ( ver mais a frente )
• Também não funciona se a div é substuída na paginação.

Exemplo de página

<div class="prateleira">
  <ul class="product-list">
    etc
  </ul>
</div>

A principio, utilizar o _productContainer com a class .prateleira pode parecer a melhor opcão, mas o caso real é um pouco mais complicado que isso.

1. Caso os produtos novos sejam adicionados como <li> em .product-list

   • _productContainer será o .product-list já que os produtos são adicionados diretamente a esse elemento

2. Caso os produtos sejam adicionados substituindo a div inteira .product-list

   • _productContainer será .prateleira já que os produtos são adicionados diretamente, substituindo o <ul>

3. Caso não seja possível achar um elemento em que o produtos sejam adicionados direamente ( acontece em páginas em que os templates variam muito )

   • Ver mais a frente o _watchSubtree

Sobre o _watchSubtree

Em casos em que os templates de página variam muito, talvez não seja possível encontrar uma elemento comum em que todos os produtos sejam adicionados. Dai a solução é procurar um elemento mais a cima na árvore e setar o _watchSubtree para true.

Com o _watchSubtree ligado, o widget vai observar o elemento e todos os filhos dele.

<div class="prateleira">
  <div class="aninhamento">
    <ul class="product-list">
      etc
    </ul>
  </div>
</div>

Por exemplo, com _productContainer igual a .prateleira e com o _watchSubtree igual a true. O produto pode ser adicionado como <li> em .product-list que o widget será capaz de detectar essa mudança. Isso não seria verdade caso o _watchSubtree fosse false.

Mas por que não usar o _watchSubtree o tempo todo ? Performance. Observar muitos elementos ao mesmo tempo pode gerar várias buscas desnecessárias. Idealmente, devemos evitar essa configuração.

Testando o widget

Screencast: parte 1, parte 2, parte 3

• Procurar a div ideal?

  • Inspecionar o elmento da lista de produtos e observar onde novos produtos são adicionados

• Testar novas configurações ?

  • Colocar o debugger antes da inicialização do widget
  • Rodar no console _trustvox_shelf_rate[1] = ["_productContainer", "novo-elemento"]

• Paginação não funcionou, como determinar se o problema é no _productContainer ou é um bug no widget?

  • Rodar no console TrustvoxRatesWidget.fillRates() Caso as estrelinhas não apareçam,

  provavelmente é um bug no widget de Rate