The CouchCart in the tutorial uses Bootstrap2. There are certain issues with:
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:
You should now (Bootstrap 3) code it as:
While the cart-modal.js, which is coded as:
needs to be changes to:
i.e. wherever you find:
it needs to be changed to:
The line numbers in cart-modal.js are:
#55
#67
#72
Hope this helps!
Regards,
GenXCoders
$('#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">×</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