Control del botón de compra (BuyButton)

Layout

Tutorial válido solo para tiendas CMS Portal Legado.

El control <vtex.cmc:BuyButton/> es responsable de renderizar el botón de compra.

Se puede utilizar en las páginas de producto, en los estantes y en el QuickView.

De forma predeterminada, este es el código que el control BuyButton renderiza:


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

Cuando se hace clic en el botón de compra renderizado por este control, se realiza dos acciones principales:

Se inserta el SKU en el carrito.
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.