Update 7/1/2014: Infusionsoft has updated their version of jQuery to 1.10.2. This tip has been updated to accommodate this change.

It is often helpful to provide links to external content in your shopping cart or order form, like the terms of a money back guarantee or a YouTube video. This extra content can help reassure your customers about their purchase or provide a demonstration of the product. But we all know that if a customer leaves your shopping cart, they might never come back! A solution to this is to show your content in a lightbox. Instead of leaving your cart, the link will open in a modal dialog within the shopping cart page.

There are dozens of great jQuery plugins that provide lightbox functionality. Unfortunately, Infusionsoft uses an extremely outdated version of jQuery (v1.6.2 released June 30, 2011). It works great for DOM manipulation, but it isn’t compatible with the latest and greatest lightbox plugins. To get around this problem we modified a copy of jQuery v1.11.0 to work under a different name, jNew. We also modified an excellent lightbox plugin, Magnific Popup, to work with jNew instead of jQuery. We are hosting both of these modified libraries on a CDN that you are welcome to use. For this example I’m going to use an order form. You can easily use this code on a web form or shopping cart. First, you need to add the required libraries to your HTML custom header:

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/0.9.9/magnific-popup.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/0.9.9/jquery.magnific-popup.min.js"></script>

Next you need to add your link to the page. You can put it anywhere you want. For this example, we are adding a huge 30 day money back guarantee image. It links to a basic page with details about the guarantee. In real life, you’d want to make the graphic or link fit better with your page, and make the target URL a bit better looking.

<center><a href="https://novaksolutions.com/demo/guarantee.php" class="guarantee-lightbox"><img src="https://novaksolutions.com/wp-content/uploads/2014/02/30-day-guarantee.png" /></a></center>

Notice that the link has a class on it. You need a unique class name for each link. Last, you need to add the JavaScript that will create the lightbox for each link. This code needs to go at the very end of the custom footer HTML. Notice that I’m using the jNew instead of jQuery, I’ve referenced the class name from the link, and specified that I want the link to show in an iframe. The Magnific Popup documentation has instructions on how to use other types of lightboxes, such as for images or with ajax content.

<script>
jQuery(document).ready(function() {
  jQuery('.guarantee-lightbox').magnificPopup({type:'iframe'});
});
</script>

Once you save your order form, the lightbox will be working. You can adjust the size of the lightbox using CSS if needed, like this:

<style>
.mfp-iframe, .mfp-iframe-holder .mfp-content {
    width: 600px !important;
    height: 400px !important;
}
</style>