Na página do produto, o cliente pode escolher a quantidade de ítens que deseja comprar de um kit adicionando-os ao carrinho um única vez. Acompanhe os passos abaixo.

Passo 1: O cliente entra na página do produto e seleciona os componentes do kit que deseja comprar. No exemplo abaixo, o cliente selecionou a cor branca e o tamanho 40 para o sutiã e a cor branca e o tamanho P para a calcinha.

Passo 2: No box ao lado, o cliente escolhe a quantidade dos componentes.

Passo 3: Ao clicar em “Finalizar Compra”, o cliente será redirecionado à página do carrinho.

Para configurar essa de Kit Look, é necessário criar um novo Template de Página.

O XTHML do Template deve ser montado da seguinte forma:

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

    <div>

<table>
            <tr>
                <td><vtex.cmc:productName productIndex="1" /></td>
                <td><vtex.cmc:ProductImage productIndex="1" /></td>
                <td><vtex.cmc:skuRichSelection jumpToCart="false" changeImage="1"  productIndex = "1" /></td>
                <td><vtex.cmc:BuyInPage productIndex = "1"/></td>
                <td><vtex.cmc:skuPrice productIndex="1" /></td>
            </tr>
            <tr>
                <td><vtex.cmc:productName productIndex="2" /></td>
                <td><vtex.cmc:ProductImage productIndex="2" /></td>
                <td><vtex.cmc:skuRichSelection jumpToCart="false" changeImage="1"  productIndex = "2" /></td>
                <td><vtex.cmc:BuyInPage productIndex = "2"/></td>
                <td><vtex.cmc:skuPrice productIndex="2" /></td>
            </tr>
.
.
.
.
.
         </table>

</div>

<div>
     <table>
            <tr>
                <td><vtex.cmc:productName productIndex="1" /></td>
                <td><vtex.cmc:ProductDescription productIndex="1" /></td>
                <td><vtex.cmc:productDescriptionShort productIndex="1" /></td>
                <td><vtex.cmc:productSpecification  productIndex="1" /></td>
            </tr>
            <tr>
                <td><vtex.cmc:productName productIndex="2" /></td>
                <td><vtex.cmc:ProductDescription productIndex="2" /></td>
                <td><vtex.cmc:productDescriptionShort productIndex="2" /></td>
                <td><vtex.cmc:productSpecification  productIndex="2" /></td>
            </tr>
            .
.
.
.
.
        </table>

É 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).

<tr>

                <td><vtex.cmc:productName productIndex="1" /></td>
                <td><vtex.cmc:ProductImage productIndex="1" /></td>
                <td><vtex.cmc:skuRichSelection jumpToCart="false" changeImage="1"  productIndex = "1" /></td>
                <td><vtex.cmc:BuyInPage productIndex = "1"/></td>
                <td><vtex.cmc:skuPrice productIndex="1" /></td>
            </tr>