sLquantity v.1 » http://blog.sLajax.com

03/16/07
sLquantity v.1

So the idea was that we needed a form input that could be duplicated multiple times within the shopping cart. This allows the customer to add multiple items with different variations (ie: color / size) to the cart and then post it to the payment gateway. First of all, here is a visual example of the end case so you have a better idea what it is we wanted to achieve:

…and here is the code that makes it work:

javascripthover edges to scroll

 
var sLquantity = new Class({
	initialize:function(options){
		this.setOptions(options);
		if($(this.options.conId))
		$(this.options.conId).addClass(this.options.conClass.split('.')[1]);
		this.gather(options);
	},
	setOptions:function(options){
		this.options = Object.extend( { }, options || {} );
	},
	gather:function(options){
	$$(options.plusClass).each(function(el){
			$(el).addEvent('mousedown',this.plusHref.pass([el], this));
		}.bind(this) );
	$$(options.minusClass).each(function(el){
			$(el).addEvent('mousedown', this.minusHref.pass([el], this));
		}.bind(this) );
	},
	fX:function(options, stack){
		introFx = new Fx.Style(stack, 'opacity', {duration: options.introDur, transition: Fx.Transitions.linear});
		introFx.start(0 ,1);
		stack = null;
	},
	minusHref:function(el){		
		if( $$(this.options.conClass).length > 1) 
				$$(this.options.conClass)[$$(this.options.conClass).length-1].remove();
	},
	plusHref:function(){			
		var stack = this.cloneObj(this.options.conClass).injectAfter( $$(this.options.conClass)[$$(this.options.conClass).length-1] ).setOpacity(0);
			stack.getChildren().each(function(el){
				if( $(el).getTag() == 'img')
					$(el).remove()
				}.bind(this) );
		this.fX(this.options, stack);
	},
	cloneObj:function(el){
		return $$(this.options.conClass)[0].clone();
	}
});	
 
			var sLquantityOpts = { 
			// sLquantity - v1.0 - 3:13 PM 15/03/2007 
			// @author: kc@slajax.com
					conId:'ShoppingDrops', // the container ID of the object to clone
					conClass:'.ShoppingDrops', // the class name of the same object (id will be phased out)
					minusClass:'.ShoppingMinus', // the button class of the element which adds new objects
					plusClass:'.ShoppingPlus', // the button class of the element which removes the last object added
					introDur: 200 // the duration of the fade in for a cloned element
					};	
 
		var quantity = new sLquantity(sLquantityOpts);