Vtex Quick Cart

Siga as intruções deste documento para utilização do plugin.

1. Baixe os arquivos para o seu computador. Para isso, utilize o GIT ou o link "Baixe ZIP" desta página.

Adicione um dropdown com os produtos inseridos em seu carrinho.

Uso básico:

Adicione em seu template:

  
    <div class="tpl-cart tpl-cart-dropdown">
      <a href="/Site/Carrinho.aspx" class="cart-link">
        <span class="cart-title">Meu Carrinho</span>
          <span class="cart-summary clearfix">
            <span class="amount-items"></span>
            <span class="total-price-container"></span>
          </span>
      </a>
      <div class="cart-dropdown"></div>
    </div>
  

Adicione em seu template dentro de <script type="text/javascript"></script> ou dentro de um arquivo javascript:

  
    jQuery.vtex_quick_cart();
  

Opções

O carrinho tem opções para apresentar apenas informações básicas, como quantidade de produtos e valor total do carrinho sem o dropdown.

Carrinho sem o dropdown, ideal para páginas simples.*

Defina as opções em um objeto javascript antes de fazer sua chamada.

  
    var options = {
      dropdown: false
    }
    jQuery.vtex_quick_cart(options);
  

ou

  
    jQuery.vtex_quick_cart({
      dropdown: false
    });
  

Não se esqueça que o css (stylesheet) é com você. Afinal, cada loja tem seu próprio design.

Opções avançadas

Existem várias opções para montagem do quick cart, várias delas podem melhorar o desempenho e uma melhor customização do produto final.

  
    var options = {
      container: ".cart-dropdown",
      items: ".amount-items",
      list: ".cart-list",
      price_label: "R$ ", 
      total_price_currency: "R$ ", 
      total_price_container: ".total-price-container",
      total_price_label: "",
      cart_conclude:null,
      remove_btn:false,
      finish_order_btn: ".finish-order-btn",
      finish_order_btn_link: "/Site/Carrinho.aspx",
      finish_order_btn_text: "Finalizar compra",
      items_text: ['nenhum item','item','itens'],
      hover: ".tpl-cart",
      callback:null,
      cart_empty_cb:null,
      total_price_class: '.total-price',
      total_price_label_class: '.total-price-label',
      dropdown: true,
      show_images: true
    }
  

Refresh (recarregar)

O Vtex quick cart ainda apresenta a opção de recarregá-lo para mostragem de produtos se necessário.

Este tipo de opção é utilizado quando a página apresenta recursos de adição de produtos com um clique simples (add to cart).

Ao final de cada "add to cart", pode-se fazer uma chamada, resultando em um carrinho atualizado.

Carregue o carrinho em uma variável. O seu funcionamento será normal, porém com a opção do método "refresh".

  
    var meu_carrinho = jQuery.vtex_quick_cart();
    meu_carrinho.refresh();
  

Execute a lógica do seu "add to cart" normalmente, e ao final, execute meu_carrinho.refresh() para que o carrinho recarregue e mostre o produto adicionado.

Vtex Quick Cart em barra flutuante**

Não há nada de especial no código para esta funcionalidade, apenas um pequeno truque.

Contrua sua barra flutuante normalmente, com o css "position:fixed;" e "display:none;"

Utilize o jQuery para detectar o scroll da janela como é feito normalmente para a barra flutuante, mas adicione uma modificação no div do dropdown para ficar com "position:fixed;" e qualquer outra característica necessária para o seu layout.

Minha sugestão é a adição de uma classe que já contenha todas características para este posicionamento.

  
    jQuery(window).scroll(function(){
      // contrua a lógica que melhor aplica a sua loja

      // if(jQuery(this).scrollTop() > x)
      //  montrando barra "fade in"
      //  adicionando classe para manter o 
      //  dropdown fixed e em posição, top, etc.

      // if(jQuery(this).scrollTop() <= x)
      // esconda barra "fade out"
      // remova classe que mantem o dropdown
      // em posição.
    });
  

Obs. 1: Utilize a opção simplificada quando achar que não é necessário a mostragem dos produtos do carrinho, evitando o carregamento da lista e melhorando desempenho do quick cart.

Obs. 2: A utilização em barra flutuante depende do programador de front-end configurar o que é melhor para a loja na qual ele está trabalhando