Mini Cart (with item count) for MarketPress - done!

Hey All!

I really needed to have a little shopping cart icon integrated into the header / menu of one of my projects... and I absolutely needed it to update instantly with the quantity of items in the cart, just like amazon.com does it.

I really wanted to update the mp_items_count_in_cart() via ajax... but I ran into a bunch of issues accessing the cart cookie and all that mess. @Aaron, I wish there were some hooks like "mp_add_to_cart" and "mp_empty_cart" added to accommodate this via ajax - but I couldn't find them if they exist or figure out exactly how to make it fly...

However, I was able to accomplish the task with some jQuery - a little "hacky", but atleast it's a working solution that doesn't hack marketpress and should be able to work on anyone theme. The jquery simply totals the "qty" column of the table rows of marketpress' cart widget DOM elements.

So below you will see my solution:
---------------------------
1. html & javascript:
---------------------------
<div id="mini-cart-menu">
<div class="items-in-cart-menu"><?php echo mp_items_count_in_cart(); ?></div>
<div class="mini-cart-container">
<div class="mini_cart"><!--div that we want to hide-->
[catalyst_widget_area name="cart"]
</div></div>
</div>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('.mini-cart-container').css('cursor', 'pointer');;
jQuery('.mini-cart-container').addClass("cart_hidden");

jQuery('#mini-cart-menu').on('hover',function() {
var $this = jQuery('.mini-cart-container');

if ($this.hasClass("cart_hidden")) {
$this.removeClass("cart_hidden").addClass("cart_visible");

} else {
$this.removeClass("cart_visible").addClass("cart_hidden");
}
});

});

jQuery(document).ready(function() {
(function ($) { //now you can use '$' in place of 'jQuery'

$(document).ajaxComplete(function(e, xhr, settings) {
var tot = 0;
$.each($('.mp_cart_col_quant'),function(){
var qty = $(this).html() - 0;
if(!isNaN(qty)){
tot += qty;
}
});
$('.items-in-cart-menu').html(tot);

});

})(jQuery);
});
</script>
-----------
2. CSS:
-----------
.cart_hidden>div{
display: none;
}
.cart_visible>div{
display: block;
}
#mini-cart-menu:hover{
background: url(/modonmain/wp-content/themes/dynamik/css/images/cart_over.jpg) no-repeat;
height: 64px;
width: 80px;
float: right;
color: #000;
}
#mini-cart-menu{
background: url(/modonmain/wp-content/themes/dynamik/css/images/cart.jpg) no-repeat;
height: 64px;
width: 80px;
float: right;
color: #FF9300;
}
#mini-cart-menu .items-in-cart-menu{
font-size: 24px;
padding-top: 14px;
padding-left: 4px;
text-align: center;
width: 100%;

}
.mini_cart{
width: 300px;
background: black;
color: white;
float: right;
position: relative;
margin-top: 28px;
margin-right: 220px;
padding: 15px;
z-index: 99999;
border: 1px solid white;
}
.mini_cart h4{
color: white !important;
}
.mini-cart-container{
height: auto;
width: 300px;
}
.mini-cart-container .widget-wrap, .mini-cart-container .widget{
background-color: transparent !important;
}
.mp_cart_contents_widget th {
background: #333;
}
.mp_cart_contents_widget tr, .mp_cart_contents_widget td, .mp_cart_contents_widget tbody {
border: 1px solid #333;
}
.mini-cart-container .mp_cart_contents_widget{
width:100%;
color: white;
}
.mp_cart_widget_content{
overflow: hidden;
color: #ccc;
}
---------------
you can see this in action temporarily at: http://tacitwebsolutions.com/modonmain
and after Feb. 1, 2013 @ http://www.modonmain.net

Now, for all of you wondering about that [catalyst_widget_area name="cart"] shortcode - This is a custom widget area that I created with my theme framework "catalyst" - I just added the marketpress cart widget there. Catalyst allows me to create custom widget areas anywhere I want - to learn more about catalyst check out my article here: http://www.seanjohnsonconsultants.com/2012/10/catalyst-theme/

If you don't have a theme framework like catalyst (that supports adding custom widget areas) then you will need to use the following tutorial from the wordpress codex and then place the marketpress cart in the widget area you create:
http://codex.wordpress.org/Widgetizing_Themes

I hope this makes sense and is helpful to others... let me know if you all have any trouble implementing - Or have suggestions on how to accomplish this a "cleaner" way.

  • Saunt Valerian
    • The Bug Hunter

    @Sean Johnson

    This is interesting and nicely done. I was wondering if there is a way to shorten the script a little to leave out the stuff about the hidden widget. I've been working on this with no luck and your solution is the first I've seen with an auto updating cart count.

    I've got an ongoing thread here: https://premium.wpmudev.org/forums/topic/embed-shopping-cart-linkinfo-in-the-header

    My intent is only to display something like Shopping Cart (0). Is it possible to do this using a version of your Jquery script with out the hidden slide down widget area, or does your script rely on the widget area itself to display the count in the visible area?

  • Saunt Valerian
    • The Bug Hunter

    Okay, I reduced the snippet to the below to remove the widget area stuff because I just want the number count display itself. I'm getting the display, but it doesn't update automatically (but it does update after the page refreshes). Any ideas on how to make it work right? Did I take out too much stuff?

    <div class="items-in-cart-menu"><?php echo mp_items_count_in_cart(); ?></div>
    
    <script type="text/javascript">
    		jQuery(document).ready(function() {
    		(function ($) { //now you can use '$' in place of 'jQuery'
    
    			$(document).ajaxComplete(function(e, xhr, settings) {
    			var tot = 0;
    			$.each($('.mp_cart_col_quant'),function(){
    			var qty = $(this).html() - 0;
    			if(!isNaN(qty)){
    			tot += qty;
    			}
    			});
    		$('.items-in-cart-menu').html(tot);
    
    		});
    
    	})(jQuery);
    	});
    </script>
  • Sean Johnson
    • Site Builder, Child of Zeus

    Unfortunately, my specific solution only works when the full cart is present in the html. My code grabs the numbers listed next to each item in the cart and adds them up. If you want to display only the number of items without a cart, you may be able to simply hide the cart but still use jQuery to grab the item totals.

    Another thing to try would be to use AJAX to go and grab the cart count using some Marketpress functions, but that it most likely harder than it sounds.

    Maybe the best thing to do would be to ask Aaron if he could add an ajax function to grab the cart total value specifically.

    If I get time, I will look into creating the function myself, thanks.

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.