Using Bootstrap Modal In Place of Javascript Alert

Question

I'm currently building a website for a client and they have asked for a minimum order of 6 items to be bought. So if a customer only has 5 items and clicks checkout then they need to be warned that they must have a minimum of 6 items. I currently have a Javascript alert to warn them but this doesn't allow for customisation. I was looking to add a Bootstrap Modal but can't work out how this is done.

Here is the code that I have got so far:

<script>
    paypal.minicart.render();

    paypal.minicart.cart.on('checkout', function (evt) {
        var items = this.items(),
            len = items.length,
            total = 0,
            i;

        // Count the number of each item in the cart
        for (i = 0; i < len; i++) {
            total += items[i].get('quantity');
        }

        if (total < 6) {
            alert('The minimum order quantity is:\n\n3 Cases of Beer\n6 Bottles of Wine\n6 Bottles of Spirits.\n\nPlease add more to your shopping cart before checking out');
            evt.preventDefault();
        }
    });
</script>

Answer 1

http://jsfiddle.net/SeanWessell/4z16m6k4/

You need to add the markup for your modal.

HTML:

<!-- Modal -->
<div class="modal fade" id="cartMessage" tabindex="-1" role="dialog" aria-labelledby="cartMessageLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>

                </button>
                 <h4 class="modal-title" id="cartMessageLabel">Minimum Order Requirements Not Met</h4>

            </div>
            <div class="modal-body">The minimum order quantity is:
                <ul>
                    <li>3 Cases of Beer</li>
                    <li>6 Bottles of Wine</li>
                    <li>6 Bottles of Spirits.</li>
                </ul>Please add more to your shopping cart before checking out</div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

Then you need to trigger the modal when the condition is met.

$('#checkout').on('click', function (evt) {
    var total = 5
    if (total < 6) {
        $('#cartMessage').modal()
        evt.preventDefault();
    }
});