SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Jan 2007
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Cart onklick problem

    Hy everybody,
    i got a problem with a script sounds fly-to-basket

    Its a cart script.

    my problem ist, i will cahnge a image button against a checkbox, so far as well its ok. now i will that the checkbox either is checked or disabled or hidden, and when the User will remove the product off the cart the checkbox ist either unchecken unabled or visible.

    here ist the function at the front of the script




    Code JavaScript:
    function showHide(productId,visibility)
    {
    document.getElementById('addToBasket_' + productId).style.visibility = visibility;
    }


    this is the function who add the product in the cart




    Code JavaScript:
    function addToBasket(productId)
    {
    if(!shopping_cart_div)shopping_cart_div = document.getElementById('shopping_cart');
    if(!flyingDiv){
    flyingDiv = document.createElement('DIV');
    flyingDiv.style.position = 'absolute';
    document.body.appendChild(flyingDiv);
    }
     
    shopping_cart_x = shoppingCart_getLeftPos(shopping_cart_div);
    shopping_cart_y = shoppingCart_getTopPos(shopping_cart_div);
    currentProductDiv = document.getElementById('slidingProduct' + productId);
     
    currentXPos = shoppingCart_getLeftPos(currentProductDiv);
    currentYPos = shoppingCart_getTopPos(currentProductDiv);
     
    diffX = shopping_cart_x - currentXPos;
    diffY = shopping_cart_y - currentYPos;
     
    var shoppingContentCopy = currentProductDiv.cloneNode(true);
    shoppingContentCopy.id='';
    flyingDiv.innerHTML = '';
    flyingDiv.style.left = currentXPos + 'px';
    flyingDiv.style.top = currentYPos + 'px';
    flyingDiv.appendChild(shoppingContentCopy);
    flyingDiv.style.display='block';
    flyingDiv.style.width = currentProductDiv.offsetWidth + 'px';
    flyToBasket(productId);
    showHide(productId,'hidden');
    }
    here is the function who remove the product




    Code JavaScript:
    function removeProductFromBasket(productId)
    {
    var productRow = document.getElementById('shopping_cart_items_product' + productId);
     
    var numberOfItemCell = productRow.cells[0];
    if(numberOfItemCell.innerHTML == '1'){
    productRow.parentNode.removeChild(productRow);
    }else{
    numberOfItemCell.innerHTML = numberOfItemCell.innerHTML/1 - 1;
    }
    updateTotalPrice();
    ajaxRemoveProduct(productId);
    showHide(productId,'visible');
    }

    i call the product with this




    HTML Code:
    <input id="addToBasket_1" onClick="addToBasket(1);" name="" type="checkbox" value="" />
    now the first klick on the checkbox make it visible, the first klick on remove also. But now i must click 2 times before the checkbox is hidden.

    Why?

    I hope anybody can help, my dearest variant would be when after the click on checkbox its checked and disabled, and when i remove it from the cart the checkbox is enabled and unchecked.

    Is there a way to realize and when yes how?

    greets rezeptionist

  2. #2
    SitePoint Member
    Join Date
    Jan 2007
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Really no one any ideas, how i can realize that the checkbox after the check ist disabled, and when i remove it from the cart the checkbox is unabled and unchecked ??

  3. #3
    SitePoint Enthusiast
    Join Date
    Aug 2007
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I must not be understanding the question, 'cause it seems pretty easy. When the item is placed in the cart, just set the checked and disabled attributes for the item, and when you take it out of the cart, uncheck and re-enable.

    Isn't that all there is to it?

  4. #4
    SitePoint Member
    Join Date
    Jan 2007
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yes please show me the way !

  5. #5
    SitePoint Evangelist bals28mjk's Avatar
    Join Date
    Aug 2007
    Posts
    405
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    It's difficult to show you the way without seeing more, (if not all of your code.) Mind posting it?

  6. #6
    SitePoint Member
    Join Date
    Jan 2007
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok here is the complete Javascript:

    Thanks for help.

    Code:
    	/************************************************************************************************************
    (C) www.dhtmlgoodies.com, March 2006
    
    This is a script from www.dhtmlgoodies.com. You will find this and a lot of other scripts at our website.	
    
    Terms of use:
    You are free to use this script as long as the copyright message is kept intact. However, you may not
    redistribute, sell or repost it without our permission.
    
    Version:
    	1.0	Released	March. 3rd 2006
    
    Thank you!
    
    www.dhtmlgoodies.com
    Alf Magne Kalleland
    
    ************************************************************************************************************/
        function showHide (id) {
    	
    	
            if (document.getElementById) {
                if (document.getElementById('addToBasket_' + productId).style.visibility == "visible") {
                    document.getElementById('addToBasket_' + productId).style.visibility = "hidden";
                } else {
                    document.getElementById('addToBasket_' + productId).style.visibility = "visible";
                }
            }
        } 
       
    
    
    
    
    var flyingSpeed = 25;
    var url_addProductToBasket = 'addProduct.php';
    var url_removeProductFromBasket = 'removeProduct.php';
    var txt_totalPrice = 'Total: ';
    
    
    var shopping_cart_div = false;
    var flyingDiv = false;
    var currentProductDiv = false;
    
    var shopping_cart_x = false;
    var shopping_cart_y = false;
    
    var slide_xFactor = false;
    var slide_yFactor = false;
    
    var diffX = false;
    var diffY = false;
    
    var currentXPos = false;
    var currentYPos = false;
    
    var ajaxObjects = new Array();
    
    
    function shoppingCart_getTopPos(inputObj)
    {		
      var returnValue = inputObj.offsetTop;
      while((inputObj = inputObj.offsetParent) != null){
      	if(inputObj.tagName!='HTML')returnValue += inputObj.offsetTop;
      }
      return returnValue;
    }
    
    function shoppingCart_getLeftPos(inputObj)
    {
      var returnValue = inputObj.offsetLeft;
      while((inputObj = inputObj.offsetParent) != null){
      	if(inputObj.tagName!='HTML')returnValue += inputObj.offsetLeft;
      }
      return returnValue;
    }
    	
    
    function addToBasket(productId)
    {
        if(!shopping_cart_div)shopping_cart_div = document.getElementById('shopping_cart');
        if(!flyingDiv){
            flyingDiv = document.createElement('DIV');
            flyingDiv.style.position = 'absolute';
            document.body.appendChild(flyingDiv);
        }
        
        shopping_cart_x = shoppingCart_getLeftPos(shopping_cart_div);
        shopping_cart_y = shoppingCart_getTopPos(shopping_cart_div);
    
        currentProductDiv = document.getElementById('slidingProduct' + productId);
        
        currentXPos = shoppingCart_getLeftPos(currentProductDiv);
        currentYPos = shoppingCart_getTopPos(currentProductDiv);
        
        diffX = shopping_cart_x - currentXPos;
        diffY = shopping_cart_y - currentYPos;
        
    
        
        var shoppingContentCopy = currentProductDiv.cloneNode(true);
        shoppingContentCopy.id='';
        flyingDiv.innerHTML = '';
        flyingDiv.style.left = currentXPos + 'px';
        flyingDiv.style.top = currentYPos + 'px';
        flyingDiv.appendChild(shoppingContentCopy);
        flyingDiv.style.display='block';
        flyingDiv.style.width = currentProductDiv.offsetWidth + 'px';
        flyToBasket(productId);
        document.getElementById('addToBasket_' + productId).style.visibility = "hidden";
        
    }
    
    function flyToBasket(productId)
    {
    	var maxDiff = Math.max(Math.abs(diffX),Math.abs(diffY));
    	var moveX = (diffX / maxDiff) * flyingSpeed;;
    	var moveY = (diffY / maxDiff) * flyingSpeed;	
    	
    	currentXPos = currentXPos + moveX;
    	currentYPos = currentYPos + moveY;
    	
    	flyingDiv.style.left = Math.round(currentXPos) + 'px';
    	flyingDiv.style.top = Math.round(currentYPos) + 'px';	
    	
    	
    	if(moveX>0 && currentXPos > shopping_cart_x){
    		flyingDiv.style.display='none';		
    	}
    	if(moveX<0 && currentXPos < shopping_cart_x){
    		flyingDiv.style.display='none';		
    	}
    		
    	if(flyingDiv.style.display=='block')setTimeout('flyToBasket("' + productId + '")',10); else ajaxAddProduct(productId);	
    }
    
    function showAjaxBasketContent(ajaxIndex)
    {
    	// Getting a reference to the shopping cart items table
    	var itemBox = document.getElementById('shopping_cart_items');
    	
    	var productItems = ajaxObjects[ajaxIndex].response.split('|||');	// Breaking response from Ajax into tokens
    	
    	if(document.getElementById('shopping_cart_items_product' + productItems[0])){	// A product with this id is allready in the basket - just add number items
    		var row = document.getElementById('shopping_cart_items_product' + productItems[0]);
    		var items = row.cells[0].innerHTML /1;
    		items = items + 1;
    		row.cells[0].innerHTML = items;
    	}else{	// Product isn't allready in the basket - add a new row
    		var tr = itemBox.insertRow(-1);
    		tr.id = 'shopping_cart_items_product' + productItems[0]
    		
    		var td = tr.insertCell(-1);
    		td.innerHTML = '1'; 	// Number of items
    		
    		var td = tr.insertCell(-1);
    		td.innerHTML = productItems[1]; 	// Description
    		
    		var td = tr.insertCell(-1);
    		td.style.textAlign = 'right';
    		td.innerHTML = productItems[2]; 	// Price	
    		
    		var td = tr.insertCell(-1);
    		var a = document.createElement('A');
    		td.appendChild(a);
    		a.href = '#';
    		a.onclick = function(){ removeProductFromBasket(productItems[0])};
    		var img = document.createElement('IMG');
    		img.src = 'images/gecheck.jpg';
    		a.appendChild(img);
    		//td.innerHTML = '<a href="#" onclick="removeProductFromBasket("' + productItems[0] + '");return false;"><img src="images/gecheck.jpg"></a>';	
    	} 
    
    
    	updateTotalPrice();
    	
    	ajaxObjects[ajaxIndex] = false;		
    	
    }
    
    function updateTotalPrice()
    {
    	var itemBox = document.getElementById('shopping_cart_items');
    	// Calculating total price and showing it below the table with basket items
    	var totalPrice = 0;
    	if(document.getElementById('shopping_cart_totalprice')){
    		for(var no=1;no<itemBox.rows.length;no++){
    			totalPrice = totalPrice + (itemBox.rows[no].cells[0].innerHTML.replace(/[^0-9]/g) * itemBox.rows[no].cells[2].innerHTML);
    			
    		}		
    		document.getElementById('shopping_cart_totalprice').innerHTML = txt_totalPrice + totalPrice.toFixed(2);
    		
    	}	
    	
    }
    
    function removeProductFromBasket(productId)
    {
        var productRow = document.getElementById('shopping_cart_items_product' + productId);
        
        var numberOfItemCell = productRow.cells[0];
        if(numberOfItemCell.innerHTML == '1'){
            productRow.parentNode.removeChild(productRow);    
        }else{
            numberOfItemCell.innerHTML = numberOfItemCell.innerHTML/1 - 1;
        }
        updateTotalPrice();
        ajaxRemoveProduct(productId);
        document.getElementById('addToBasket_' + productId).style.visibility = "visible";
    }
    
    function ajaxValidateRemovedProduct(ajaxIndex)
    {
    	if(ajaxObjects[ajaxIndex].response!='OK')alert('Error while removing product from the database');
    	
    }
    
    function ajaxRemoveProduct(productId)
    {
    	var ajaxIndex = ajaxObjects.length;
    	ajaxObjects[ajaxIndex] = new sack();
    	ajaxObjects[ajaxIndex].requestFile = url_removeProductFromBasket;	// Saving product in this file
    	ajaxObjects[ajaxIndex].setVar('productIdToRemove',productId);
    	ajaxObjects[ajaxIndex].onCompletion = function(){ ajaxValidateRemovedProduct(ajaxIndex); };	// Specify function that will be executed after file has been found
    	ajaxObjects[ajaxIndex].runAJAX();		// Execute AJAX function		
    }
    
    function ajaxAddProduct(productId)
    {
    	var ajaxIndex = ajaxObjects.length;
    	ajaxObjects[ajaxIndex] = new sack();
    	ajaxObjects[ajaxIndex].requestFile = url_addProductToBasket;	// Saving product in this file
    	ajaxObjects[ajaxIndex].setVar('productId',productId);
    	ajaxObjects[ajaxIndex].onCompletion = function(){ showAjaxBasketContent(ajaxIndex); };	// Specify function that will be executed after file has been found
    	ajaxObjects[ajaxIndex].runAJAX();		// Execute AJAX function		
    }
    Here is the Ajax.js

    Code:
    /* Simple AJAX Code-Kit (SACK) */
    /* 2005 Gregory Wild-Smith */
    /* www.twilightuniverse.com */
    /* Software licenced under a modified X11 licence, see documentation or authors website for more details */
    
    function sack(file){
    	this.AjaxFailedAlert = "Your browser does not support the enhanced functionality of this website, and therefore you will have an experience that differs from the intended one.\n";
    	this.requestFile = file;
    	this.method = "POST";
    	this.URLString = "";
    	this.encodeURIString = true;
    	this.execute = false;
    
    	this.onLoading = function() { };
    	this.onLoaded = function() { };
    	this.onInteractive = function() { };
    	this.onCompletion = function() { };
    
    	this.createAJAX = function() {
    		try {
    			this.xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
    		} catch (e) {
    			try {
    				this.xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    			} catch (err) {
    				this.xmlhttp = null;
    			}
    		}
    		if(!this.xmlhttp && typeof XMLHttpRequest != "undefined")
    			this.xmlhttp = new XMLHttpRequest();
    		if (!this.xmlhttp){
    			this.failed = true; 
    		}
    	};
    	
    	this.setVar = function(name, value){
    		if (this.URLString.length < 3){
    			this.URLString = name + "=" + value;
    		} else {
    			this.URLString += "&" + name + "=" + value;
    		}
    	}
    	
    	this.encVar = function(name, value){
    		var varString = encodeURIComponent(name) + "=" + encodeURIComponent(value);
    	return varString;
    	}
    	
    	this.encodeURLString = function(string){
    		varArray = string.split('&');
    		for (i = 0; i < varArray.length; i++){
    			urlVars = varArray[i].split('=');
    			if (urlVars[0].indexOf('amp;') != -1){
    				urlVars[0] = urlVars[0].substring(4);
    			}
    			varArray[i] = this.encVar(urlVars[0],urlVars[1]);
    		}
    	return varArray.join('&');
    	}
    	
    	this.runResponse = function(){
    		eval(this.response);
    	}
    	
    	this.runAJAX = function(urlstring){
    		this.responseStatus = new Array(2);
    		if(this.failed && this.AjaxFailedAlert){ 
    			alert(this.AjaxFailedAlert); 
    		} else {
    			if (urlstring){ 
    				if (this.URLString.length){
    					this.URLString = this.URLString + "&" + urlstring; 
    				} else {
    					this.URLString = urlstring; 
    				}
    			}
    			if (this.encodeURIString){
    				var timeval = new Date().getTime(); 
    				this.URLString = this.encodeURLString(this.URLString);
    				this.setVar("rndval", timeval);
    			}
    			if (this.element) { this.elementObj = document.getElementById(this.element); }
    			if (this.xmlhttp) {
    				var self = this;
    				if (this.method == "GET") {
    					var totalurlstring = this.requestFile + "?" + this.URLString;
    					this.xmlhttp.open(this.method, totalurlstring, true);
    				} else {
    					this.xmlhttp.open(this.method, this.requestFile, true);
    				}
    				if (this.method == "POST"){
      					try {
    						this.xmlhttp.setRequestHeader('Content-Type','application/x-www-form-urlencoded')  
    					} catch (e) {}
    				}
    
    				this.xmlhttp.send(this.URLString);
    				this.xmlhttp.onreadystatechange = function() {
    					switch (self.xmlhttp.readyState){
    						case 1:
    							self.onLoading();
    						break;
    						case 2:
    							self.onLoaded();
    						break;
    						case 3:
    							self.onInteractive();
    						break;
    						case 4:
    							self.response = self.xmlhttp.responseText;
    							self.responseXML = self.xmlhttp.responseXML;
    							self.responseStatus[0] = self.xmlhttp.status;
    							self.responseStatus[1] = self.xmlhttp.statusText;
    							self.onCompletion();
    							if(self.execute){ self.runResponse(); }
    							if (self.elementObj) {
    								var elemNodeName = self.elementObj.nodeName;
    								elemNodeName.toLowerCase();
    								if (elemNodeName == "input" || elemNodeName == "select" || elemNodeName == "option" || elemNodeName == "textarea"){
    									self.elementObj.value = self.response;
    								} else {
    									self.elementObj.innerHTML = self.response;
    								}
    							}
    							self.URLString = "";
    						break;
    					}
    				};
    			}
    		}
    	};
    this.createAJAX();
    }

    How i call the funktion is standing above.

    Thanks
    rezeptionist


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •