Shopping Cart Counter

I know you’re probably wondering why would anyone need to code a “Shopping Cart Counter” for their e-commerce site these days.  Frankly I can’t think of an open source e-commerce platform that doesn’t come with this feature “out-of-the-box” ready.  There are, however, those of us still running e-commerce platforms that are outdated and void of certain functionality and feature sets, like a “Shopping Cart Counter”.  What I needed was a JQuery script that would calculate the sum of all input values from “Quantity” name attributes compiled on a “Shopping Cart Review & Checkout” page.  Then render a message like “There are 2 items in your Cart !” displayed at the top of that page.  First of all the script, see below…

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<script type=”text/javascript” src=”https://code.jquery.com/jquery-1.12.4.js”></script>
<script>
$(document).ready(function(){
//iterate through each input field and add ready
//handler to automatically trigger sum event
$(‘[name^=”Quantity”]’).each(function() {
$(this).ready(function(){
calculateSum();
});
});
});
function calculateSum() {
var sum = 0;
//iterate through each input field and add the values
$(‘[name^=”Quantity”]’).each(function() {
//add only if the value is number
if(!isNaN(this.value) && this.value.length!=0) {
sum += parseFloat(this.value);
}
});
//.toFixed() method will round-off the final sum to 0 decimal places
$(“#sum”).html(sum.toFixed(0));
}
</script>

Next, from our cart form, we need to retrieve and add all the input field value numbers where the name attribute “Quantity” is identified, like below…

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<tr class=”content”>
<td data-th=Product:><a href=”product.htm?Product=1100269&Source=Cart” tabindex=”-1″>1100269</a><input type=”hidden” name=”Line1″ value=”001″></td>
<td data-th=Description:><input type=”text” name=”Quantity1″ size=”4″ maxlength=”9″ value=”1″ tabindex=”1″ class=”txt qty”></td>
<td data-th=UM:>Elmer’s Washable School Glue 4oz</td>
<td data-th=”&nbsp;”>&nbsp;</td>
<td data-th=UM:>EA </td>
<td data-th=Price:> 1.55</td>
<td data-th=Per:>EA </td>
<td data-th=Ext:> 1.55</td>
<td data-th=Remove:><input type=”checkbox” name=”Remove1″ value=”Y” tabindex=”-1″></td>
</tr>
<tr class=”content”>
<td data-th=Product:><a href=”product.htm?Product=1100269&Source=Cart” tabindex=”-1″>1100269</a><input type=”hidden” name=”Line2″ value=”002″></td>
<td data-th=Description:><input type=”text” name=”Quantity2″ size=”4″ maxlength=”9″ value=”1″ tabindex=”2″ class=”txt qty”></td>
<td data-th=UM:>Elmer’s Washable School Glue 4oz</td>
<td data-th=”&nbsp;”>&nbsp;</td>
<td data-th=UM:>EA </td>
<td data-th=Price:> 1.55</td>
<td data-th=Per:>EA </td>
<td data-th=Ext:> 1.55</td>
<td data-th=Remove:><input type=”checkbox” name=”Remove2″ value=”Y” tabindex=”-1″></td>
</tr>

Now at the top of the page the displayed message is rendered using id=”sum” to parse the string and return a floating point number, see the styling below…

1
2
3
<div style=”background-color: rgba(255, 255, 0, .5); color:#000000; text-align:center” alt=”There are items in your shopping cart !” title=”There are items in your shopping cart !“>
There are <span id=”sum” style=”font-size:1.2em; font-weight:900; text-decoration:underline;“>2</span> items in your shopping <i class=”fa fa-shopping-cart fa-lg” alt=”Cart” title=”Cart“></i>&nbsp;!
</div>

Visual cues are important markers that quickly remind customers about what they’ve been experiencing while browsing your online store.  If the cart looks empty you better have a good re-marketing strategy to bring them back, better yet don’t let them leave because they didn’t know.

Add features that Shoppers can count on!

David


David Moores

Advanced knowledge of web server deployment, database management systems, and server-side scripting languages. Strengths lie in digital analytics, metric components and the implementation of data tracking methods for mining interpretation. The body of my work has been a balance of problem solving and technical know-how. I love a problem and love solving them even more!

Leave a Reply