The CouchCart in the tutorial uses Bootstrap2. There are certain issues with:
$('#cart-modal').modal('show'); statement in cart-js/cart-modal.js fails to make the popup visible


So here is what you can do to implement the Cart Modal using Bootstrap 3.

Previous (Bootstrap 2) the cart modal in HTML was coded as:
Code: Select all
<div id="cart-modal" class="modal hide fade">
    <div class="modal-body"></div>
    <button class="modal-close" data-dismiss="modal" title="Close">&times;</button>
    <img src="images/ajax-loader.gif" class="ajax-loader" width="32" height="32" alt="Loading...">
</div>


You should now (Bootstrap 3) code it as:
Code: Select all
<div id="cart-modal" class="modal modal-wide fade">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title">My Shopping Bag</h4>
                    </div>
                    <div class="modal-body">
                       <img src="assets/images/ajax-loader.gif" class="ajax-loader" width="32" height="32" alt="Loading...">
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>


While the cart-modal.js, which is coded as:
Code: Select all
function show_cart() {
    var rand = new Date().getTime();
   var url = cart_link + '?v=' + rand;

    // Fetch updated cart
   $.get(url, function(response) {
        // Update modal window
        $('#cart-modal>.modal-body').html(response);
       
        // Update the summary on main page
      update_summary();
       
        // Cart update ends - fade in
        cart_fade_in();     
   });
}

function cart_fade_out() {
    $('.ajax-loader').fadeIn(250);
    $('#cart-modal.modal-body').height($('#cart-modal>.modal-body').height()).addClass('opacity-hide');
}

function cart_fade_in() {
    $('.ajax-loader').fadeOut(250);
   $('#cart-modal>.modal-body').animateAuto('height', 250, function() {
      $(this).removeClass('opacity-hide').removeAttr('style');
   });
}


needs to be changes to:
Code: Select all
function show_cart() {
    var rand = new Date().getTime();
   var url = cart_link + '?v=' + rand;

    // Fetch updated cart
   $.get(url, function(response) {
        // Update modal window
        $('#cart-modal>.modal-dialog>.modal-content>.modal-body').html(response);
       
        // Update the summary on main page
      update_summary();
       
        // Cart update ends - fade in
        cart_fade_in();     
   });
}

function cart_fade_out() {
    $('.ajax-loader').fadeIn(250);
    $('#cart-modal>.modal-dialog>.modal-content>.modal-body').height($('#cart-modal>.modal-dialog>.modal-content>.modal-body').height()).addClass('opacity-hide');
}

function cart_fade_in() {
    $('.ajax-loader').fadeOut(250);
   $('#cart-modal>.modal-dialog>.modal-content>.modal-body').animateAuto('height', 250, function() {
      $(this).removeClass('opacity-hide').removeAttr('style');
   });
}


i.e. wherever you find:
$('#cart-modal>.modal-body')

it needs to be changed to:
$('#cart-modal>.modal-dialog>.modal-content>.modal-body')


The line numbers in cart-modal.js are:
#55
#67
#72

Hope this helps!

Regards,
GenXCoders