Buy button control (BuyButton)

2 min read

Tutorial valid only for Legacy CMS Stores.

The control <vtex.cmc:BuyButton/> is responsible for rendering the buy button.

It can be used on product pages, on shelves, and in QuickView.

By default, this is the code rendered by the BuyButton control:


<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
<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>
        
        <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>

When the buy button rendered by this control is triggered, the control performs two main actions:

It inserts the SKU in the cart.
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).