In bootstrap template of TomatoCart v1.1.8.5, there isn’t the elegant feature – Ajax popup cart. You may wish to integrate this useful feature into your store to enhance the user experience. In this article, I will teach you how to achieve it.

Step 1. Download ajax_popup_cart.zip at https://www.dropbox.com/s/ruc3m7zy82mlzcl/ajax_popup_cart.zip

Step 2. Unzip the package into your local computer. Then copy the templates and ext folds into your root TomatoCart directory. Please just override the original ones. Don’t worry about it. It will not impact your system.

Step 3. Find following code in templates > bootstrap > css > stylesheet.css:

/* popupCartContent */ 
#popupCartContent {background-clip: padding-box;background-color: #FFFFFF;box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);float: left;left: 0;list-style: none outside none;margin: 2px 0 0;min-width: 160px;padding: 0 0;position: absolute;top: 100%;z-index: 1000;width: 318px;}
#popupCartContent .content {padding: 5px 10px;}
#popupCartContent .content table tr {border-bottom: 1px dashed #CDCDCD;}
#popupCartContent .subtotal {float: right;margin: 8px 0;font-weight: bold;}
#popupCartItems {display: inline-block; margin-right:5px;}
.cart a {text-decoration: none;}

Step 4. Replace above code with following code:

/* popupCartContent */ 
#popupCartContent .subtotal {float: right;margin: 8px 0;font-weight: bold;}
#popupCartItems {display: inline-block; margin-right:5px;}
.cart a {text-decoration: none;}

#popupCartContent {width: 312px; z-index: 1000; background:none; padding-top:20px; margin: 0;}
#popupCartContent .cartInner {
  padding: 10px;
  border-radius: 4px;
  -webkit-box-shadow: 0 0 3px 3px #CCCCCC;
  -moz-box-shadow: 0 0 3px 3px #CCCCCC;
  box-shadow: 0 0 3px 3px #CCCCCC;
  background: #FFFFFF;
}
#popupCartContent table {width:100%;border-collapse: collapse; border-spacing: 0;}
#popupCartContent table.products td {
   border-bottom: 1px solid #CCCCCC;
   padding: 8px 5px;
   vertical-align: center;
}

#popupCartContent table.orderTotals td {padding: 5px;}
#popupCartContent table.orderTotals td.title {width:80%;text-align: right;}
#popupCartContent table.orderTotals td.text {width: 19%;text-align:left;}

#popupCartContent .buttons {margin: 10px 0;}
#popupCartContent .buttons .btnCheckout {float:right;}
#popupCartContent .buttons .btnCart {float:left;}

#popupCartContent h6 {border-bottom: 1px solid #CCCCCC;padding-bottom: 10px;}

/* Pop dialog*/
.dialog {
  width: 400px;
  padding: 15px;
  text-align:center;
  background: #FFFFFF;
  border-radius: 4px;
  box-shadow: 0 0 5px 5px #CCCCCC;
  -webkit-box-shadow: 0 0 5px 5px #CCCCCC;
  -moz-box-shadow: 0 0 5px 5px #CCCCCC;
  -ms-box-shadow: 0 0 5px 5px #CCCCCC;
  -o-box-shadow: 0 0 5px 5px #CCCCCC;
  z-index:9999;
}
.dialog .btns a {padding: 0 10px;}
.dialog .btns .btn {margin: 0 10px;}

/* Css3 Animation */
.animated {
  -webkit-animation-duration: 0.5s;
     -moz-animation-duration: 0.5s;
       -o-animation-duration: 0.5s;
          animation-duration: 0.5s;
  -webkit-animation-fill-mode: both;
     -moz-animation-fill-mode: both;
       -o-animation-fill-mode: both;
          animation-fill-mode: both;
}


@-webkit-keyframes flash {
  0%, 50%, 100% {opacity: 1;}
  25%, 75% {opacity: 0;}
}

@-moz-keyframes flash {
  0%, 50%, 100% {opacity: 1;}
  25%, 75% {opacity: 0;}
}

@-o-keyframes flash {
  0%, 50%, 100% {opacity: 1;}
  25%, 75% {opacity: 0;}
}

@keyframes flash {
  0%, 50%, 100% {opacity: 1;}
  25%, 75% {opacity: 0;}
}

.animated.flash {
  -webkit-animation-name: flash;
  -moz-animation-name: flash;
  -o-animation-name: flash;
  animation-name: flash;
}

@-webkit-keyframes slideOutUp {
  0% {
    -webkit-transform: translateY(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
  }
}

@-moz-keyframes slideOutUp {
  0% {
    -moz-transform: translateY(0);
  }

  100% {
    opacity: 0;
    -moz-transform: translateY(-2000px);
  }
}

@-o-keyframes slideOutUp {
  0% {
    -o-transform: translateY(0);
  }

  100% {
    opacity: 0;
    -o-transform: translateY(-2000px);
  }
}

@keyframes slideOutUp {
  0% {
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    transform: translateY(-2000px);
  }
}

.slideOutUp {
  -webkit-animation-name: slideOutUp;
  -moz-animation-name: slideOutUp;
  -o-animation-name: slideOutUp;
  animation-name: slideOutUp;
}

@-webkit-keyframes bounceInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
  }

  60% {
    opacity: 1;
    -webkit-transform: translateY(30px);
  }

  80% {
    -webkit-transform: translateY(-10px);
  }

  100% {
    -webkit-transform: translateY(0);
  }
}

@-moz-keyframes bounceInDown {
  0% {
    opacity: 0;
    -moz-transform: translateY(-2000px);
  }

  60% {
    opacity: 1;
    -moz-transform: translateY(30px);
  }

  80% {
    -moz-transform: translateY(-10px);
  }

  100% {
    -moz-transform: translateY(0);
  }
}

@-o-keyframes bounceInDown {
  0% {
    opacity: 0;
    -o-transform: translateY(-2000px);
  }

  60% {
    opacity: 1;
    -o-transform: translateY(30px);
  }

  80% {
    -o-transform: translateY(-10px);
  }

  100% {
    -o-transform: translateY(0);
  }
}

@keyframes bounceInDown {
  0% {
    opacity: 0;
    transform: translateY(-2000px);
  }

  60% {
    opacity: 1;
    transform: translateY(30px);
  }

  80% {
    transform: translateY(-10px);
  }

  100% {
    transform: translateY(0);
  }
}

.animated.bounceInDown {
  -webkit-animation-name: bounceInDown;
  -moz-animation-name: bounceInDown;
  -o-animation-name: bounceInDown;
  animation-name: bounceInDown;
}

Step5. Add following language definitions into general group under admin panel > Definitions > Languages > Edit module:

• add_to_cart_confirmation = Success: You have added %s to your shopping cart!
• button_cart = Cart

That’s it. Now, the ajax popup cart will work in your bootstrap template.

Looking for quality web hosting? Look no further than Arvixe Web Hosting!