Controle do botão de compra (BuyButton)

Tutorial válido apenas para lojas CMS Portal Legado.

O controle <vtex.cmc:BuyButton/> é responsável por renderizar o botão de compra.

Ele pode ser usado nas páginas de produto, em prateleiras e no QuickView.

Por padrão, este é o código renderizado pelo controle BuyButton:


<div class="pull-left box-qtd">    
<input type="text" class="qtd pull-left" value="1">    
    <div class="bts pull-left">        
        <button class="btn btn-mais">+</button>        
        <button class="btn btn-menos">-</button>     
    </div>
</div>
<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>
<script>$('.buy-button-ref').buyButton(17, {salesChannel: 1}, {})</script>
<p class="unavailable-button">Produto Esgotado</p>
<input type="hidden" class="buy-button-amount" value="1">
<div class="portal-notify-me-ref">
    <div class="notifyme sku-notifyme">
        <div class="notifyme-title-div">
            <h3 class="notifymetitle notifyme-title">Avise-Me</h3>
        </div>
        <form action="/no-cache/AviseMe.aspx">
            <fieldset class="sku-notifyme-form notifyme-form">
                Para ser avisado da disponibilidade deste Produto, basta preencher os campos abaixo.
                <input class="sku-notifyme-client-name notifyme-client-name" placeholder="Digite seu nome..." size="20" type="text" name="notifymeClientName" id="notifymeClientName">
                <input class="sku-notifyme-client-email notifyme-client-email" placeholder="Digite seu e-mail..." size="20" type="text" name="notifymeClientEmail" id="notifymeClientEmail">
                <input class="btn-ok sku-notifyme-button-ok notifyme-button-ok" value="ok" type="button" name="notifymeButtonOK" id="notifymeButtonOK">
                <input type="hidden" class="sku-notifyme-skuid notifyme-skuid" name="notifymeIdSku" value="">
            </fieldset>
        </form>
        <p class="notifyme-loading-message">
            <span class="sku-notifyme-loading notifyme-loading">Carregando...</span>
        </p>
        <fieldset class="success">
            <label>
                <em>
                    <span class="sku-notifyme-success notifyme-success">Cadastrado com sucesso, assim que o produto for disponibilizado você receberá um email avisando.</span>
                </em>
            </label>
        </fieldset>
        <fieldset class="error">
            <label>
                <span class="sku-notifyme-error notifyme-error"></span>
            </label>
        </fieldset>
    </div>
</div>
<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."}};
$('.portal-notify-me-ref').notifyMe(17, notifyMeOptions);
</script>

Quando o botão de compra renderizado por este controle é acionado, o controle realiza duas ações principais:

Insere o SKU no carrinho.
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.