Just discovered the the excellent script.aculo.us drag and drop shopping cart it is implelmented with the script.aculo.us javascript library and ruby on rails.
It is a perfect fit for a project I am working on but I needed a PHP version here is the rough first draft with source code,
tom westcott beta 2.0
December 29th, 2005 at 11:12 pm
Spiffy! I’ve seen the Ruby on Rails version and you did a nice job emulating it!
December 30th, 2005 at 1:02 pm
thanks! your examples really inspire me!
December 30th, 2005 at 6:25 pm
This is really cool. I was ‘drawing it on paper’ looking at building a prototype for a client, but what if the page scrolls with products?
I know your example wasn’t meant to be a solution to this, but I thought I’d bring it up in case anyone (including myself) can think of a possible simply solution.
It may be more cumbersome to have Drag/Drop all the way to the top of the page. This is where clicking ‘Add To Cart’ would make more sense.
I guess this would be a great solution as well for CMS where you have a grid of records and you can drag and drop into a wastepaper basket….(Of course they wouldn’t delete) until you hit DELETE button. Hmmm. Maybe I’ll do that for now.
January 4th, 2006 at 6:01 am
Hi, I got some questions:
1)- It’s possible to obtain products from a Date Base, showing 10 products per page?
2)- Make a check out button to Email all Products Added to the Cart Box to deliver?
Well i have to say that i’m not speek english so well but i wanna tell you that your example it’s the best… i have been searching for somthing like this on Ajax Aplications and nothing works like I want.
Thanks!, Cheers!
January 19th, 2006 at 3:12 am
Wonderful example ;
How can i get this working on my machine? I’ve got all the code and files, do i need to set up a db connection?
or are you able to .zip it all up?
January 30th, 2006 at 4:41 pm
cientos de ejemplos en AJAX listos para ser usados en tu site
Encontrado en el site de emily chan (ehub), es un site con cientos de códigos AJAX disponibles para ser usados.
January 31st, 2006 at 1:02 pm
[…] JAX por Administrador el 31 de January, 2006
Urgueteando por la web, me deparo con un link donde se encuentran scripts, algunos usando la librerÃa Javascript script.acu […]
February 7th, 2006 at 9:40 pm
Hey BJ,
You could always try a floating div that moves down with the scroll of the page, that could be your cart? While the images are cool to have in your shopping card you could just have text to save space.
ty
February 11th, 2006 at 4:56 am
[…] ind. Nacho Libre Trailer Jack Black as a luchador. Doesn’t get any better than that. Drag and Drop Cart in PHP Tom Westcot has made a PHP version of the infamous […]
February 24th, 2006 at 6:44 pm
Interesting site and good information.
I just put up a new site that uses AJAX combined with IFRAMEs. (http://www.wackyquote.com) It’s a blog toy that people can add to their sites. I used AJAX to allow interactivity with the users without page reloads. It was a fun project to do. I think all my web projects from now on will involve AJAX.
March 3rd, 2006 at 7:17 pm
This is cool, nice work.
March 8th, 2006 at 1:31 am
that’s awesome!!! really. the best Ajax example I’ve ever seen. Also the username check one is excellent too. you rock mate!
March 15th, 2006 at 9:40 pm
Does anyone want to undertake a BETA of this Drag n’ Drop shopping cart? If so let me know because I have a company who can promote and sell it. Email me at ralphposadas@cacninc.org for more details.
Great scripts!
March 16th, 2006 at 4:01 am
Is there anyway someone could translate the PHP version over to ASP version?
Thanks,
David
March 16th, 2006 at 6:42 am
Hi,
Here is a more practical implementation of our drag drop script:
www.soundcrafts.co.uk . Please see that you can drag and drop items into cart, delete them, and checkout.
Waiting for your comments
Thanks,
Khaqan Mahmood,
Artologics Software
www.artologics.com
Easy Ecommerce Stores
March 17th, 2006 at 11:32 pm
it doesnt work for me
when I drag items in to the cart - they won’t show up there. just empty cart…
do I have to change something in php.ini ?
March 26th, 2006 at 7:35 am
@unu copy all the js file, and do not rename de cart.php file. Some Ajax functions use the name. Good luck!
March 27th, 2006 at 9:26 pm
I renamed cart.php to index.php - and seems that was the problem
thanks Dan!
April 6th, 2006 at 2:32 am
=)
April 24th, 2006 at 4:39 am
hey,
That was ann awesome piece of code..wonder what those javascripts look like…
May 6th, 2006 at 8:45 am
Great Example and easy way of demostration.
It is great.
regards
Satya Prakash
May 18th, 2006 at 10:35 am
Please see our version of drag drop shopping cart on www.soundcrafts.co.uk
May 31st, 2006 at 5:49 pm
hi I am a website designer, I dont know much about coding alittle html here and there and sometimes i dabble in javascript. I like your solution the drag and drop feature, when i showed it to some of my clients they went nuts and said they needed it.
I was wondering if you could provide this solution to me and my clients on a per client basis, I promis to credit you with a developed by page on all my clients websites.
How well does your drag and drop work with thousands of products with thousands of images. do the PNG files get to be quite large and cumbersome. not that I would have more than say 20 products on a single page but i was just wondering to what extent have you tested it, is it scaleable?
thanks,
Drew Dupont
Organic Photography & Website Design
1723 Olive Street West
Stillwater MN 55082
(612) 807 7045
May 31st, 2006 at 6:03 pm
I was testing your version and found that once you exceed the amount of items beyond the size of the shopping cart/ however unlikely in reality it simply extends beyond the boundry. Also for ordering multiples of the same item say i wanted 20 t shirts for all the people at my office ect. ect. adding 20 t shirts is cumbersome one at a time , wondering it you could impliment a right click feature inside the cart that you can change the quantity and have some sort of scroll or summary icon to represent larger numbers of items that dont fit within the peramiters of the shopping cart due to volume.
get back to me whenever
Drewdupont@gmail.com
June 3rd, 2006 at 9:04 am
I love this demo!
Thank you!
What should I do if I would like to handle more cart on a page?
How can I send parameter that in which cart made the user his modification?
Now we send just one parameter that which element add or drop, but I would like to send the ID of the cart, too.
Thank for helping me!
dj
June 10th, 2006 at 11:31 pm
I noticed that this script has Problems in Internet Explorer…have you guys noticed that?
Sometimes it is hard to replicate the problem, sometimes it does it on the first try…you can try repeating me to see. All I do is add a few items into the cart, and then I drag them into the garbage in different locations in the trash and eventually it won’t let me drag from the cart to the garbage again…it won’t let me click on the items and move them. It WILL still let me drag/drop the main items, but not the ones in cart.
Any ideas why? Firefox is perfectly fine.
June 11th, 2006 at 12:24 am
As I said before this is hard sometimes to replicate but it does happen…I rebooted the computer and even tried the Scriptaculous version and it also had the same problem, so not just this PHP version of the code. It is as if I lose the ability to select the item in the trash…I can right click on it and it know there is something there, but I just can’t move it anymore.
Regarding my previous post, where I detail how I got the error to come up…if you can’t do it by simply dragging then do this: pic an item in the cart and just let it go, do it for a few of them, some you drag to the trash, some you just pick up and let go…eventually you can get it not to react at all to you. This is hard to explain in text but I’ve been able to replicate it several times but only in IE.
Thanks.
June 19th, 2006 at 2:03 pm
Really nice work!!
June 20th, 2006 at 10:46 am
[…] During my exploration of AJAX techniques, I came across a like-minded individual who loved the Ruby on Rails version but needed a PHP version. Since I am still learning, I took a look at the PHP-version source and customized it….just a little. […]
July 29th, 2006 at 2:05 pm
FANfuckingtastic mate, great job… well done!
August 10th, 2006 at 7:37 am
Further to the internet explorer problem. I am encountering similar problems with IE. I have tracked it down a problem with dragdrop.js . When I drop an image to the drop area / cart and refresh a windows error informing me that IE “cannot open the internet site http://sitename. operation aborted” is displayed. You then have to close IE before you can access the cart again. Everything is fine in Firefox.
I found a posting which seemed to be the solution for me but unforunately this didn’t work form me.
Any thoughts would be appreciated.
Oh yes, forgot to say that it is a realy nice script.
August 10th, 2006 at 7:41 am
Further to the internet explorer problem. I am encountering similar problems with IE. I have tracked it down a problem with dragdrop.js . When I drop an image to the drop area / cart and refresh a windows error informing me that IE “cannot open the internet site http://sitename. operation aborted” is displayed. You then have to close IE before you can access the cart again. Everything is fine in Firefox.
I found a posting which seemed to be the solution for me Transcraft but unforunately this didn’t work form me.
Any thoughts would be appreciated.
Oh yes, forgot to say that it is a realy nice script.
August 11th, 2006 at 1:51 pm
I am looking for a an example that will allow me to build a mobile version of a page by dragging elements from one list and dropping onto the other without deleting the items from the originating list. So, basically it is similar to a photoshop toolbox or a visio stylus on the left hand side and when I drop it onto another list/column, it should transform into the corresponding HTML elements that I can edit.
Could someone please point me to an example? Any help greatly appreciated.
September 5th, 2006 at 12:47 am
Help!
I’ve made a shopping cart that uses the script.aculo.us library. You can see it here: http://www.trebrown.com
I don’t use IE, I don’t intentionally build with it in mind but I’ve discovered that there are some IE bugs somewhere in my scripts, but I have no idea where to start. If anyone can hint at what might be causing them I would be most appreciative.
First one =
Line: 32
Char: 1
Error: Object doesn’t support this property or method
Code: 0
URL: http://www.trebrown.com/shop/index.php
Second = (This one apears to be in prototype.js)
Line: 1023
Char: 5
Error: ’style’ is null or not an object
Code: 0
URL: http://www.trebrown.com/shop/index.php
Now on that first page “shop/index.php”, which is just a demo both those errors occur but on all other pages that have drag and drop only the first error occurs.
Now I can give you more information, but I’d like to here some of your guesses if I may?
September 12th, 2006 at 1:48 pm
love the silly easy shopping cart.
I’ve been trying to resolve it with another drag and drop library though so that the cart can be sorted ( i’m not using it for an ecommerce implementation ), so i’m looking for a way to integrate the sorting in two dimensions from http://tool-man.org/examples/sorting.html with your silly easy shopping cart. But i’m better at php than with javascript. So I was wondering if you ( or anyone ) has any pointers on how to go about doing such an integration between the two scripts.
I have a test page set up at home which just tries to use both scripts at the same time, and while it doesn’t cause any errors on the page, it doesn’t work either.
any help/advice appreciated.
thanks
October 13th, 2006 at 1:05 am
What if you want to link the items? EG if you click ‘mug’ you get a close up of ‘mug’ in a new page.
The problem is this:
the onDrop function fires the image’s link and not the Ajax.Updater. This happens with both href and onclick. Is there a work around?
November 3rd, 2006 at 2:22 pm
Prototype Carousel is great withAJAX support, We hope a PHP version of this, modified with xajax not prototype
December 26th, 2006 at 4:35 pm
Very good your scrit to served to me as much! I been implementing and I to had left but wanted very well to do it far better but I have a problem: When putting the picture within a Div called by AJAX the picture does not move …… I assume that there is to make some change in the container of picture in some of the Js archives. I am in the certain thing? where I can make the changes? or it is not possible to do it….
January 15th, 2007 at 2:59 pm
Fantastic example! My client wants exactly this functionality for his new shopping cart but the coding is way beyond me. Here is the spec:
Drag & drop cart
Checkout goes straight to PayPal without requiring user registration
Probably no more than 20 or so products
Simple as that
Is anyone interested in developing this or perhaps helping me to develop it?
March 4th, 2007 at 9:08 pm
Hi,
Could you help me a bit. I just loved the script but making the checkout is not included on that you mentioned there that you used the script some where? could you give me a suggestion which would be the best way to do the check out part and sending an invoice…
the script would be used in one cloting shop and one publishers webshop.
thanks in advance.
Regards,
Eetu
March 19th, 2007 at 8:40 am
how much would you give me for the answer? I already have this software ready for sale.
April 6th, 2007 at 9:29 pm
i love you. thank you SO MUCH FOR THIS. you have no idea how much of my ass you’ve saved.
April 7th, 2007 at 8:19 am
I would like to use drag and drop,slider bar components in a jsp (developed using Java Server Faces) pages. So can i have the code for that.
April 26th, 2007 at 10:28 am
very nice interaction. Keep pushing and develop new application like this one, it really helps the web and make it easier for users…
June 13th, 2007 at 11:37 pm
Hi,
very good work!
I was trying to use it for my project but when I drop an item it tells me “You don’t have permission to access /cart.php on this server.”
and
“Additionally, a 404 Not Found error was encountered while trying to use an ErrorDocument to handle the request.
Apache/1.3.37 Server at www.xxx.com Port 80″
Do you know if I need any specific server configuration? I copied cartp.phps and renamed it to cart.php, and copied everything in the folder shop_files.
Am I missing something?
Thanks a lot
June 24th, 2007 at 6:02 pm
Excellent, this is something i was trying to do for an application, not exactly the same but very similar and this just have saved me a lot of time. I’ll get sure to return here once i make some profit.
June 26th, 2007 at 12:08 pm
Hi All,
I think what I’m about to ask sounds very simple….but I had no lock yet.
What I want to do, starting from the MultiList D&D (http://www.cyberdummy.co.uk/test/dd.php)
is to CLONE the objet instead of MOVING IT.
I’ve tried to comment out:
this.parentNode.removeChild( this );
in dragdrop.js but… no luck.
Any help is greatly appreciated!!
Fab
July 9th, 2007 at 3:31 pm
Any idea how you would assign values to the products on a basic level with no mysql and spit out a total? I am drag and drop a quote form for services, but i need a price to show at the end!
August 2nd, 2007 at 12:53 pm
Awesome script..
However I’m having 1 problem. I copied the script files needed and loaded them on my local server. Everything is working properly except the calculations. When ever I drag a new item to the cart it replaces the other. If its the same item it will add it correctly tho. But I can’t have different items in the cart at the same time.
Any suggestions?
August 9th, 2007 at 6:24 am
Great effort ! Nice integration and smooth running.
August 15th, 2007 at 5:32 pm
It is a nice demo page. I am an ASP.NET guy and don’t know PHP. But, I learned it through the demo plus the scripaculous drag n’ drop functionality. Is it possilbe for you to me the style.css file that is linked in this demo code.
Thanks,
-Lee
August 16th, 2007 at 12:27 pm
Never mind.
I got it from it from the path.
August 26th, 2007 at 2:15 am
It’s been some time since this was first posted…surely there are some smoking implementations of drag and drop carts with automatically tabulated checkout totals etc. Does anyone know of any sites?
Thanks…
September 25th, 2007 at 5:13 pm
I changed the wastebin div to the div of my main content and the products div is a fixed div on the bottom of the page. But it’s only working in Firefox. Any ideas?
Thanks in advance.
September 28th, 2007 at 11:06 am
nice work…..it is of great help to me
but 1 thing i cant get is that the items are being added in the cart in the form of array..I want script such that items r added in the cart in 1 row only
October 16th, 2007 at 5:09 am
Im having so many problems with my websites shopping cart and im interested in the drag and drop cart. does anyone have any info on how to obtain one on my site. My stores URL is http:www.jokersracing.com any feedback??
December 18th, 2007 at 7:37 pm
Hi all - just found this blog and thought you’d like to see how a wordpress site looks with an e-commerce plugin that offers the drop shop facility- Its just been officially released the site and in final stages of testing / cleaning up. www.wadsworthkawasaki.co.uk
Interested in what you think?
Merry Christmas
Graham