Ops! Esse email nao possui permissão para abertura de ticket. Por favor, entre em contato com o responsável pela sua loja para providenciar o acesso.

Como montar um Kit Look

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 só podem ser vendidos no kit, ou seja, não podem ser vendidos separadamente. Isto significa que caso o produto “Blusa” esteja no kit “Praia”, mesmo buscando pelo produto Blusa no site, ele não poderá ser vendido fora do kit - com seus demais componentes.

KIT LOOK: Em um kit look, todos os produtos componentes podem ser encontrados no site e vendidos fora do kit, ou seja, até mesmo na página de produto do kit look é possível comprar os itens separadamente, ou todos juntos. Veja nossa documentação de personalização do kit look.

O que é o Kit Look?

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

Exemplos:

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, 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.

 

Implatantação das páginas 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>

 

IMPORTANTE:

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:

É possível adicionar ao carrinho quantos componentes desejar.

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 ou 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.



Tem mais dúvidas? Envie uma solicitação

Comentários

Powered by Zendesk