Ajax Updates

Posted by education training on Saturday, October 10, 2009

Ajax Updates

Fly To Basket – Ajax Script

Posted: 10 Oct 2009 12:49 PM PDT

Fly To Basket – Ajax Script

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 , 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( ) 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;"></a></td> </tr>






Demo: http://www.dhtmlgoodies.com/scripts/fly-to-basket/fly-to-basket.html
Download: http://www.dhtmlgoodies.com/scripts/fly-to-basket/fly-to-basket.zip
Source: http://www.dhtmlgoodies.com/index.html?whichScript=fly-to-basket

Related Listings:

  1. Ajax Script – Dragable content This script enable elements draggable by assigning them to the...
  2. Multilingual Ajax dhtml Calendar Script for applications This is a cross browser Javascript calendar. Download the zip-file...
  3. Dynamic Contents – Ajax Script This script is a simple demo that hopefully shows you...

0 comments:

Post a Comment

Note: Only a member of this blog may post a comment.