Montar um Kit Look

Aparência da Loja

Débora Ferreira

Débora Ferreira

Última atualização

Antes de falarmos sobre o Kit Look, é importante lembrar que você deve saber criar um Kit. Para isso, acesse o artigo Como criar Kit.

As diferenças entre o KIT e o KIT LOOK são:

KIT: Em um kit, os produtos componentes estão associados formando um único pacote. Ou seja, na página do produto Kit, os componentes não podem ser vendidos separadamente. Isto significa que, caso o componente "Blusa" e o componente "Sandália" estejam no kit "Praia", ao buscar por esses produtos de forma separada na loja e adicioná-los ao carrinho, o cliente estará escolhendo os produtos e não o KIT.

Ou seja, o Kit é um novo produto composto por outros que podem, ou não, estar disponíveis para compra separada.

KIT LOOK: Em um kit look, todos os produtos componentes podem ser encontrados no site e vendidos fora do kit. Até mesmo na página de produto do kit look é possível comprar os itens separadamente ou todos juntos. O cliente encara um Kit Look como uma sugestão.

O que é o Kit Look?

Esse termo é muito conhecido no segmento de Moda e Mobiliário. Um Kit Look é um modo que você consegue comprar vários produtos, visualizando apenas a tela de um produto.

No layout acima, é possível selecionar os itens do kit que o cliente gostaria de comprar e em seguida clicar em “Comprar Produtos Selecionados”.

Ou se preferir comprar o kit completo, basta manter todos os itens selecionados.

Nesse layout cada item possui um botão de “Comprar Separadamente”.

Caso prefira comprar o kit completo, basta clicar em “Comprar Look”.

Ao clicar em "Comprar Look", independente do layout, todos os componentes do kit serão adicionados no carrinho automaticamente e individualmente. Por exemplo, em um kit que possua 4 itens, todos eles serão adicionados.

No layout é possível definir a quantidade de itens default para cada componente.

Implementação da página dos Kits

<div class="selectSku skuSelection">
  <!-- Kit product 01 -->
  <div class="kit clearfix">
    <!-- /infoKit -->
      <div class="price clearfix">
        <h2><vtex.cmc:productName productIndex="1" /></h2>
        <!-- /tpl-left -->
        <div class="tpl-left">
          <!-- /skuSelection -->
          <div class="skuSelection clearfix">
            <!-- /exibicao de cor -->
            <div class="viewColor">
              <div class="title"></div>
            </div>
            <vtex.cmc:skuRichSelection changeImage="1" productIndex="1" />
          </div>
          <!-- /dv-buy-button -->
          <div class="dv-buy-button clearfix">
            <vtex.cmc:BuyInPage productIndex="1"/>
          </div>
        </div>
        <div class="tpl-right contentpreco">
          <div class="tpl-qtd">
            <span>Selecione a quantidade</span>
          </div>
          <vtex.cmc:skuPrice productIndex="1"/>
        </div>
      </div>
      <div class="container-sku-selection">
        <div class="loadAjax" style="display:none;"></div>
        <div class="bg"></div>
        <div class="container">
          <div class="close"></div>
          <h2>Atenção!</h2>
          <vtex.cmc:skuRichSelection changeImage="1" productIndex="1" />
          <div class="comprar dv-buy-button clearfix">
            <vtex.cmc:BuyInPage productIndex="1"/>
          </div>
        </div>
      </div>
    </div>
    <!-- Kit product 02 -->
    <div class="kit clearfix">
      <!-- /infoKit -->
      <div class="price clearfix">
        <h2><vtex.cmc:productName productIndex="2" /></h2>
        <!-- /tpl-left -->
        <div class="tpl-left">
          <!-- /skuSelection -->
          <div class="skuSelection clearfix">
            <!-- /exibicao de cor -->
            <div class="viewColor">
              <div class="title"></div>
            </div>
            <vtex.cmc:skuRichSelection changeImage="1" productIndex="2" />
          </div>
          <!-- /dv-buy-button -->
          <div class="dv-buy-button clearfix">
            <vtex.cmc:BuyInPage productIndex="2"/>
          </div>
        </div>
        <div class="tpl-right contentpreco">
          <div class="tpl-qtd">
            <span>Selecione a quantidade</span>
          </div>
          <vtex.cmc:skuPrice productIndex="2"/>
        </div>
      </div>
      <div class="container-sku-selection">
        <div class="loadAjax" style="display:none;"></div>
        <div class="bg"></div>
        <div class="container">
          <div class="close"></div>
          <h2>Atenção!</h2>
          <vtex.cmc:skuRichSelection changeImage="1" productIndex="2" />
          <div class="comprar dv-buy-button clearfix">
            <vtex.cmc:BuyInPage productIndex="2"/>
          </div>
        </div>
      </div>
  </div>
</div>

O controle BuyInPage, descrito no código acima, só funcionará com a utilização do controle AmountItemsInCart (no próprio template ou em qualquer sub-template relacionado).

Entenda a relação entre esses controles em Lista Completa de Controles.

changeImage=”1″: indica qual o campo vai mudar a imagem do SKU ao ser selecionado.

Este template deve ser associado a um novo Layout de Página de Produto, que será aplicado apenas na categoria onde os Kits estão cadastrados. Para criar uma nova página de produto selecione a pasta "Produto" e clique em "novo layout".

2017-03-09 13_40_22-Index

Existe um limite de exibição de até 12 componentes para uma página de kit look. Para que não seja necessário criar vários templates diferentes, basta inserir mais vezes o mesmo código acima - alterando o valor de productIndex.

Exemplo: Se você possui um produto kit com 3 componentes e outro com 5 componentes, e desejar utilizar esta funcionalidade do Kit Look para os dois produtos kits, não é necessário criar um template para cada quantidade. Você pode criar um template com 5 grupos de controles dos componentes (productIndex=numerototal).

Quando utilizado o productIndex=0, são exibidas as informações do Kit em si. Na página do produto que tiver um kit com 2 componentes, serão mostrados apenas os 2 componentes. Se tiver um kit com 5 componentes, exibirá os 5.

Resumindo, a loja pode criar um template com a quantidade de product index que desejar. Aparecerá, na página do produto, apenas a quantidade de componentes de cada kit.


Este artigo foi útil?