Download fly to basket script

Demo

Bookmark and Share

Download files

You can download the script from this Zip file

Files included in the package:

  • fly-to-basket.html = Main HTML file for the demo
  • js/fly-to-basket.js = Javascript code for this script
  • js/ajax.js = Ajax (Library from http://twilightuniverse.com/projects/sack)
  • addProduct.php = Server side file which retreves productId from the script and adds it to the basket
  • images/* = Images for this demo

Configuration

This is the HTML for products on the page

<div id="slidingProduct1" class="sliding_product">
  <img src="images/product.gif">
  Calendar<br>
  50.00
</div>
<a href="#" onclick="addToBasket(1);return false;"><img src="images/basket.gif"></a>

There are two important things you have to notice here:

  • The id of the div have to be slidingProduct<product ID>, example: slidingProduct1 for the product with ID "1" in your database.
  • . This is the div that will "fly" to the basket.
  • Call the function addToBasket(<product ID>) to add products to the basket. Example: addProduct(1) to add product with ID=1 to the basket

addProduct.php

This is a PHP file which is called by Ajax when a product is added to the basket(It's not required to use PHP. You can create it in ASP, JSP or other server side language). This file receives a variable named "productId". Then, this file should update the content of the shopping basket in a database. Finally, it outputs a string in the following format:

product ID|||Product description|||product price

I.e.: product ID, 3 pipes, product description, 3 pipes and finally the price of the product

removeProduct.php

This PHP file is used to remove products from the shopping basket. Input to this file is a GET variable named productIdToRemove. What you have to do inside this PHP file is to subtract one item of this product from the basket(i.e. in the Database). Then output the string "OK" if the update was executed successfully.

Javascript variables

At the top of the fly-to-basket.js file, you will find 3 variables which you can modify:

var flyingSpeed = 25;
var url_addProductToBasket = 'addProduct.php';
var txt_totalPrice = 'Total: ';

flyingSpeed is used to control how fast your products flies to the basket.
url_addProductToBasket is where you put the url to your server side files(i.e. addProduct.php).
txt_totalPrice is a text label shown at the bottom of the shopping basket in front of the total price.

showAjaxBasketContent function

Inside fly-to-basket.js you will find a function with the name showAjaxBasketContent. This function updates the text in the right column, i.e. the shopping cart. I have added some comments to code in this function in case you need to modify it.

Showing existing basket items

When someone navigates on your page, you have to write out the existing basket items from your database. The demo isn't connected to a database, so when you refresh the page, the basket at the right side will be empty. This is the HTML code for the shopping basket in the right column:

<table id="shopping_cart_items">
  <tr>
    <th>Items</th>
    <th>Description</th>
    <th>Price</th>
    <th></th>
  </tr>
  <!-- Here, you can output existing basket items from your database
  One row for each item. The id of the TR tag should be shoping_cart_items_product + productId,
  example: shoping_cart_items_product1 for the id 1 -->
  
  
</table>

If there's allready items in the basket, you have to add rows to this table, example:

<tr id="shoping_cart_items_product1">
  <td>1</td>
  <td>Calendar</td>
  <td>50.00</td>
  <td><a href="#" onclick="removeProductFromBasket(1);return false;"></td>
</tr>

Update log

  • June, 14th, 2006 - Added support for removing objects from basket.

Comments

Fr3
very usefull script, the greatest thx!
Fr3 at 10:19PM, 2011/06/10.
Mancho
Hi, I am very interested in the script, but since not programmer difficalt to integrate it intu CMS (Drupal)
please, help or let me know if you know some video tutorial

thanks
Mancho at 07:50AM, 2011/09/29.
Andreas
That is very cool!!
How can i install it to my Magento eshop?
Is there an easy way?
Andreas at 08:55AM, 2011/10/20.
Ashish
Hello Dear,


This is your script awesmn script and m very interested but let me know how to integrate in joomla version 1.5.23 .


Great thanks to you
Tell me something how to integrate script

Ashish at 12:50AM, 2011/11/01.
elisa
hi,
i tried to convert the addProduct.php to addProduct.asp (php to asp) but i'm not able to receveid the productId.
I've tried with request.form("productId") but it's not working...what can i do?
Thanks in advance,
Elisa
elisa at 09:20AM, 2011/11/02.
den_4ik
this is my addProduct.php :

"<?
include ('blocks/db.php');

if(!isset($_POST['productId']))exit;
if(isset($_POST['productId'])) {$productId=$_POST['productId'];}

$result = mysql_query("SELECT id,name,price FROM 'table_name' WHERE id=$productId",$db);
$myrow = mysql_fetch_array($result);

echo $myrow['id'];
echo "|||";
echo $myrow['name'];
echo "|||";
echo $myrow['price'];

?>"
den_4ik at 01:01AM, 2011/11/30.
Praveen Singh Shekhawat
is there a problem with this .
when i'll refresh my page the the values are unavailable. any one can help me ?
:( :(
Praveen Singh Shekhawat at 04:44AM, 2011/12/22.
Prabhat
Hi,

Nice Script.

How to convert it to complete Client side script without PHP?

Can XML file be loaded for product list with links to product images, descrition, rates etc ?

Can the product addition and deletion from the cart be done fully on client side ?

A sample code shall be appreciated.
Prabhat at 07:15PM, 2011/12/24.
dpr
wonderful script but without much use. Its a dumb doll. None is out there to help people to integrate with their shopping carts. DHTMLGoodies maintain glorious silence. Forums use jugllary of words but non tells how to integrate it with zencart,oscommerce, drupal,joomla etc etc.

If it doesn't really fly-to-basket it will surely fly-to-dustbin.
dpr at 01:33AM, 2012/01/06.
longbo567
i watched the demo, really great job!!!
longbo567 at 04:52AM, 2012/01/10.
daian
but how to sub only one piece of the basket not the whole product?
daian at 07:47AM, 2012/01/31.
Shanmuga Sundaram
Hai! Its Really Super

I did Convert php to jsp ... Thank..
Shanmuga Sundaram at 09:55PM, 2012/03/06.
marcos
very good, I pofria integrate joomla virtue mart? help please
marcos at 04:37PM, 2012/05/21.
khushal
i want to add this in my ASp.net C# project ..so if any have the code than please help me..

my email id is
khushal_krs@yahoo.com


Thanx in Advance.........
khushal at 12:36AM, 2012/07/25.
shahbaz
Hi,
I can't receive the productId at the addProduct page .
can anyone help me plz reply me on

shahbaz_mehar89@yahoo.com

Thnx in advnce.....



shahbaz at 10:28PM, 2013/01/27.
rinzler
Anyone has achieved to store the shopping cart items into a Session ?
It's even possible with this script ? LoL
rinzler at 07:11AM, 2013/02/19.
waenkung
Thank you for script is help me. :D
waenkung at 05:30AM, 2014/08/29.

Post your comment

Don't have an avatar? Create one at Gravatar.com.

Confirmation code:

Go to cbolson.com


About/Contact | A good idea? | Submit a script | Privacy notice
© 2005 - 2014 dhtmlgoodies.com