Help Forums | Market Theme

Topic RSS

How to Make the Cart Totals Visible Outside of the Cart

December 7, 2010
10:09 pm

nschlosburg

Member

Forum Posts: 23

Member Since:
October 23, 2010

Offline

Awhile back I posted the following in the support section:

Hi Again….I have one more thing (at least for now – LOL) that I'd like to try to accomplish. Is there any way that I could have the total number of items and total $s that are in the shopping cart show up on the front page (preferably in the top right corner and always displayed) and as a click-able link that would open up the shopping cart?

Examples:

Cart 0 Items ($ 0.00)

Cart 2 Item(s) ($11.98)

In the reply back I found out that the code to do this had not been written yet, but that it might be possible. My son thought that he might be able to do this, so he took a crack at it. He succeeded and this is the result: MYnd Visions Photography.

First things first: make sure that you have a current back-up copy of CartView.js because you are going to replace the entire script.

The following is where to place the code: (/wp-content/themes/mk4/js/CartView.js)

The following is the complete code (just copy this entire script and past it in CartView.js in place of the script that is currently there:

____________________________________________________________________________________________________

* Cart_Viewer.js

* Simple script to grab the cart data in the mk4 Wordpress theme

* This program is free software: you can redistribute it and/or modify

* it under the terms of the GNU General Public License as published by

* the Free Software Foundation, either version 3 of the License, or

* (at your option) any later version.

* This program is distributed in the hope that it will be useful,

* but WITHOUT ANY WARRANTY; without even the implied warranty of

* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the

* GNU General Public License for more details.

* You should have received a copy of the GNU General Public License

* along with this program. If not, see <http://www.gnu.org/licenses/>.

/* Functions */

//Create a div next to the "View Cart" button in the menu

function makeCartView(){

var cartURL = $("#nav ul li:last a").attr("href");

var cartLi = $("#nav ul li:last a");

var cartLiID = "activeCart";

cartLi.attr("id", cartLiID);

return cartURL;

}

//Get the cart.php resource page and pull the

//total price and number of items out, then

// insert into the cartView div

function updateCart(cartURL){

$.get(cartURL,function(cartPage){

//matches the total price from the cart.php resource page

var totalRegex = /Total.*;([\d\,]+?\.\d+)<\/b>/;

var totalMatch = totalRegex.exec(cartPage);

var totalVal = totalMatch[1];

var numItems = parseItems(cartPage);

//Should be plural unless ther is only 1 print

plurality = "";

if (numItems!=1){

plurality = "s";

}

//update the div

cartViewEl = $("#activeCart")

//if there are no items, display the boilerplate below

if (numItems === 0){

cartViewEl.html("Cart: (0) – $0.00");

return;

}

cartText = "Cart: "+numItems+" print"+plurality+", $"+totalVal;

cartViewEl.html(cartText);

return;

});

}

//pull out the references to the quantity of items, parse into a total

function parseItems(cartPage){

var itemsRegex = /(item_quantity_\d+\"\svalue=\"(\d+)\")+/ig;

var itemsMatch;

var itemCounter = Array();

//the third index of the match array will be the actual quantity

var qIndex = 2

count = 0;

//cycle through the matches and add them to an array

while((itemsMatch = itemsRegex.exec(cartPage))){

itemCounter[count] = itemsMatch[qIndex];

count++;

}

var numItems = 0;

//add up the quantities

while(count > 0){

numItems += parseInt(itemCounter[count-1])

count–;

}

return numItems;

}

/* Main */

//Wait until DOM is ready

$(document).ready(function(){

cartURL = makeCartView();

updateCart(cartURL);

//Bind to a click on the "Continue Shopping" button

//in the cart.

$('input[value="Continue Shopping"]').live('click', function(){

updateCart(cartURL);

});

__________________________________________________________________________________________________

Please note that this was written for my site but it should work in mosts sites as well (use at your own risk). If you are going to use this script as is, make sure that where you see the word "print" that you change it to the word "item" or something that is germane to your site. I hope this works out for you and good luck with your site.

Regards,

Neal

MYnd Visions Photography

May 31, 2011
9:38 pm