Montar un Kit Look

Kit

Montar un Kit Look

Tutorial válido solo para tiendas CMS Portal Legado.

Aprenda cómo configurar en VTEX un kit Look o Lookbook.

Antes de hablar sobre el Kit Look es importante recordarle que debe crear un Kit. Para eso, acceda al artículo Registrar kit.

Las diferencias entre el KIT y el KIT LOOK:

KIT: En un kit, los productos componentes sólo se pueden vender en el kit, o sea, no se pueden vender por separado. Esto significa que si el producto “Blusa” está en el kit “Praia”, aunque se busque el producto Blusa en el sitio, éste no se podrá vender fuera del kit – con sus demás componentes.

KIT LOOK: En un kit look, todos los productos componentes se pueden encontrar en el sitio y se pueden vender fuera del kit, o sea, incluso en la página de producto del kit look se pueden comprar los productos por separado, o todos juntos. Vea nuestra documentación de personalización del kit look.

¿Qué es el Kit Look?

Este término es muy conocido en el rubro de la Moda. Un Kit Look es un modo en el que se puede comprar varios productos visualizando solamente la pantalla de un solo producto.

${"base64":" ","img":{"width":1212,"height":720,"type":"gif","mime":"image/gif","wUnits":"px","hUnits":"px","length":3291904,"url":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/es/tutorials/catalogo/kit/como-montar-un-kit-look_1.gif"}}$

En el layout arriba se pueden seleccionar los ítems del kit que el cliente quisiera comprar y luego hacer clic en “Comprar Produtos Selecionados”.

O si prefiere, puede comprar el kit completo manteniendo todos los ítems seleccionados.

${"base64":" ","img":{"width":1212,"height":720,"type":"gif","mime":"image/gif","wUnits":"px","hUnits":"px","length":739121,"url":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/es/tutorials/catalogo/kit/como-montar-un-kit-look_2.gif"}}$

En este layout cada ítem tiene un botón de “Comprar Separadamente”.

Si prefiere comprar el kit completo, sólo tiene que hacer clic en “Comprar Look”.

Al hacer clic en comprar, independientemente del layout, todos los componentes del kit se agregarán al carrito automáticamente e individualmente, o sea, si el kit tiene 4 ítems, los 4 ítems serán agregados.

Implantación de las páginas de los kits


<div id="top-right">
                        <span id="selecione-kit">SELECIONE AS PEÇAS DO LOOK</span>
                        
                        <div class="kit clearfix">
                            <div class="kit-info">
                                <div class="kit-image">
                                    <vtex.cmc:ProductImage productIndex="1" />
                                </div>
                                <div class="tpl-right">
                                    <div class="nome-kit"><h2><vtex.cmc:productName productIndex="1" /></h2></div>
                                    <div class="skuSelection">
                                        <vtex.cmc:skuSelection changeImage="1" productIndex="1" />
                                    </div>
                                    <div class="dv-buy-button clearfix">
                                        <vtex.cmc:BuyInPage productIndex="1" />
                                    </div>
                                    <div class="preco-kit">
                                        <vtex.cmc:skuPrice productIndex="1" />
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        
                        <div class="kit clearfix">
                            <div class="kit-info">
                                <div class="kit-image">
                                    <vtex.cmc:ProductImage productIndex="2" />
                                </div>
                                <div class="tpl-right">
                                    <div class="nome-kit"><h2><vtex.cmc:productName productIndex="2" /></h2></div>
                                    <div class="skuSelection">
                                        <vtex.cmc:skuSelection changeImage="1" productIndex="2" />
                                    </div>
                                    <div class="dv-buy-button clearfix">
                                        <vtex.cmc:BuyInPage productIndex="2" />
                                    </div>
                                    <div class="preco-kit">
                                        <vtex.cmc:skuPrice productIndex="2" />
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        
                        <div class="kit clearfix">
                            <div class="kit-info">
                                <div class="kit-image">
                                    <vtex.cmc:ProductImage productIndex="3" />
                                </div>
                                <div class="tpl-right">
                                    <div class="nome-kit"><h2><vtex.cmc:productName productIndex="3" /></h2></div>
                                    <div class="skuSelection">
                                        <vtex.cmc:skuSelection changeImage="1" productIndex="3" />
                                    </div>
                                    <div class="dv-buy-button clearfix">
                                        <vtex.cmc:BuyInPage productIndex="3" />
                                    </div>
                                    <div class="preco-kit">
                                        <vtex.cmc:skuPrice productIndex="3" />
                                    </div>
                                </div>
                            </div>
                        </div>
                        
</div>

El control BuyInPage, descrito en el código arriba, sólo funcionará con la utilización del control AmountItemsInCart (en el propio template o en cualquier subtemplate relacionado).

Entienda la relación entre esos controles en Lista Completa de Controles.

changeImage=”1″: indica cuál campo va a cambiar la imagen del sku al ser seleccionado.

Este template se debe asociar a un nuevo Layout de Página de Produto que se aplicará sólo en la categoría en la que los Kits están registrados. Para no crear varios templates, simplemente inserte el mismo código con más frecuencia, cambiando el valor de productIndex.

Ejemplo 1: Si tiene un producto kit con 3 componentes y otro producto kit con 5 componentes y desea usar esta funcionalidad del Kit Look para los dos productos kits, no es necesario crear un template para cada cantidad. Usted puede crear un template con 5 o grupos de controles de los componentes (productIndex=numeroMaximo). Entendiendo que numeroMaximo es el valor del kit con mayor número de componentes.

Ejemplo 2: Cuando se usa el productIndex=0, se exhibe la información del kit en sí. En la página del producto que tenga un kit con 2 componentes, mostrará sólo los 2 componentes. Si tiene un kit con 4 componentes, exhibirá los 4.

Resumiendo, la tienda puede crear un template con la cantidad de product index que desee. En la página del producto sólo aparecerá la cantidad de componentes de cada kit.