{"section":"tutorials","requestedLocale":"pt","requestedSlug":"controle-do-botao-de-compra","locale":"pt","slug":"controle-do-botao-de-compra","path":"docs/pt/tutorials/storefront/layout/controle-do-botao-de-compra.md","branch":"main","content":"> Tutorial válido apenas para lojas CMS Portal (Legado).\n\nO controle `<vtex.cmc:BuyButton/>` é responsável por renderizar o botão de compra.\n\nEle pode ser usado nas páginas de produto, em prateleiras e no QuickView.\n\nPor padrão, este é o código renderizado pelo controle BuyButton:\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\nQuando o botão de compra renderizado por este controle é acionado, o controle realiza duas ações principais:\n\n1. Insere o SKU no __carrinho__.\n2. Faz um request ao módulo Logistics para saber se o SKU em questão consta em estoque. Se não constar, o controle mostra o __Avise-me__."}