Displaying "Added to Cart" text

[daverr]

Hi there,

 

I know that when you add a product to the cart it animates the product getting added. However, I've done some user testing on the site and it got mentioned that it's not obvious that something has been added to the cart.

 

Is it possible to display either a message box to say the item has been added to the cart, or alternatively have the text "Added to Cart" appear near the Add to Cart button once it has been clicked.

 

Any help greatly appreciated!

[borantula]

edit (or overwrite in theme folder if it can) modules/blockcart/ajax-cart.js

 

in that file there is a method called add in AjaxCart javascript object.

 

You should add your event the part where it says:

 

success: function(jsonData,textStatus,jqXHR)
{

[daverr]

Thanks, that's great, will give it a go. You couldn't give me a clue as to either bring up a msg box or something similar could you?

[borantula]

any function that generates a message box would do

 

i can give an example. here this is the original code from blockcart module, ajax-cart.js. the add function (it starts on line 177 on mine). lets say we have a simple white message box already prepared in out html which says "the product is added". Its id is #addtocartpopup and by default is not displayed(css display:none)

 

Look at the ajax part of the code below. I added a simple message box part

 

add : function(idProduct, idCombination, addedFromProductPage, callerElement, quantity, whishlist){
 if (addedFromProductPage && !checkCustomizations())
 {
  alert(fieldRequired);
  return ;
 }
 emptyCustomizations();
 //disabled the button when adding to do not double add if user double click
 if (addedFromProductPage)
 {
  $('body#product #add_to_cart input').attr('disabled', 'disabled').removeClass('exclusive').addClass('exclusive_disabled');
  $('.filled').removeClass('filled');
 }
 else
  $(callerElement).attr('disabled', 'disabled');
 if ($('#cart_block #cart_block_list').hasClass('collapsed'))
  this.expand();
 //send the ajax request to the server
 $.ajax({
  type: 'POST',
  url: baseDir + 'cart.php',
  async: true,
  cache: false,
  dataType : "json",
  data: 'add=1&ajax=true&qty=' + ((quantity && quantity != null) ? quantity : '1') + '&id_product=' + idProduct + '&token=' + static_token + ( (parseInt(idCombination) && idCombination != null) ? '&ipa=' + parseInt(idCombination): ''),
  success: function(jsonData,textStatus,jqXHR)
  {
   // add appliance to whishlist module
   if (whishlist && !jsonData.errors)
 WishlistAddProductCart(whishlist[0], idProduct, idCombination, whishlist[1]);
   //MESSAGEBOX CODE BEGIN
   //display the popup with a fadeIn...wait for iiiiit!...after 2 seconds fadeOut
   $('#addtocartpopup').fadeIn(500).delay(2000).fadeOut(500);
   //MESSAGE BOX CODE END
   // add the picture to the cart
   var $element = $(callerElement).parent().parent().find('a.product_image img,a.product_img_link img');
   if (!$element.length)
 $element = $('#bigpic');
   var $picture = $element.clone();
   var pictureOffsetOriginal = $element.offset();
   if ($picture.size())
 $picture.css({'position': 'absolute', 'top': pictureOffsetOriginal.top, 'left': pictureOffsetOriginal.left});
   var pictureOffset = $picture.offset();
   var cartBlockOffset = $('#cart_block').offset();
   // Check if the block cart is activated for the animation
   if (cartBlockOffset != undefined && $picture.size())
   {
 $picture.appendTo('body');
 $picture.css({ 'position': 'absolute', 'top': $picture.css('top'), 'left': $picture.css('left') })
 .animate({ 'width': $element.attr('width')*0.66, 'height': $element.attr('height')*0.66, 'opacity': 0.2, 'top': cartBlockOffset.top + 30, 'left': cartBlockOffset.left + 15 }, 1000)
 .fadeOut(100, function() {
  ajaxCart.updateCartInformation(jsonData, addedFromProductPage);
 });
   }
   else
 ajaxCart.updateCartInformation(jsonData, addedFromProductPage);
  },
  error: function(XMLHttpRequest, textStatus, errorThrown)
  {
   alert("TECHNICAL ERROR: unable to add the product.\n\nDetails:\nError thrown: " + XMLHttpRequest + "\n" + 'Text status: ' + textStatus);
   //reactive the button when adding has finished
   if (addedFromProductPage)
 $('body#product #add_to_cart input').removeAttr('disabled').addClass('exclusive').removeClass('exclusive_disabled');
   else
 $(callerElement).removeAttr('disabled');
  }
 });
},

[daverr]

many thanks for your help dave

[mux]

Thanks.

 

This post helped me also

[praneth]

Me also, thanks!

[praneth]

Actually I have a question:

 

Would someone know how to add an exception so that the popup doesn't show when the maximum number of products has been reached?

 

Currently I have the newly created popup window showing up saying that the product was added to the cart, and then a message saying that the product can't be added as the maximum number of items has been reached. This is confusing for the customer and I can't find an option in the back office to disable the cart when there are no products left for ordering.

 

Thanks!

[isoler]

Actually I have a question:

 

Would someone know how to add an exception so that the popup doesn't show when the maximum number of products has been reached?

 

Currently I have the newly created popup window showing up saying that the product was added to the cart, and then a message saying that the product can't be added as the maximum number of items has been reached. This is confusing for the customer and I can't find an option in the back office to disable the cart when there are no products left for ordering.

 

Thanks!

 

Hi,

 

You have to add a condition above the line that 'borantula' says, you have to do something like this:

//MESSAGEBOX CODE BEGIN
//display the popup with a fadeIn...wait for iiiiit!...after 2 seconds fadeOut
if (!jsonData.hasError)
{
$('#addtocartpopup').fadeIn(500).delay(2000).fadeOut(500);
}
//MESSAGE BOX CODE END

 

[hapciu80]

Hi,

Sorry for the noob question,using 1.5.4.1 ps version i don't have any programming language knowledge... Perhaps is there someone so kind to explain me how to prepare a simple white message box in out html and how to declare it #addtocartpopup and how to link it to the ajax code.thanks a lot

[techfirestudio]

any function that generates a message box would do i can give an example. here this is the original code from blockcart module, ajax-cart.js. the add function (it starts on line 177 on mine). lets say we have a simple white message box already prepared in out html which says "the product is added". Its id is #addtocartpopup and by default is not displayed(css display:none) Look at the ajax part of the code below. I added a simple message box part

add : function(idProduct, idCombination, addedFromProductPage, callerElement, quantity, whishlist){ if (addedFromProductPage && !checkCustomizations()) { alert(fieldRequired); return ; } emptyCustomizations(); //disabled the button when adding to do not double add if user double click if (addedFromProductPage) { $('body#product #add_to_cart input').attr('disabled', 'disabled').removeClass('exclusive').addClass('exclusive_disabled'); $('.filled').removeClass('filled'); } else $(callerElement).attr('disabled', 'disabled'); if ($('#cart_block #cart_block_list').hasClass('collapsed')) this.expand(); //send the ajax request to the server $.ajax({ type: 'POST', url: baseDir + 'cart.php', async: true, cache: false, dataType : "json", data: 'add=1&ajax=true&qty=' + ((quantity && quantity != null) ? quantity : '1') + '&id_product=' + idProduct + '&token=' + static_token + ( (parseInt(idCombination) && idCombination != null) ? '&ipa=' + parseInt(idCombination): ''), success: function(jsonData,textStatus,jqXHR) { // add appliance to whishlist module if (whishlist && !jsonData.errors) WishlistAddProductCart(whishlist[0], idProduct, idCombination, whishlist[1]); //MESSAGEBOX CODE BEGIN //display the popup with a fadeIn...wait for iiiiit!...after 2 seconds fadeOut $('#addtocartpopup').fadeIn(500).delay(2000).fadeOut(500); //MESSAGE BOX CODE END // add the picture to the cart var $element = $(callerElement).parent().parent().find('a.product_image img,a.product_img_link img'); if (!$element.length) $element = $('#bigpic'); var $picture = $element.clone(); var pictureOffsetOriginal = $element.offset(); if ($picture.size()) $picture.css({'position': 'absolute', 'top': pictureOffsetOriginal.top, 'left': pictureOffsetOriginal.left}); var pictureOffset = $picture.offset(); var cartBlockOffset = $('#cart_block').offset(); // Check if the block cart is activated for the animation if (cartBlockOffset != undefined && $picture.size()) { $picture.appendTo('body'); $picture.css({ 'position': 'absolute', 'top': $picture.css('top'), 'left': $picture.css('left') }) .animate({ 'width': $element.attr('width')*0.66, 'height': $element.attr('height')*0.66, 'opacity': 0.2, 'top': cartBlockOffset.top + 30, 'left': cartBlockOffset.left + 15 }, 1000) .fadeOut(100, function() { ajaxCart.updateCartInformation(jsonData, addedFromProductPage); }); } else ajaxCart.updateCartInformation(jsonData, addedFromProductPage); }, error: function(XMLHttpRequest, textStatus, errorThrown) { alert("TECHNICAL ERROR: unable to add the product.\n\nDetails:\nError thrown: " + XMLHttpRequest + "\n" + 'Text status: ' + textStatus); //reactive the button when adding has finished if (addedFromProductPage) $('body#product #add_to_cart input').removeAttr('disabled').addClass('exclusive').removeClass('exclusive_disabled'); else $(callerElement).removeAttr('disabled'); } }); },

 

I tried adding my html to the end of modules/blockcart/blockcart.tpl and my css to the end of modules/blockcart/blockcart.tpl

Nothing would show up even if i removed the display:none; in the css. So I moved my html code into themes/default/product.tpl and I can get the message to display if I leave out display:none; in the css. Now I have added the ajax code to the ajax-cart.js and I set the css to display:none;

However when I add a product to the cart it doens't show the message as I had hoped.

 

Here's my code

In ajax-cart.js

  success: function(jsonData,textStatus,jqXHR)
  {
// add appliance to whishlist module
if (whishlist && !jsonData.errors)
 WishlistAddProductCart(whishlist[0], idProduct, idCombination, whishlist[1]);
//MESSAGEBOX CODE BEGIN
//display the popup with a fadeIn...wait for iiiiit!...after 2 seconds fadeOut
$('#addtocartpopup').fadeIn(500).delay(2000).fadeOut(500);
//MESSAGE BOX CODE END
// add the picture to the cart
var $element = $(callerElement).parent().parent().find('a.product_image img,a.product_img_link img');
if (!$element.length)
 $element = $('#bigpic');
var $picture = $element.clone();
var pictureOffsetOriginal = $element.offset();

 

blockcart.css

#addtocartpopup {
background-color: #777777;
border-radius: 7px 7px 7px 7px;
box-shadow: 6px 9px 5px #000000;
color: #FFFFFF;
font-size: 15px;
font-weight: bold;
left: 36%;
padding: 20px 10px 0px;
position: fixed;
right: 36%;
text-align: center;
top: 75%;
z-index: 300;
display: none;
}

 

product.tpl

<div id='addtocartpopup'>
<p>The product has been added to your shopping cart</p>
</div>

 

Any help would be very appreciated!

Thanks in advance!

Edited June 28, 2013 by techfirestudio (see edit history)