Tutorial válido apenas para lojas CMS Portal Legado.

O controle de seleção de SKUs (<vtex.cmc:skuSelection />) permite que o usuário da loja selecione um dos SKUs de um produto. Geralmente é aplicado no carrinho, para que o cliente da loja escolha, por exemplo, uma camisa entre as opções de tamanho P, M ou G; uma geladeira de 110v ou 220v; ou um teclado branco ou preto.

Ou seja, dada uma especificação do SKU (tamanho, voltagem, cor etc.), o seletor de SKU exibe as opções de valores disponíveis para escolha do usuário da loja.

Caso um SKU com determinada especificação não esteja disponível em estoque, a loja pode informar essa indisponibilidade visualmente.

No exemplo abaixo, os tamanhos P e G do produto não estão disponíveis.

Quando o controle de seleção de SKUs (<vtex.cmc:skuSelection />) é incluído em uma página de produto, a classe de produto indisponível passa a ser automaticamente adicionada sempre que um SKU estiver indisponível.

Por exemplo: um cliente da sua loja entrou na página do produto Calça Jeans, e para esse produto estão disponíveis em estoque os SKUs com especificações de tamanho 38 e 40, mas não o de tamanho 42.

Se o template da sua página de produto atualmente ativa tem o controle de seleção de SKUs, o SKU com especificação de tamanho 42 receberá automaticamente a classe de indisponibilidade.

Você pode customizar seu arquivo CSS para que essa classe exiba, por exemplo, o número cortado, ou cinza, ou como você desejar.

A classe de produto indisponível apenas é atribuída à especificação que aparece por último na lista de especificações do SKU, no módulo Catalog.

Por exemplo, se a especificação Tamanho aparecer por último, ela receberá a classe de indisponibilidade.

Se, neste caso, você desejasse que - em vez dela - a especificação Faixa recebesse a classe, bastaria inverter a ordem das especificações.