{"section":"tutorials","requestedLocale":"pt","requestedSlug":"como-usar-a-classe-de-produto-indisponivel","locale":"pt","slug":"como-usar-a-classe-de-produto-indisponivel","path":"docs/pt/tutorials/storefront/layout/como-usar-a-classe-de-produto-indisponivel.md","branch":"main","content":"> Tutorial válido apenas para lojas CMS Portal (Legado).\n\n## O que é a classe de produto indisponível\n\nO controle de seleção de SKUs (``) 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.\n\nOu 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.\n\n__Caso um SKU com determinada especificação não esteja disponível em estoque, a loja pode informar essa indisponibilidade visualmente.__\n\nNo exemplo abaixo, os tamanhos P e G do produto não estão disponíveis.\n\n\n\n## Incluir a classe de produto indisponível\n\nQuando o controle de seleção de SKUs (``) é 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.\n\nPor 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.\n\nSe 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.\n\nVocê pode customizar seu arquivo CSS para que essa classe exiba, por exemplo, o número cortado, ou cinza, ou como você desejar. \n\n## Determinar a qual especificação será atribuída a classe\n\n> ⚠️ 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.\n\nPor exemplo, se a especificação `Tamanho` aparecer por último, ela receberá a classe de indisponibilidade.\n\nSe, neste caso, você desejasse que - em vez dela - a especificação `Faixa` recebesse a classe, bastaria inverter a ordem das especificações."}