{"section":"tutorials","requestedLocale":"en","requestedSlug":"buy-button-control","locale":"en","slug":"buy-button-control","path":"docs/en/tutorials/storefront/layout/buy-button-control.md","branch":"main","content":"> Tutorial valid only for Legacy CMS Stores.\n\nThe control `<vtex.cmc:BuyButton/>` is responsible for rendering the buy button.\n\nIt can be used on product pages, on shelves, and in QuickView.\n\nBy default, this is the code rendered by the BuyButton control:\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\nWhen the buy button rendered by this control is triggered, the control performs two main actions:\n\n1. It inserts the SKU in the __cart__.\n2. It requests the Logistics module to check if the SKU in question exists in stock. If not, the control shows the availability notification feature (__Let me know__)."}