Tutorial valid only for Legacy CMS Stores.

The SKU selection control (<vtex.cmc:skuSelection />) allows the store user to select one of multiple SKUs for a product. Usually it's applied to the cart, so that the customer chooses, for example, a shirt between the size options S, M or L; a 110v or 220v refrigerator; or a white or black keyboard.

That is, given an SKU specification (size, voltage, color etc.), the SKU selector displays the available options for the user choice.

If an SKU with a certain specification is not available in stock, the store may visually communicate this unavailability.

In the example below, sizes P and G are not available.

When the SKU selection control (<vtex.cmc:skuSelection />) is included on a product page, the unavailable product class is automatically added whenever an SKU is unavailable.

For example, a customer from your store entered the jeans pants product page, and the SKUs available in stock for this product are the ones with sizes 38 and 40, but not the one with size 42.

If the template of your currently active product page has an SKU selection control, the SKU with size specification 42 will automatically receive the unavailability class.

You can customize your CSS file so that this class displays, for example, a cut or gray number, or whatever you want.

The unavailable product class is only assigned to the specification that last appears in the SKU specifications list in the Catalog module.

For example, in the case of a SKU that only the Tamanho specification will receive the unavailability class.

If, in this case, you wanted the Faixa specification to receive the class instead, you would simply need to reverse the order of the specifications.