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

KIT: Em um kit, os produtos componentes estão associados formando um único pacote, ou seja, ná 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 disponiveis 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, você pode comprar o kit completo mantendo 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, ou seja, caso o kit possua 4 itens, os 4 itens 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”.

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 n-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 produto kit 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, mostrará 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.