simpleCart(js) + PayPal = E-commerce in minutes
**update: v1.2: fixed rounding error in price formatting
**update: v1.1: back button works, no trailing comma for options
(if you want to skip right to the example and downloads, check it out here)
Over the past few years, our company has had several clients who have needed a smaller shopping cart, usually to sell just a couple of items. We generally built these small carts using paypal. I realized it would be nice to package this up, and create a lightweight, easy-to-use, flexible shopping cart.
So we made simpleCart(js). The cart is a 10.5kb javascript file that uses cookies to keep track of the items in the cart. SimpleCart(js) doesn’t require any databases or programming knowledge. You simply need to know some basic HTML and have the ability to copy and paste. However, it can easily be expanded to use databases or contain more advanced options.
Setup Paypal
The first thing you will need to do, if you don’t already have one, is set up a free merchant account with Paypal.
Add simpleCart(js) to your pages
Once you have the files downloaded, simply add this snippet to the top of any page you wish to have the cart running on:
<script src="simpleCart.js" type="text/javascript"></script>
<script type="text/javascript"><!--
simpleCart = new cart("you@yours.com");
// --></script>
You will need to replace you@yours.com with the email address you used to sign up to Paypal.
Adding items to the cart
Any page you have the simpleCart(js) running, you can add an item by simply using a link like this:
<a onclick="simpleCart.add('name=[name]','price=[price]');return false;" href="#"> link to add item </a>
You are required to at least have a name and price when adding an item to the cart. However, you can add other fields also. If you want an image to be linked to the item, you can add it like this:
simpleCart.add('name=Shirt','price=6.00','image=images/myImage.png');
Viewing the cart
You may have the cart on any page, and it will update automatically using ajax. To show the cart items on a particular page, you simply need to have an element with the class of “simpleCart_items” on the page. This element will automatically be filled with all of the items in the cart, and will show each field.
<div class="simpleCart_items"></div>
You can use any element (div,a,span,p,etc.) and the values will be put in the innerHTML of that element.
Showing the totals on a page
You can show the total quantity or price on any page by simply having an element with a class “simpleCart_quantity” or “simpleCart_total”:
<div class="simpleCart_total"></div> <span class="simpleCart_quantity"></span> items
Checkout and Empty Cart links
You can have a checkout or empty cart link anywhere on any page where the simpleCart(js) is active. You do this by simply setting the class of an element to “simpleCart_checkout” or “simpleCart_empty”:
<a class="simpleCart_checkout" href="#">checkout</a> <a class="simpleCart_empty" href="#">empty cart</a>
You can use any type of element for these, and you can put anything inside of the element. Anything wrapped in a tag with those classes will link appropriately.
Other Options
Adding other product options to items.
simpleCart.add('name=Shirt','price=6.00','image=images/myImage.png','size=XL','color=Blue');
You can also change the quantity that will be added to the cart:
simpleCart.add('name=Shirt','price=6.00','image=images/myImage.png','quantity=5','size=XL','color=Blue');
The order of the arguments doesn’t matter, and you can add as many options as you would like.
Styling the cart.
You can style this cart to fit the look of your page. The contents of the cart will start with a header row:
<div class="cartHeaders"> <div class="itemImage">Image</div> <div class="itemName">Name</div> <div class="itemPrice">Price</div> <div class="itemOptions">Options</div> <div class="itemQuantity">Quantity</div> <div class="itemTotal">Total</div> </div>
Each item in the cart will have the following form:
<div class="itemContainer"> <div class="itemImage">[myImage]</div> <div class="itemName">Shirt</div> <div class="itemPrice">$6.00</div> <div class="itemOptions">size: XL; color: Blue</div> <div class="itemQuantity"><input type="text" /></div> <div class="itemTotal">$30.00</div> </div>
And there will also be a totals row:
<div class="totalRow"> <div class="totalItems">6</div> <div class="totalPrice">$30.00</div> </div>
You can choose to omit part of the cart in your stylesheet:
.itemOptions,itemImage{
display:none;
}
Or you can hide the header or totals rows:
.totalRow{
display:none;
}
.cartHeaders{
display:none;
}
Change the order of the cart columns.
If you would like to change the order of columns or remove the columns from ever being shown, simply add a line to the top of your page:
<script type="text/javascript" src="simpleCart.js"></script>
<script type="text/javascript">
simpleCart = new cart("you@yours.com");
//Add the following line to reorder and remove item columns
simpleCart.ItemColumns = ['Image','Price','Name','Quantity','Total'];
</script>
Download and Demo
Below are links to download simpleCart(js) and to view a working Demo. One great thing about the cart being stored in cookies is that you can have your items be added on one page and the cart be on another if you wish. The demo reflects this. The main page of the sample store is here and the View Your Cart page is here.
November 1st, 2008
I love you guys for this!
November 3rd, 2008
” The cart is a 10.5mb ” > 10.5kb I think
Great great work, at last an easy way to add a cart !
November 4th, 2008
great job guys!!
November 4th, 2008
[...] SimpleCart, un système de panier e commerce avec 10k de javascript. La démo de SimpleCart est assez impressionnante [...]
November 4th, 2008
What is security like on this - seems to me that with a little js injection you could rewrite the account email address (effectively taking users to an alternate paypal account page to submit their details) Also prices could be changed before submitting resulting in paypal only charging whatever the user feels fit to pay - admittedly this may be caught by an shop admin when they come to dispatch the goods, but I’m not convinced this is all that safe.
I seem to remember that paypal enabled you to manage product catalogues with them and only pass them a product id - this way the prices are safe, as possibly is the email address as I would hope product IDs within paypal would be unique.
I do like it - simple and cool, but I have some concerns which I’m sure you guys have thought of and can lay to rest.
November 4th, 2008
Great, thank you guys!
November 4th, 2008
[...] İndirmek ve denemek için buraya [...]
November 4th, 2008
I would echo the security concerns of Jon B. Without any server side validation before sending the data to Paypal allows a hacker/shopper to set their own price before checking out. Or worst even put in some negative quantities/prices for items. Secure web apps use a mix of client side validation (for speed/user experience) and server side validation (for real security).
November 4th, 2008
[...] Infos et téléchargement Partager et découvrir : [...]
November 4th, 2008
Great idea and really nice implementation, but totally NOT SECURE!
November 4th, 2008
Thanks for the comments guys! The security issue really depends on the project you’re working with. Many times, when you use paypal with a “buy now” link, you can use js injection to alter the prices. There are a couple key points that I think are important for this cart:
-
1. Paypal won’t allow the negative values, so the scariest scenario is taken care of.
-
2. This cart, standalone, is really only meant for carts that expect a smaller volume of orders. Any incorrect order can be simply refunded, and the orders can be checked by an admin, because the frequency of orders would be low.
-
3. This can easily be supplemented with server-side validation for a larger cart. In fact, I would not recommend using this cart by itself for any large volume of sales. It was written with an expectation that it could be expanded for different situations.
-
Essentially, the security is low (ie hand-checking) when your volume is low, so you can use the cart on its own. If you have a high volume (ie hand-checking is not reasonable), this cart is an object that can easily be prototyped. If you expect a large volume of orders, I would definitely suggest this only be the front end of your cart and you should use calls to server-side scripts for validation (you may want to consider not using paypal also, depending on how large of volume you expect).
-
I will look into the item id’s within paypal. Thanks for the suggestion Jon B.
-
Thanks to everyone else for your comments. I was debating whether or not I should discuss the security in this article, and it seems like I should definitely clear some things up. Thanks for checking simpleCart(js) out…. (pun)
November 4th, 2008
This looks great! Simple and lightweight, thanks alot guys!
November 4th, 2008
Hey Brett, great work.
I agree, you should mention the security implications, and I suggest that any of your readers knowledgable on the security side of things should chime in with their comments.
Again, well done on a beautifully simple cart.
Al.
November 4th, 2008
Just a quick suggestion as far as validation (for anyone looking to use this as a front end for a larger cart system):
-
If you stored your items in a database, and used php/mysql (or your favorites server-side language) to dynamically generate the “simpleCart.add” links with the database fields, you could extended the cart object to redirect to a php call before checkout. You could use a form or parse the address, and then use a script that can compare the items and values in the cart against your database before sending the information to paypal.
-
If anyone would like, I can cook up an example script to show how this could be done.
November 4th, 2008
I was wondering if this great little cart could be implemented using google checkout?
Thanks
November 4th, 2008
Brett, most definitely. That would be awesome!
November 4th, 2008
Welldone.Süper bir paylaşım.
November 4th, 2008
Thanks for the suggestion, Mike B. I will see if I make an option to use google checkout. Check back later this week and I’ll update the cart as soon as I can get it in there.
November 4th, 2008
I’m with Mike B and would also love to use something like this with Google Checkout.
November 4th, 2008
Stellar work. Very nice.
November 4th, 2008
Impressive - but I’d prefer an E-Commerce solution that didn’t allow users to change the price of the product(s) they purchase.
November 4th, 2008
My question is can you do downloadable media?
November 4th, 2008
It is possible, but it definitely require some extra coding. You would also want to use some sort of validation during checkout (as mentioned in the comment above), because you can’t check to make sure someone didn’t use some sort of js-injection before giving them the product.
-
Let me know what you have in mind and I might be able to give you a suggestion or two as to how to implement it with simpleCart(js).
-
Thanks for the comment Jonathan.
November 4th, 2008
Really nice cart. Question, how easy would it be to integrate Google Checkout into the cart?
November 4th, 2008
Well done, Thanks.
November 4th, 2008
another question - say you have a shoe like Nike, now would I be able to add variables like shoe size and shoe color and maybe other variable that would change the price before you add it to the cart?
thanks a bunch,
Mike Brisk
November 4th, 2008
I too would love for this to be implemented with Google Checkout!
November 4th, 2008
Small bug - when you enter a non-numeric character into the quantity field of the cart, the price becomes NaN. Could be handled better, but reasonable. Problem is, when I enter a proper number after that, it doesn’t refresh back to the price - it stays as NaN.
November 5th, 2008
Nice work.
I would love to see a php/mysql example, also how hard would it be to checkout using authorize.net?
November 5th, 2008
nice one
November 5th, 2008
Is it possible to have pull down menu selecting sizes and or colours of products.
November 5th, 2008
Basically need to setup downloads for WordPress themes. The Paypal end does a pingback to validate things, but is more complex than it needs to be to redirect afterwards to a secure download page (or start a file download automatically after validation).
November 5th, 2008
It’s a really good and quick system if you just have paypal as a payment solution. I normally use Magento as a ecommerce solutions cart: you can have a look to my link here http://www.website1service.com/
November 5th, 2008
Great work! I love this script and plan to use it quite a lot. I was wondering, though, do you see yourself adding the capability to remove an item from the cart?
November 5th, 2008
Hey Stephen. Currently I just decided that you can set the quantity to 0 in order to remove and item from the cart, just to keep things as simple as possible. But its not any trouble for me to add a “remove” function.
-
I will post an update when I add that in there. Thanks for the comment.
November 5th, 2008
So you’re saying that, if I have 3 counts of “Item #1″ already in my cart and I click a link that has something to the effect of:
cart.add(’name=Item #1′, ‘price=45.00′, ‘quantity=0′);
It will remove all 3 counts of that item?
November 5th, 2008
No, I was referring to editing the quantity when viewing the whole cart. The quantity column of the cart is an input, and if you set that to ‘0′ it will remove the item from the cart. Technically you would have to use the “add” with ‘quantity=-3′ (the quantity=0 would just add zero items to the cart). I will add a remove from cart function though; it will be useful for a lot of situations.
November 5th, 2008
Thanks for the help. Again, great script.
November 5th, 2008
Hi Brett, very cool cart you’ve built here - and great demo of it - thank you for sharing it! I’d like to point out that the security concerns some are posting apply to any client-side cart solution. I’ve used a javascript function published by ‘paypalhelper’ for client-side quantity discounts on my small business web store for the past year or so without any security issues. I plan to play around with your cart and I wonder if you had considered adding quantity-discount functionality?
November 6th, 2008
pull down options in items would be a bonus
November 6th, 2008
Very nice!! But I would love to see if the items added to cart should be emailed to the seller so that he can talk to the buyer about these items via email. This can be very useful for those people who dont have a paypal account.
Guys, is that possible?
Plz reply asap.
November 6th, 2008
Hey Khurram, instead of sending the info to paypal when someone “checks out”, you could send the info to a php script that sends an email to the address specified when declaring the cart. That should work for what you’re looking for. Thanks for checking it out.
November 6th, 2008
Brett, amazing script here! I’m going to implement it into my next project.
One feature request for you also: Would love to see some sort of shipping/handling natively processed with this.
November 6th, 2008
Brett…cool script, i was trying around placing the checkout and emty links in the tables…and found quite not working….could you assist me in this…i would be a gereat help…i can send u the file what im tryimng to acheive…
Thanks..
November 6th, 2008
Hey chandra, I’m not sure exactly what is causing you problems. If you want to send me the file, I can take a look at it. Go ahead and just email it to brett@thewojogroup.com.
November 6th, 2008
EXCELENT!! I’m from Spain and i would like to change the dollar symbol for the euro’s symbols: €
I modified the js, but it the result was a problem page with paypal.
How can i change de dollar symbol for the Euro’s one, please?
November 6th, 2008
Thanks for the question Arzur. I will also add a currency feature in soon. For now, you will simply need to change the js in the “checkout” function. Where the code says currency_code=USD, simply change that to the appropriate currency abbreviation for paypal.
November 6th, 2008
hi brett… i had sent the file and looking for your suggestions on the same…
Thanks
November 7th, 2008
thank you so much!
November 7th, 2008
Dude! This is so awesome!
I’m definitely going to be using this.
Thanks
November 7th, 2008
I second for Google Checkout!
November 7th, 2008
I really like this…thanks man!
November 8th, 2008
Thankx! Your’re BIG!
November 8th, 2008
OPSS! i’ve tried what you say, Bret, i changed currency_code to EUR, and it doesn’t work. It tells me that the “shopping cart” it’s empty.
Any idea?
November 8th, 2008
Nice work!
Would it be possible to integrate this script into a PHP file, in order to hyde “simpleCart = new cart(”brett@wojodesign.com”);”?
Or, at least, is it possible to use the IPN account ID instead of the PayPal email adress?
(https://cms.paypal.com/us/cgi-bin/?cmd=_render-content&content_ID=developer/e_howto_html_IPNandPDTVariables)
Carpe Diem!
http://tradutempo.eu
November 8th, 2008
I mean “hide” ; )
November 9th, 2008
Awesome work, thank you
November 10th, 2008
brett - another bug i came across when updating quantities: if you enter quantity “0″ - it does remove the item. however, if the quantity was more than 1, it only adjusts the TOTAL price by removing only one item. ex: add 5 of something to the cart. then on the “update cart” page, change the value from “5″ to “0″ - the item disappears, and you have an empty cart, but still a total value equal to the previous value minus 1 item.
i think the “remove item” feature you’re working on will fix this. just thought you’d want to know about this bug….
November 10th, 2008
Thanks Russell, I will be updating simpleCart(js) soon with version 2.0. I will fix those bugs and add in as much of the feature requests as possible.
November 11th, 2008
Thanks Brett for posting this shopping cart; it’s very timely for my current project. I have spent a couple of days reworking it to display the way I require (for example I don’t want the sidebar) and I’m happy with the result. A couple of bugs though. I am using $*.95 for my pricing. Oddly to get a price of 8.95 or 44.95 I have to enter 7.95 or 43.95 in the code on the product page. And you are right about entering *0* (you can also change the number to negative) to remove an item from the cart; it does not, as you say, change the price correctly. Plus, if you delete items or empty the cart, then back click to the previous page and add a new item, old items return and the grand total is wonky.
November 11th, 2008
For some times I have not been impress with javascript plugins,
I am now.
November 11th, 2008
i’m getting an error page with PayPal too when trying to change the currency in the JS file to GBP.
I’ve looked high and low… and even the cart on the right displays in $’s too…
November 12th, 2008
I’m not seeing any weight info that gets passed to Paypal for calculating shipping…Am I just missing something?
November 12th, 2008
I can’t wait version 2.0!!
November 13th, 2008
I’m having problems with the currenct too. This gives stranges results. Can’t wait for the update. This is a great plugin.
November 13th, 2008
Guys, really thanks for this script, it’s just perfect!
I needed something like this to implement a sort of shopping cart on my site, but the idea was more like a list of products that you can ask more info about them by sending an email. Basically I added some code for populating a Kontactr form on my site with the cart items instead of checking out on Paypal, and worked like a charm!
November 14th, 2008
I’d like to see subtotals in the cart’s item list area to the right in the demo…
November 14th, 2008
Since we’re putting in requests:
Is it possible to add an option only in the cart that would allow for things like size; and that could also change the price if, for example, it’s not shoes but another type of item that comes in a variety of sizes, hence variable prices.
November 14th, 2008
As of now, it is possible with some custom code. But I will try to work it into the updates. Thanks for the suggestion!
November 16th, 2008
Wow… it’s fantastic! but what happend about use EUR for currency? Not work. Like Arzur (comments adobe) i’m spanish and using euros (currency_code=EUR) paypal return an error… Any idea?
November 16th, 2008
Great product but I have changed the USD to GBP and get an error regarding the link from PayPals servers everytime.
Until this is clarified and fixed I can’t use this product even though it is perfect for what I need. Could you please help us trying to change the currency codes to get a solution up and running?
November 16th, 2008
this is such a great thing — and free!
November 17th, 2008
¡Fantastico!
I’m also struggling with currency change.
I have changed the USD to EUR, the lc=US to lc=ES and added € for the Euro symbol…I still get a PayPal error and stating that the cart is empty :0(
Thanks for any advice!
November 17th, 2008
Brett,
fantastic job. Suggestion: how about allowing the user to delete one item from the cart on the right? And, maybe a running total for two or more items?
Awesome, awesome, awesome… :: click, download, sent link to friends ::
November 17th, 2008
I have got it working with GBP, took a little fiddling with the JS to iron some errors that occurred when passing any currencies other than USD.
I had to do the following to get GBP to work:
1. Remove the $ string in the JS when prices are returned with a format ($xxx.xx)
2. Change the currency code to GBP
3. Change the country code to UK
4. Remove any references to $’s in the url that is generated for Paypal.
This unfortunately means that no currency symbol is used. I have tried using the £ symbol to no luck, possibly I might be able to get it to work if I use the html symbol code for £, I will try later and post any progress.
Many thanks for this excellent product.
November 17th, 2008
This is excellent. I was looking for ages for a script to populate a cart without postback for my .net app. Security not an issue for me as I pickup the cookie contents in a secure checkout page.
Regarding the currency symbol. In the script file I just changed the “$” to “£”. Changing the charset from utf to iso might also help.
Thanks Brett. Looking forward to the “delete item” function.
November 17th, 2008
I added the delete item, its quite easy, since there is already a “deleteItem” function. If you want, feel free to mail me, I can help you, i’ve wrote that function myself for my application
November 17th, 2008
oops, just found out that my mail does not get published =P
November 18th, 2008
Fantastic script!!! It would be great if you could add an increment quantity up/down next to the quantity input box and be able to set the input to readonly.–
I think a lot of people will be interested in this script.
November 18th, 2008
It is possible to modify the code for orders via email?
November 19th, 2008
If price is 4.51 then Simple cart add 1 and calculate new price = 5.51???
To all prices who after point there are > .49 (.50; .51 ; .52 ; …) Smart Cart calculate +1.
How determine this problem????
November 19th, 2008
Hi Brett… very nice code, thanks for posting.
About the cart total logic… as a workaround I just set the event listener to a low value effectively preventing the user from adjusting quantities via the input box. But it would be REALLY great if you could add a “delete item from cart” button for each cart item. Looks like a popular request reading from above.
MuchasG!
November 19th, 2008
This is incredible, thanks WoJoGroup!
one thing that would be nice to have is a call to the number of items in the cart so you can display in a header or sidebar “You have n items in your cart” Since they are stored in cookies you should be able to call that from any page on your site, and link to the “Shop” page…
November 19th, 2008
Sorry, also just thought - how would you manage a shipping charge? Any thoughts on best practice for this?
November 19th, 2008
@Andrew: you can show how many items by adding a class=”simpleCart_quantity” to any container.
-
For everyone else having an issue with the rounding errors in price, this is now fixed in the newest version. All prices for items should work properly. Thanks to everyone for testing and finding the errors for me.
-
I will be working hard to add as many features as I can, so keep checking back! Once again, thanks for checking out simpleCart(js)!
November 19th, 2008
Incredible - thanks Brett!
November 19th, 2008
Pricing errors not fixed.
For example, I changed the prices from 7.95 (which previously displayed as 8.95) to 8.95 which now displays as 9.94.
And the addition is incorrect for the total. 9.94 times 2 = 19.88. Simple Cart adds it up as 18.89.
In fact, all of the prices have either 1.00 or 0.99 added to them.
The total at the bottom of the cart is sometimes *.*5, sometimes *.*4 but always short 1.00 for each item over one.
November 19th, 2008
Plus whatever you did made the quantity box unchangeable in the cart. You can neither delete the item by typing “0″ nor can you change the number to add more items.
November 19th, 2008
great jobs guys,
congratulations
November 19th, 2008
Whoops! Sorry Robert! I changed the wrong round function. NOW the rounding error should be fixed.
November 19th, 2008
WORKS NOW! The prices display correctly — the same as they are entered on the “product” page — and the arithmetic adds up to the correct sum. Very good. Thank you.
However, the quantities are still unchangeable.
November 19th, 2008
following said instructions to pass the currency from USD to GBP, i’m still having no joy whatsoever.
I can now see the items being displayed in GBP £, but it now goes through to PayPal and says that my cart is empty
anybody have any idea how to implement a working js file in GBP?
any help would be very much appreciated
November 20th, 2008
If name product contain ‘ (for example “Hartley’s Raspberry”) - product not add to cart.
November 20th, 2008
Tanks from fix the price error!
November 20th, 2008
Deneyip görücez
November 20th, 2008
very thank so exp.
November 20th, 2008
The quantities are still unchangeable - very speedy refresh “text” form in that write number quantities. Form is working, but very speedy have writing and click away…
November 20th, 2008
In old version form from quantities working correctly..
November 21st, 2008
Managed to add a size column by making a few changes to your code. Size is not an option, though; it is added in the code on the *product* page as one of two choices which are presented as two different icons (which makes for a lot of code under each item). Removing line 614 of version 1.2 — var ElementCheckInterval = setInterval(”simpleCart.updatePageElements()”, 2000); — makes the remove by typing *0* function work, sort of. On occasion the grand total at the bottom does not change fully.
When items are removed and the back button is clicked, to return to the previous page, items that were deleted appear to be back in the cart. Although returning to the cart usually shows them as removed unless you add another item from the page that was returned to in which case everything is put back in the cart.
Revisions are posted.
BTW: Please, could you describe the option to send the order via email, perhaps by way of cgi, (instead of to PayPal) in your tutorial above.
November 21st, 2008
This is stupid!
Not remove this line!
Only change digits -from 2000 to 20000!
November 21st, 2008
the only thing line 614 does is check the cookies to ensure all the page elements are correctly updated. If you remove this line, the items will not update when you use the back button on some browsers. If you want this to run less frequently, you can adjust the internal (1000 = 1 second). That should not interfere with the other code however.
November 21st, 2008
this may be stupid, however, that line was *checking* so frequently that my CPU was in constant use and I could not even select text on the page to copy it. I put the line back and changed 2000 to 20000 like Bars suggested. It is now possible to delete items. BUT they are put back into the mini cart displayed on that *product* page and if a new item is ordered the deleted items are put back too on the Cart page.
Using FIREFOX BTW.
November 21st, 2008
I wonder, because I am not using the side bar, which displays a scaled down version of the Cart, on my *products* pages if this is causing the trouble here?
November 21st, 2008
great cart, i actually haven’t seen another that is better for implementing into an existing interface. I dont see why this wouldn’t be one of the most widely used carts, if the security issues were resolved. maybe you can make a php version that will address these issues and eventually add more functionality (to make use of the other possibilities that come with using php).
I do have a question that I see has been asked a couple times already.
I am making a web store for a clothing company that sells t-shirts. Everyone knows that when you buy a t-shirt, your used to specifying what size (also something that is not addressed in the shoe store example). No one would buy a shirt or a pair of shoes without being able to specify their size.
I noticed the ability to add options like size, color, etc., can these options be selected via dropdown menu then submitted when the add to cart button is pressed? If so, I would really appreciate an explaination on how.
For others with the same problem, I managed to solve the tshirt size selection issue temporarily by making 3 buttons; S, M, L (small, medium,large) with a label above that says “Choose a size to add to cart”.
Thanks for the wonderful script, it allowed me to implement custom design like no other cart has.
November 22nd, 2008
Adding the sidebar to the *products* page doesn’t make any difference.
Your example Cart does the same thing as I mentioned. Watch your CPU usage when you have the Cart page open. It is constantly updating itself. Why?
And, it is not possible to delete items by typing *0* on your sample page either. Actually you can if you move really quickly, but the deleted item is still present when you click back to the product page.
November 23rd, 2008
does anyone have an answer for my question?
November 25th, 2008
Looks like a great script; any further forward on the Google Checkout thing as this is the biggie for me!
November 27th, 2008
If item name or options include letter “č” (Win1250) it breaks the functionality of cart.
We solved this by encoding/decoding the vars, but it would be nice if this was fixed in future releases.
November 27th, 2008
This is really a nice piece of work. Any chance you’d be interested in re-writing this using jQuery?
November 28th, 2008
I would like to echo the question posted by ‘P’ about the size selector. I am selling skateboards in 2 sizes and t-shirts in 3 sizes. This would be awesome to implement instead of using an image and link for each different size of each different product.
Love the cart, well done.
Can’t wait for secure PHP version.
November 28th, 2008
Wondering if anyone can help me?
Assuming the back click dysfunction can be resolved . . .
I need to split the Image category into several choices. I believe this requires an array which I am not quite sure how to write or include in the script. The reason for this is prints of the images are the product and, due to the number of images, they are stored in at least seven different folders. I do not want to move them all to one folder (there are too many), plus, rather than typing the folder location in the HTML I would like to have this information in the simpleCart javascript to reduce the amount of redundant code in the HTML.
And since, in my case, the product name and image name are identical it would also be great if the javascript could simply substitute the image *name* with the name *name*. This would also reduce the amount of code in the HTML.
December 1st, 2008
hi.. is possible add a button (text) to delete a simple product??? (not only full card).
thanx..great job.
December 1st, 2008
Hi, great work.
1 question :
How to change the currency ?
December 2nd, 2008
How about being able to use with Authorize.net or Linkpoint payment gateways?
Thanks,
Jody
December 2nd, 2008
Still very beta. Nice idea when bugs have been fixed. When will this be fixed or has the author given up?
December 2nd, 2008
Thanks for all the interest, everyone. I will hopefully get a chance to work on making all of the fixes and feature requests later this month. As of now, here are the big ones:
-currency/international
-google checkout
-select for options
-more secure php implementation
-delete item
-fix back button bug w/o using constant monitoring
-shipping
-other checkout gateways
+Thanks again for your suggestions, and I will try to start knocking some of these off the list throughout the month. Please let me know if I am missing anything here.
-
December 2nd, 2008
One thing missing from list is the ability to increment quantity up/down. Keep up the great work Brett, so many people will love you for this.
December 2nd, 2008
Thanks again for your efforts Brett.
One last suggestion (along with my requests above regarding variable folders for images and replacing “image” with “name”) . . .
Is it possible, rather than inserting a fixed price for each item (which is likely to change over time) to insert in the HTML a price code which the javascript reads and then inserts the appropriate price? So instead of …’price=11.95′,… one could type ‘price=price1′, or something like that.
http://www.silverplains.ca/test/simple_cart/sc_images_forbs.htm
December 2nd, 2008
I’ve seen something like this, but this is much more fancy, man. Here in Croatia is impossible to redraw money from PayPal, so I would like to accept orders via e-mail. Can you make one version with direct mail sending to seller’s e-mail adress, instead PayPal? I tried to modify the script, but I get lost…
December 3rd, 2008
This is what I needed for my small shop.
I intent to sell “one of a kind products”, so my question is …
How can I set up your shopping cart script such that only 1 quantity will be added to the cart per product no matter how many times the user click that product.
Thanks Brett!
December 3rd, 2008
This is perfect for small clients! One question, we;re using FancyZoom, but in the pages we have it it resets the items on the cart to 0, my guess is that since FancyZoom depends on the onload to get activated is where it’s happening, any thoughts how they can live together?
Here is the page:
http://sw.alonsocreative.com/site/dev/product-base-fancy.php
Thanks for any help!
December 3rd, 2008
Please, i need change $ to € in “add to cart” and “checkout button”
I changed: 1-”¤cy_code=EUR” +
2-”&lc=ES”;
3-return “€” + temp + “.” + change
And nothing….
December 3rd, 2008
Hi Brett,
I am having some trouble. When I add 2 or more items to the cart and then checkout to paypal, it shows the correct price, but it only shows the title of the first item in the cart.
eg.
T-Shirt 1 -> $120
instead of:
T-shirt 1 -> $40
T-shirt 2 -> $40
T-shirt 3 -> $40
Any ideas?
December 4th, 2008
been following this for a while, only had time to implemented today, the idea is just perfect.
from the comments above I guess you are overwhelmed by the response, bet you never expected this.
best wishes and thanks
December 4th, 2008
Does anyone know if it’s possible to add an input field to a product so that users can type in a name?
For example, selling a t-shirt with the following product options:
“Product A”
-Price: $50
-Size: Large
-Color: Black
-Custom Name (this is where the emtpy input field would be)
———————-
Once a user enters custom text into the input field, I’d like simpleCart to carry over the info to the shopping cart and then pass all the information to Paypal when they hit checkout.
Is this possible???
December 4th, 2008
OK, we switched from fancyzoom to fancybox, a bit of work but totally worth it for this script!
Keep it up Brett, I’ll definitely follow further development and any other things Wojo comes up with!
Cheers
December 4th, 2008
Hello Brett,
Thank you for a great script! This is really cool!
I’m just trying to use with some modification, let user allow to enter amount of numbers at first but facing difficulties.
Simply, I’d like to update quantities from out side of simpleCart generate form field just like below.
~
in this case, ‘quantity’ value cannot be replaced so always add with ‘new_quantity’ & ‘price’.
I know this is not how you intend to use, so if you have spare time, would you give me a help ?
Thanks again for simpleCart,
December 4th, 2008
<input simpleCart.updateQuantity(…)>
~
<div class=”simpleCart_items”></div>
stripped html tag … sorry about that
December 6th, 2008
Seems to be problems with the download on all IE browsers I can test; demo works fine, but download does not (neither the standard JS or the uncompressed work ‘out the box’ with no alterations). Test done on Win XP on IE7, IE6 and IE5.5, all fail. On clicking ‘Add to Cart’, nothing happens.
Going to see if I can grab the JS from the online demo as that works ok in browsers.
December 6th, 2008
Panic over; got it working, related to this line:
{Q.push(new RegExp(”(^|\\s)”+H[I]+”(\\s|$)”))}
I’d changed the dollar for a pound sign, mistakenly thinking this had to be done to change currency usage; alas not. Strange thing was, changing this rendered no effect on Firefox which worked as normal, but caused upset on IE.
December 6th, 2008
hmmm…. not sure whats going on there Andy. I will have to look over the code again… i have made a few quick fixes over the past week or two, and something may have caused the errors that I didn’t realize before uploading. I am planning on implementing the new features and fixing the known bugs by the end of the month, and I will do some rigorous testing before releasing 2.0. Thanks again for trying it out everyone, cottonfizz had it right, I am pretty surprised by the popularity. I will try to get everything working for you guys as soon as I can, thanks for your patience, and keep the comments coming; you guys have been a huge help.
December 6th, 2008
I forgot to report earlier… After unpacking demo zip, in destination folder found some files without extensions. Starting demo html shows nothing. After correcting extensions (*.js and folder with the pictures) everything’s fine. Don’t know the reason, running Vista Premium.
December 7th, 2008
Brett. Just wanted to reiterate what others have said. You came up with a great idea, and and very nice little script here. Very easy to integrate into different CMS’s. I am using cmsimple… and this works great. Thanks!
December 7th, 2008
I would love to give this a try, but unfortunately when I try to unzip I get an error message, something about the syntax being wrong.
Can you help me with this?
December 8th, 2008
Managed to add the various folders for the images to simpleCart.js which saves much coding in the HTML files. Involves the changes shown on lines 262 - 273 and 476 - 478 of my altered version of your code.
http://www.silverplains.ca/test/simple_cart/sc_images_forbs.htm
December 8th, 2008
Does anyone know if it’s possible to add an input field to a product so that users can type in a name?
For example, selling a t-shirt with the following product options:
“Product A”
-Price: $50
-Size: Large
-Color: Black
-Custom Name (this is where the emtpy input field would be)
———————-
Once a user enters custom text into the input field, I’d like simpleCart to carry over the info to the shopping cart and then pass all the information to Paypal when they hit checkout.
Is this possible???
December 8th, 2008
Kmede: you could use something like: onclick=”simpleCart.add(’name=Product A’, ‘Price=50′, ‘Size=Large’,'Color=Black’,'Custom Name=’ + document.getElementById(’formInput’).value );”
-
Something like that should work. It will also work for using a dropdown of options. Hope that helps.
December 8th, 2008
modifications required to use this script in the UK - define these after you get you simpleCart object:
simpleCart.returnFormattedPrice = function( price ) {
temp = Math.round(price*100);
change = String(temp%100);
if( change.length == 1) {
change = “0″ + change;
}
temp = String(Math.floor(temp/100));
return “£” + temp + “.” + change;
};
simpleCart.checkOut = function() {
if( this.totalItems == 0 ){
alert(”Your cart is empty!”);
return false;
}
var winpar = “scrollbars,location,resizable,status”;
var i,j=0,des,counter;
var strn = “https://www.paypal.com/cgi-bin/webscr?cmd=_cart” +
“&upload=1″ +
“&business=” + this.userEmail +
“¤cy_code=GBP” +
“&lc=US”;
counter = 0;
for (counter = 0; counter < this.items.length; counter++) {
tempItem = this.items[counter];
j = counter + 1;
strn = strn + “&item_name_” + j + “=” + tempItem.getValue(’name’) +
“&item_number_” + j + “=” + j +
“&quantity_” + j + “=” + tempItem.getValue(’quantity’) +
“&amount_” + j + “=” + tempItem.getValue(’price’) +
“&no_shipping_” + j + “=” + “0″ +
“&no_note_” + j + “=” + “1″;
if( tempItem.optionList() ) {
strn = strn + “&on0_” + j + “=” + “Options” +
“&os0_” + j + “=” + tempItem.optionList();
}
}
window.open (strn, “paypal”, winpar);
return false;
};
December 10th, 2008
Hey Brett,
Thank you for helping me with above post dated Dec 8th. We added the code and it works fine in IE 7, but it doesn’t work in Firefox, Opera, and Safari. I’m using the latest versions of those browsers.
Do you have any idea of what might be happening?
Here is the sample cart that we modified: http://www.supportfresnostate.com/simplecart
I added the input field to the first “Red Shoe” item. Again, IE works perfectly but no luck with the other browsers. That’s the last thing we need help with to get our simpleCart up and running.
Thank you for your help!
PS-I’ll donate a coffee or two as thanks!
December 10th, 2008
Hey Kmede, make sure you use an id=”formInput” for the text field. You will need to have an id on that in order to access it in the other browsers.
-
input type=”text” name=”formInput” id=”formInput”
December 10th, 2008
Hey Kmede, that page of yours seems like messed up a bit. Some products are on the bottom of the page. I’m running IE7.
December 12th, 2008
Brett,
Incredible script. I have been looking for this for a long time, and you have made my day.
Dying to see a “remove item” functionality. Also, entering in quantities doesn’t work for me… FF3 Mac. Not sure why… I’ll check it out again. May be the refresh/cookie check.
December 12th, 2008
One more Q… is there any way to have the total items read as a number rather than an equation?
December 12th, 2008
brilliant!!
December 12th, 2008
hi .. no idea to add a button to delete a simple product??? (not only full card).
:~(
December 12th, 2008
STAY AWAY FROM PAYPAL and it’s 21-180 days withholding of users funds per it’s User Agreement amendments allowing this at Paypal’s “sole discretion”!!! Read Paypal’s User Agreement! Paypal is NOT federally protected AND per their own policies, Paypal is NOT responsible for ANYTHING that happens to your money while in their service!!!
BEWARE!!!
Parent company ebay inc. is taking your money! Fire ebay’s CEO, John Donahoe, Now, before it’s too late!
Search the internet for “Ebay Stockholders and Sellers Calling For Immediate Termination of John Donohoe CEO”
at petitiononline.com
see what ebay/Paypal’s own employees are saying about the corruption by going to glassdoordotcom!
December 12th, 2008
Well, I don’t like them, too. Hope Brett would make some other payment options…
December 12th, 2008
I figured out how to integrate this with Paymate.com
Using a couple of PHP pages.
A sweet alternative to paypal.
Email me if you want me to send you the code.
jordan (at) jaycodesign.co.nz
December 12th, 2008
Brett, amazing script! Thanks for offering it to the world.
Two more questions:
1. How can I add onFocus=”this.value=”” to the qty field in the cart? I’d like the user to simply click the field to clear it when updating qty or removing items.
2. Your suggestion to Kmede on Dec. 8th didn’t quite work for me. Could the syntax be wrong?
December 16th, 2008
Amazing script ! Can’t wait for the 2.0 release. Any news about that Brett ?
Thank you for this great tiny script.
December 17th, 2008
can i put worldpay in simplecart?
December 17th, 2008
Hello!
Tell me please, can Your simplecart be modified so that it doesn`t use paypal, but the information about the customer`s order is sent to written (site admin`s) e-mail and customer`s e-mail?
December 19th, 2008
The app is so cool, but a erase button should be better and a option to change the quantity.
December 19th, 2008
Just realized something that maybe could help…
I did some buttons for paypal some time ago, if the checkout is being made with a POST function then a “hacker” couldnt change the variables shown in the address before loading Paypal.
Dunno, maybe helps.
December 20th, 2008
This is really incredible! Thanks for the hard work Brett. Has anyone had success using a PHP mailer script with this instead of paypal?
December 23rd, 2008
Hey Brett!
I just looked at Robert’s script what he had done using simple cart was pretty cool, i just implemented the same in my script…but got stuck in displaying the cart selections…could you or Robert help me out in fixing the same…here is where the link is http://flash.ezautomation.net/configurator/eztouchplc/config.htm , i need the quantity to be input filed and the row to be in one line…i’ll keep updated if i could fix the same…still looking for your suggestions
December 24th, 2008
Hey Brett…Thanks for such a wonderful script… Robert..thank you too…got that working…
Thanks
December 29th, 2008
Great Job!!!
I think the same that juan carlos
How I can to delete a simple product?
Thanks.
December 29th, 2008
news about a button to delete a simple product???
thanx
December 29th, 2008
modifications required to use this script in the EUR. Define these after you get you simpleCart object:
this.returnFormattedPricePP=function(B){
temp=Math.round(B*100);
change=String(temp%100);
if(change.length==0){
change=”00″}
else{
if(change.length==1){
change=”0″+change
}
}
temp=String(Math.floor(temp/100));
return”"+temp+”%2e”+change;
};
simpleCart.checkOut = function() {
if( this.totalItems == 0 ){
alert(”Your cart is empty!”);
return false;
}
var winpar = “scrollbars,location,resizable,status”;
var i,j=0,des,counter;
var strn = “https://www.paypal.com/cgi-bin/webscr?cmd=_cart” + “&upload=1″ + “&business=” + this.userEmail + “¤cy_code=EUR” + “&lc=ES”;
counter = 0;
for (counter = 0; counter < this.items.length; counter++) {
tempItem = this.items[counter];
j = counter + 1;
strn = strn + “&item_name_” + j + “=” + tempItem.getValue(’name’) +
“&item_number_” + j + “=” + j +
“&quantity_” + j + “=” + tempItem.getValue(’quantity’) +
“&amount_” + j + “=” + this.returnFormattedPrice(tempItem.getValue(’price’)) +
“&no_shipping_” + j + “=” + “0″ +
“&no_note_” + j + “=” + “1″;
if( tempItem.optionList() ) {
strn = strn + “&on0_” + j + “=” + “Options” +
“&os0_” + j + “=” + tempItem.optionList();
}
}
window.open (strn, “paypal”, winpar);
return false;
};
December 29th, 2008
I have an error in first line of js. Change the line:
this.returnFormattedPricePP=function(B){
for:
this.returnFormattedPrice=function(B){
December 29th, 2008
I’m also burning for the 2.0, for checkouts via email instead of Paypal.
But for the moment… thanx a lot for your work Brett! And for sharing it!
December 30th, 2008
Merry Xmass, people. I quess Brett was very bussy playing games… Come on, man. You can’t just leave a bate like this and NADA…
December 30th, 2008
Sorry everyone, I have been quite busy with things other than video games…. and video games… I promise that simpleCart(js) 2.0 will be one of my top priorities for the new year. helloRent.com has been taking up a lot of time, but I will put aside a day or two for the new release.
-
Please let me know if there are any other feature requests/bug fixes for 2.0.
-
Happy holidays everyone.
December 31st, 2008
Brett: Thanks for a great script. I’m sure I’m going to appreciate this even more as my time with it goes on.
Question: On Nov 19 Andrew wrote about showing the cart quantity. Brett replied with the answer and I’ve found that it works. The trouble is my lack of knowledge. I am trying go get this show on the same line as my text. For example:
“You have # items in your cart”.
But the quantity shows on a separate line. I tried moving the code to the same line:
There are items in your cart
But no luck. Anyone out there (perhaps Andrew?) know how I can remedy this?
Thanks in advance.