<div class="container">
<div class="row justify-content-md-center mt-5">
<div class="col-12">
<div class="card">
<div class="card-body">
<h5 class="card-title">Subscribe / unsubscribe to shopping cart events</h5>
<p class="card-text">
Click the button bellow to open the Inline Cart. You will see an alert window when each event fires. In this example you will be subscribed to the following events:</p>
<ol>
<li><span class="badge badge-info">cart:open</span> - this event triggers when the shopping cart is opened.</li>
<li><span class="badge badge-info">payment:finalized</span> - this event triggers when the payment has finalized.</li>
<li><span class="badge badge-info">fulfillment:finalized</span> - this event triggers when the fulfillment is completed.</li>
<li><span class="badge badge-info">cart:close</span> - this event triggers when the shopping cart is closed. Note that this event will not be triggered in this example because it is used to demonstrate the event unsubscribing process.</li>
</ol>
<a href="#" class="btn btn-success" id="buy-button">Buy now!</a>
</div>
</div>
</div>
</div>
</div>
window.addEventListener('load', function() {
TwoCoInlineCart.events.subscribe('cart:opened', function () {
alert('Cart was opened.');
});
TwoCoInlineCart.events.subscribe('payment:finalized', function () {
alert('Payment was finalized.');
});
TwoCoInlineCart.events.subscribe('fulfillment:finalized', function () {
alert('Fulfillment was finalized.');
});
var cartClosedhandlerGuid = TwoCoInlineCart.events.subscribe('cart:closed', function () {
alert('Cart was closed.');
});
TwoCoInlineCart.events.unsubscribe('cart:closed', cartClosedhandlerGuid);
});
window.document.getElementById('buy-button').addEventListener('click', function() {
TwoCoInlineCart.products.add({
code: "74B8E17CC0"
});
TwoCoInlineCart.cart.checkout();
});
