{"section":"tutorials","requestedLocale":"es","requestedSlug":"control-del-boton-de-compra","locale":"es","slug":"control-del-boton-de-compra","path":"docs/es/tutorials/storefront/layout/control-del-boton-de-compra.md","branch":"main","content":"> Tutorial válido solo para tiendas CMS Portal (Legado).\n\nEl control `<vtex.cmc:BuyButton/>` es responsable de renderizar el botón de compra.\n\nSe puede utilizar en las páginas de producto, en los estantes y en el QuickView.\n\nDe forma predeterminada, este es el código que el control BuyButton renderiza:\n\n```\n<div class=\"pull-left box-qtd\">    \n<input type=\"text\" class=\"qtd pull-left\" value=\"1\">    \n    <div class=\"bts pull-left\">        \n        <button class=\"btn btn-mais\">+</button>        \n        <button class=\"btn btn-menos\">-</button>     \n    </div>\n</div>\n<a target=\"_top\" class=\"buy-button buy-button-ref\" href=\"javascript:alert('Por favor, selecione o modelo desejado.');\">Comprar <i class=\"fa fa-lock\"></i></a>\n<script>$('.buy-button-ref').buyButton(17, {salesChannel: 1}, {})</script>\n<p class=\"unavailable-button\">Produto Esgotado\n<input type=\"hidden\" class=\"buy-button-amount\" value=\"1\">\n<div class=\"portal-notify-me-ref\">\n    <div class=\"notifyme sku-notifyme\">\n        <div class=\"notifyme-title-div\">\n            <h3 class=\"notifymetitle notifyme-title\">Avise-Me</h3>\n        </div>\n        <form action=\"/no-cache/AviseMe.aspx\">\n            <fieldset class=\"sku-notifyme-form notifyme-form\">\n                Para ser avisado da disponibilidade deste Produto, basta preencher os campos abaixo.\n                <input class=\"sku-notifyme-client-name notifyme-client-name\" placeholder=\"Digite seu nome...\" size=\"20\" type=\"text\" name=\"notifymeClientName\" id=\"notifymeClientName\">\n                <input class=\"sku-notifyme-client-email notifyme-client-email\" placeholder=\"Digite seu e-mail...\" size=\"20\" type=\"text\" name=\"notifymeClientEmail\" id=\"notifymeClientEmail\">\n                <input class=\"btn-ok sku-notifyme-button-ok notifyme-button-ok\" value=\"ok\" type=\"button\" name=\"notifymeButtonOK\" id=\"notifymeButtonOK\">\n                <input type=\"hidden\" class=\"sku-notifyme-skuid notifyme-skuid\" name=\"notifymeIdSku\" value=\"\">\n            </fieldset>\n        </form>\n        <p class=\"notifyme-loading-message\">\n            <span class=\"sku-notifyme-loading notifyme-loading\">Carregando...</span>\n        \n        <fieldset class=\"success\">\n            <label>\n                <em>\n                    <span class=\"sku-notifyme-success notifyme-success\">Cadastrado com sucesso, assim que o produto for disponibilizado você receberá um email avisando.</span>\n                </em>\n            </label>\n        </fieldset>\n        <fieldset class=\"error\">\n            <label>\n                <span class=\"sku-notifyme-error notifyme-error\"></span>\n            </label>\n        </fieldset>\n    </div>\n</div>\n<script>var notifyMeOptions = {'strings': {\"title\":\"Avise-Me\",\"explanation\":\"\\r\\n    Para ser avisado da disponibilidade deste Produto, basta preencher os campos abaixo.\\r\\n  \",\"loading\":\"Carregando...\",\"success\":\"Cadastrado com sucesso, assim que o produto for disponibilizado você receberá um email avisando.\",\"error\":\"Não foi possível cadastrar. Tente mais tarde.\",\"emailErrorMessage\":\"O endereço de e-mail informado é inválido.\"}};\n$('.portal-notify-me-ref').notifyMe(17, notifyMeOptions);\n</script>\n```\n\nCuando se hace clic en el botón de compra renderizado por este control, se realiza dos acciones principales:\n1. Se inserta el SKU en el __carrito__.\n2. Se hace una solicitud al módulo Logistics para saber si el SKU en cuestión consta en stock. Si no, el control muestra la notificación de disponibilidad __Avise-me__."}