A PopupCart – User Experience and Usability are Aspirational (for Glass Gray Template) in TomatoCart

Some community users report the following problem about popup cart in TomatoCart github repository:

Usability of popup cart is bad. There shall be no additional click for popup cart. Do not force users to click again and again. It shall be as it was in the past – when user place mouse over Cart link he shall see popup cart content.

Everywhere if user adds product to the cart he shall not be moved to cart content, he shall see that product added he shall stay on the same page and continue to buy.

Look what you try to force user to do.

Now user do next things:
1. Add product.
2. See cart contents
3. Press continue shopping
4. Moved to previous page
5. Add another product
6. See cart contents
7. Press continue shopping
8. Moved to previous page
Etc.

Shall be:
1. Press to add product – see that it moved to cart and stay on the same page
2. Press to add product – see that it moved to cart and stay on the same page
3. Press to add product – see that it moved to cart and stay on the same page
4. Press to add product – see that it moved to cart and stay on the same page

So, I had improved the user experience and usability of popup cart as follows:

– Change the click to mouse-over to open the popup cart
– Add the delete button when the ajax shopping cart is disabled.
– Add the order totals & Update the order totals automatically
– Add the view cart and checkout button
– Support variants and gift certificate
– Add the flying product image effect for the popup cart.
– Add the ability to delete the items in the popup cart with ajax
– Add the slide out effect to clear the deleted items from
popup cart
– Add the add to cart confirmation dialog when the user click the add to cart button

You could test the enhanced feature in the live store - shop.absobrit.nl/

cart_glass_gray_delete

Figure 1. Opened popup cart

dlg_confirm

Figure 2. Confirmation Dialog

How to integrate it into your store?

Step 1.  Download the popupcart.zip from our google driver

– Open archive and copy the includes and templates directory to your TomatoCart directory. You need to override directories and files if your copy process request confirmation. Don’t worry about it. This will just impact popup cart rather that the other sections of your store.

Step 2. Add some css code into the stylesheet of the glass gray template

– Go to templates/glass_gray/stylesheet.css and find the following code:

/* popupCart */
.cart a:hover {text-decoration:none;}
#popupCart .cartCallpased {padding-right:15px;background: url(images/arrow-down.png) no-repeat right center;cursor:pointer;}
#popupCart .cartExpanded {padding-right:15px;background: url(images/arrow-up.png) no-repeat right center;cursor:pointer;}
#popupCartContent .cartEmpty{color:#464646;margin-left:10px;float:left;}
#popupCartContent {width: 312px; z-index: 1000; background-color:#F3F3F3; border-left: 1px solid #D9D9D9; border-right: 1px solid #D9D9D9; border-top: 1px solid #D9D9D9; border-bottom: 1px solid #8B8A8A; padding:0; margin: 0;}
#popupCartContent h6 {color: #BEBEBE;border: 0;}
#popupCartContent .productImage {border: 1px solid #dddddd;}
#popupCartContent .subtotal {color: #464646; font-weight: bold; float: right;margin-right:10px;margin-bottom:10px;}
#popupCartContent .content {border: none}
#btnClosePopCart {background: none;border:0;color:#FFFFFF;cursor:pointer;position:absolute;right:5px;font-weight:bolder;font-size:18px;}

Please replace the above code with the following code and then save it:

/* popupCart */
.animated {
  -webkit-animation-duration: 1s;
     -moz-animation-duration: 1s;
       -o-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-fill-mode: both;
     -moz-animation-fill-mode: both;
       -o-animation-fill-mode: both;
          animation-fill-mode: both;
}

@-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;
}

.cart a:hover {text-decoration:none;}
#popupCart .cartCallpased {padding-right:15px;background: url(images/arrow-down.png) no-repeat right center;cursor:pointer;}
#popupCart .cartExpanded {padding-right:15px;background: url(images/arrow-up.png) no-repeat right center;cursor:pointer;}
#popupCartContent .cartEmpty{color:#464646;margin-left:10px;float:left;}
#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: #DDDDDD;
	background-image: -webkit-gradient(
	  linear,
	  left top,
	  left bottom,
	  color-stop(0, #DDDDDD),
	  color-stop(0.71, #FFFFFF)
	);
	background-image: -o-linear-gradient(bottom, #DDDDDD 0%, #FFFFFF 71%);
	background-image: -moz-linear-gradient(bottom, #DDDDDD 0%, #FFFFFF 71%);
	background-image: -webkit-linear-gradient(bottom, #DDDDDD 0%, #FFFFFF 71%);
	background-image: -ms-linear-gradient(bottom, #DDDDDD 0%, #FFFFFF 71%);
	background-image: linear-gradient(to bottom, #DDDDDD 0%, #FFFFFF 71%);
}
#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 {color: #BEBEBE;border-bottom: 1px solid #CCCCCC;padding-bottom: 10px;}
#popupCartContent .productImage {border: 1px solid #dddddd;}
#popupCartContent .subtotal {color: #464646; font-weight: bold; float: right;margin-right:10px;margin-bottom:10px;}
#popupCartContent .content {border: none}
#btnClosePopCart {background: none;border:0;color:#FFFFFF;cursor:pointer;position:absolute;right:5px;font-weight:bolder;font-size:18px;}

.confirmContainer {
	width: 400px;
	z-index: 9999;
	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;
}

.confirmContainer .btns a {padding: 0 10px;}

Step 3. Adjust some code in the index.php of glass gray template

– Go to templates/glass_gray/index.php and find the following code:

 new PopupCart({
      template: '<?php echo $osC_Template->getCode(); ?>',
      sessionName: '<?php echo $osC_Session->getName(); ?>',
      sessionId: '<?php echo $osC_Session->getID(); ?>'
 });

Please replace above code with the following code and save it:

new PopupCart({
      template: '<?php echo $osC_Template->getCode(); ?>',
      enableDelete: '<?php 
      	$box_modules = $osC_Template->osC_Modules_Boxes->_modules;

      	$flag = 'yes';
      	foreach($box_modules as $box_group => $modules) {
      		foreach ($modules as $module_code) {
      			if ($module_code == 'shopping_cart') {
      				$flag = 'no';

      				break 2;
      			}
      		}
      	}

      	echo $flag;
      ?>',
      sessionName: '<?php echo $osC_Session->getName(); ?>',
      sessionId: '<?php echo $osC_Session->getID(); ?>',
      error_sender_name_empty: '<?php echo $osC_Language->get("error_sender_name_empty"); ?>',
      error_sender_email_empty: '<?php echo $osC_Language->get("error_sender_email_empty"); ?>',
      error_recipient_name_empty: '<?php echo $osC_Language->get("error_recipient_name_empty"); ?>',
      error_recipient_email_empty: '<?php echo $osC_Language->get("error_recipient_email_empty"); ?>',
      error_message_empty: '<?php echo $osC_Language->get("error_message_empty"); ?>',
      error_message_open_gift_certificate_amount: '<?php echo $osC_Language->get('error_message_open_gift_certificate_amount'); ?>'
 });

Step4. Add one language definition in the admin panel

– Go to admin panel > Start Menu > Definitions > Languages and click the edit module button

language

Figure 3. Edit language definitions

– Click the general in the left group panel and then add the following language key and value:

Key: add_to_cart_confirmationValue: Success: You have added %s to your shopping cart!

definitions

Figure 4. Add language definition into general group

Done. If you couldn’t apply the changes by yourself, don’t hesitate to contact me via email. I will assist you to integrate this popup cart into your store.

Email: support@tomatocart.com

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 *


× 8 = 8

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>