Add an AJAX Cart Button to Miva Merchant

by Scot Ranney

This is designed for Miva Merchant Frameworks based on Bootstrap however with a bit of modification it could be used on any framework.

1. Add CSS to your PROD (product display) page or load it via an external file:

<mvt:comment>
|
| ajax add to cart css
|
</mvt:comment>
<style>
.ajax-checkbox {
  display: inline-block;
  width: 20px;
  -webkit-transition: opacity 0.25s, width 0.25s;
  -moz-transition: opacity 0.25s, width 0.25s;
  -o-transition: opacity 0.25s, width 0.25s;
  transition: opacity 0.25s, width 0.25s;
}
.spinner {
  display: inline-block;
  opacity: 0;
  width: 0;
  -webkit-transition: opacity 0.25s, width 0.25s;
  -moz-transition: opacity 0.25s, width 0.25s;
  -o-transition: opacity 0.25s, width 0.25s;
  transition: opacity 0.25s, width 0.25s;
}
.has-spinner.active {
  cursor:progress;
}
.has-spinner.active .spinner {
  opacity: 1;
  width: auto; /* This doesn't work, just fix for unkown width elements */
}
.has-spinner.btn-mini.active .spinner {
    width: 10px;
}
.has-spinner.btn-small.active .spinner {
    width: 13px;
}
.has-spinner.btn.active .spinner {
    width: 16px;
}
.has-spinner.btn-large.active .spinner {
    width: 19px;
}
</style>

2. Add this JS/Footer info to your PROD page just above the tag:

<mvt:comment> |
| ajax add to cart js start
|
</mvt:comment>
<!-- Modal -->
<div class="modal fade" id="ajax-add-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<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">×</button>
<h4 class="modal-title text-center" id="myModalLabel">This item has been added to your cart.</h4>
</div>
<div class="modal-body">
<div class="pull-left">
<a class="btn btn-info" href="" class="btn btn-default">View Cart</a>
<button type="button" class="btn btn-info" data-dismiss="modal">Keep Shopping</button>
</div>
<div class="pull-right">
<a href="" class="btn btn-warning">Check Out Now</a>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/eldarion-ajax/0.12.0/eldarion-ajax.min.js"></script>
<script>
$(document).on("eldarion-ajax:begin", function(evt, $el) {
$("#ajax-checkmark").hide();
$("#ajax-add-button").toggleClass( 'active' );
});
$(document).on("eldarion-ajax:complete", function(evt, $el, data, textStatus, jqXHR) {
$(".ajax-minicart-total").html(data.responseText);
$("#ajax-add-button").toggleClass( 'active' );
$("#ajax-checkmark").fadeIn(1500);
$('#ajax-add-modal').modal('toggle')
});
</script>
<mvt:comment> |
| ajax add to cart js end
|
</mvt:comment>

3. Create the AJAX handler page:

Open up User Interface and create a new page.

Code: AJAX

Name: AJAX Handler

Items: store, basket, global_minibasket, buttons

Page template:

<span>
<mvt:if expr="g.Action EQ 'ADPR'">
<mvt:eval expr="l.settings:global_minibasket:basket_count" />
</mvt:if>
</span>

4. Add a class to your mini-basket display: MENU > USER INTERFACE > SETTINGS

In each spot where you see , either add a class to the existing span tag or add a new span tag with the class:

Usually it's four instances. This will update the minicart total in the header.

5. Change the "add to cart" form.

Open the Product Display page: MENU > USER INTERFACE > PROD

Go to the Product Display Layout

Find the "add to cart" form. The form tag will look something like this:

Add ajax to the class attribute (or create a new class attribute) and change the form so it points to your AJAX handler page:

Notes:

Make sure the page is secure. If you need to, make it change to secure via the htaccess file. If everything isn't secure on the page the AJAX might not work.

These articles might be interesting for you as well:

Add an AJAX Cart Button to Miva Merchant

Related Articles