[TomatoCart] How to Integrate Ajax Popup Cart into 1.1.8.5 Bootstrap Template

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

Snip20140727_7

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

Snip20140727_10

Snip20140727_11

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

Tags: , , , , , , , , , , , | Posted under TomatoCart | RSS 2.0

Author Spotlight

Jack Yin

Jack Yin

TomatoCart Developer & Co Founder - Arvixe Web Hosting / TomatoCart Community Liaison

Leave a Reply

Your email address will not be published. Required fields are marked *


× 5 = 10

You may use these HTML tags and attributes: <a href="" title="" rel=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>