Форма заказа из каталога ИКЕА, с калькулятором и проверкой доступности товара - Поиск компонентов, модулей, плагинов

var CtProduct_Add = Class.create(CtComponent_Abstract, {
	id: null,
	element: null,
	callback: null,
	isUniqueUrlCallback: null,
	showMessageCallback: null,
	sendButton: null,
	input: null,
	addLoader: null,

	initialize: function (htmlelement, callback, isUniqueUrlCallback, showMessageCallback) {
		this.callback = callback;
		this.showMessageCallback = showMessageCallback;
		this.isUniqueUrlCallback = isUniqueUrlCallback;
		this.element = $(htmlelement);
		this.id = this.element.identify();
		this.input = this.element.down('.ctProduct-item-add-input');
		this.sendButton = this.element.down('.ctProduct-item-add-btn');

		this.addLoader = new CtComponent_BlockLocker(this.element.down('.ctProduct-item-add-bg'));

		Event.observe(this.input, 'keypress', this.onKeyPressHandler.bindAsEventListener(this));
		Event.observe(this.sendButton, 'click', this.onSendButtonClickHandler.bindAsEventListener(this));
	},

	onKeyPressHandler: function (e) {
		Event.getKey(e);
		if (e.keyPressed.enter) {
			this.onSendButtonClickHandler();
		}
	},

	onSendButtonClickHandler: function() {
		var url = this.input.getValue().trim();
		if (url != '' && this.isUniqueUrlCallback(url)) {
			this.addLoader.show();
			new AJAX.Request('../../index/getinfo.html'/*tpa=http://namvezet.ru/index/getinfo.html*/, {
				method: 'get',
				parameters: {url: url},
				onSuccess: function(transport, json) {
					this.addLoader.hide();
					if (json == null) {
						CtPage.getComponent('error').refresh({content:transport.responseText});
						return;
					}
					if (!this.showMessageCallback(json.message)) {
						this.input.setValue('');
						this.callback(transport.responseText);
					}

					document.body.fire('CtProduct_Item:refresh');
				}.bind(this),
				onFailure: function() {
					alert("Ошибка! Невозможно обработать. Проверьте ваше Internet соединение")
				}.bind(this)
			});
		}
	}
});

var CtProduct_Item = Class.create(CtComponent_Abstract, {
	id: null,
	element: null,
	priceElement: null,
	countInput: null,
	countWarning: null,
	countLoader: null,
	imageElement: null,
	config: null,
	configCurrentItem: null,
	delButton: null,
	deleteCallback: null,
	changeCountCallback: null,
	attrElementList: null,
	idSendsCount: null,

	initialize: function (htmlelement, deleteCallback, changeCountCallback) {
		this.element = $(htmlelement);
		this.id = this.element.identify();

		this.deleteCallback = deleteCallback;
		this.changeCountCallback = changeCountCallback;
		this.delButton = this.element.down('.ctProduct-item-del');

		this.countInput = this.element.down('.ctProduct-item-count-input');
		this.countWarning = this.element.down('.ctProduct-item-count-warning');
		this.countWarning.hide();
		this.countLoader = this.element.down('.ctProduct-item-count-loader');
		this.countLoader.hide();

		var configContainer = this.element.down('.ctProduct-item-config');
		this.config = configContainer.innerHTML.evalJSON(true);
		configContainer.remove();

		this.attrElementList = this.element.select('select.ctProduct-item-attr');
		for (var i = 0; i < this.attrElementList.length; i++) {
			Event.observe(this.attrElementList[i], 'change', this.eventSelectHandler.bindAsEventListener(this));
		}

		this.priceElement = this.element.down('.ctProduct-item-price');
		this.imageElement = this.element.down('.ctProduct-item-image');

		Event.observe(this.countInput, 'keyup', this.changeCount.bindAsEventListener(this));
		Event.observe(this.delButton, 'click', this.onDelButtonClickHandler.bindAsEventListener(this));

		Event.observe(document.body, 'CtProduct_Item:refresh', function() {
			this.eventSelectHandler();
		}.bindAsEventListener(this));

		this.eventSelectHandler();
	},

	onDelButtonClickHandler: function() {
		if (confirm("Удалить этот товар?")) {
			this.element.remove();
			this.deleteCallback(this);
		}
	},

	getPrice: function() {
		var currentItem = this.getCurrentItem();
		if (currentItem == null) {
			return 0;
		}
		return currentItem.price;
	},

	getCount: function() {
		var count = parseInt(this.countInput.getValue(), 10);
		if (!isNaN(count)) {
			return count;
		}
		return 0;
	},

	getUrl: function() {
		return this.config.data.url;
	},


	/**
	 *
	 */
	getCurrentItem: function() {
		var variationId, i;

		variationId = this._getVariationId();

		for (i = 0; i < this.config.variations.length; i++) {
			if (this.config.variations[i]['catEntryId'] == variationId) {
				return this.config.variations[i];
			}
		}

		return null;
	},

	/**
	 *
	 */
	updateCount: function() {
		var currentItem = this.getCurrentItem();
		if (currentItem == null) {
			return;
		} else if (currentItem.count_max < 3) {
			this.countInput.setValue('--');
			this.countInput.disable();
			this.countWarning.update('Выбраной модели нет на складе!');
			this.countWarning.show();
			this.priceElement.addClassName('ctProduct-item-price-disabled');
			this.countInput.addClassName('ctProduct-item-count-input-disable');
		} else {
			this.countInput.removeClassName('ctProduct-item-count-input-disable');
			this.priceElement.removeClassName('ctProduct-item-price-disabled');
			if (parseInt(this.getCount(), 10) < 0) {
				this.countInput.setValue(1);
			} else if (currentItem.count_max - this.getCount() <= 0) {
				this.countWarning.update('На складе всего ' + currentItem.count_max + 'шт.');
				this.countWarning.show();
				this.countInput.setValue(currentItem.count_max);
			} else {
				this.countWarning.update('');
				this.countWarning.hide();
				this.countInput.enable();
				if (isNaN(parseInt(this.countInput.getValue(), 10)) || this.countInput.getValue() <= 0) {
 					if (this.countInput.getValue() == '') {
						 this.countInput.setValue('');
					} else {
						this.countInput.setValue(1);
					}
				}
			}
		}
		this.changeCountCallback();
	},


	/**
	 *
	 */
	changeCount: function() {

		var currentItem = this.getCurrentItem();
//console.log('changeCount', currentItem);

		if (currentItem == null) {
			return;
		}
		if (currentItem.count_max == undefined) {
			if (this.idSendsCount) {
				clearTimeout(this.idSendsCount);
				this.idSendsCount = false;
			}

			this.countWarning.update('');
			this.countWarning.hide();
			this.countLoader.show();
			this.priceElement.addClassName('ctProduct-item-price-disabled');
			this.countInput.removeClassName('ctProduct-item-count-input-disable');
			this.countInput.disable();

			var param = {partNumber: currentItem.partNumber};
			new AJAX.Request('../../index/getcount.html'/*tpa=http://namvezet.ru/index/getcount.html*/, {
				method: 'get',
				parameters: param,
				onSuccess: function(transport) {
					this.countLoader.hide();
					var content = parseInt(transport.responseText, 10);
					if (isNaN(content)) {
						this.countWarning.update(transport.responseText);
						this.countWarning.show();
						this.idSendsCount = setTimeout(this.changeCount.bind(this), 3000);
						return;
					}

					for (var i = 0; i < this.config.variations.length; i++) {
						if (this.config.variations[i].partNumber == param.partNumber) {
							this.config.variations[i].count_max = content;
							break;
						}
					}

					var currentItem = this.getCurrentItem();
					if (currentItem != null && currentItem.partNumber == param.partNumber) {
						this.updateCount();
					}
				}.bind(this),
				onFailure: function() {
					this.countLoader.hide();
					alert("Ошибка! Невозможно обработать. Проверьте ваше Internet соединение");
				}.bind(this)
			});
		} else {
			this.updateCount();
		}
	},


	/**
	 *
	 */
	_getVariationId: function(forceSelectIndex, valueToCheck) {
		var values, value, summary;
		values = [];
		summary = [];

		for (var i = 0; i < this.attrElementList.length; i++) {

			if (forceSelectIndex
				&& forceSelectIndex == i
 			) {
				value = valueToCheck;
			} else {
				value = this.attrElementList[i].getValue();
			}

			values.push(value.split(';'));
		}

		if (!values[0]) {
			return this.config.variations[0]['catEntryId'];
		}

		summary = values[0];

		for (i = 0; i < values.length; i++) {
			if (values[i + 1]) {
				summary = values[i].intersect(values[i + 1]);
			}
		}

		return summary[0] ? summary[0] : null;

	},


	eventSelectHandler: function() {

		var variationId, i;

		if (this.attrElementList.length > 1) {

			for (i = 0; i < this.attrElementList[1].options.length; i++) {
				var value = this.attrElementList[1].options[i].readAttribute('value');

				variationId	= this._getVariationId(1, value);

				if (!variationId) {
					Element.addClassName(this.attrElementList[1].options[i], 'ctProduct-item-attr-option-disabled');
					Element.writeAttribute(this.attrElementList[1].options[i], 'disabled', 'disabled');
				} else {
					Element.removeClassName(this.attrElementList[1].options[i], 'ctProduct-item-attr-option-disabled');
					Element.writeAttribute(this.attrElementList[1].options[i], 'disabled', null);
				}

				if (this.attrElementList[1].options[this.attrElementList[1].selectedIndex].disabled) {
					for (i = 0; i < this.attrElementList[1].options.length; i++) {
						if (!this.attrElementList[1].options[i].disabled) {
							this.attrElementList[1].selectedIndex = i;
							break;
						}
					}
				}
			}
		}
//
		var currentItem = this.getCurrentItem();

		if (currentItem == null) {
			return;
		}

		this.priceElement.update(formatPrice(currentItem.price));
		Element.writeAttribute(this.imageElement, 'src', 'http://www.ikea.com' + currentItem.itemImgThumb);
//
		this.changeCount();
	},

	highlight: function() {
		new Effect.ScrollTo(this.element, {
			duration: 0.2,
			afterFinish: function() {
				new Effect.Pulsate(this.element, {
					afterFinish: function() {
						var oldMessage = this.countWarning.innerHTML;
						this.countWarning.update('Вот же этот товар!');
						this.countWarning.show();
						setTimeout(function () {
							if (oldMessage != '') {
								this.countWarning.update(oldMessage);
							} else {
								this.countWarning.update('');
								this.countWarning.hide();
							}
						}.bind(this), 5000);
					}.bind(this)
				});
			}.bind(this)
		});
	}
});


var CtProduct = Class.create(CtForm, {
	id: null,
	element: null,
	totalPriceElement: null,
	cityChoice: null,
	productAdd: null,
	productItem: [],

	reassembly: function ($super) {
		$super();
		Event.observe(this.status.element, 'CtComponent:refresh', updateHeight);
		this.totalPriceElement = this.element.down('.ctProduct-price');
		var addElement = this.element.down('.ctProduct-item-add');
		this.productAdd = new CtProduct_Add(addElement, this.productItemAdd.bind(this), this.isUniqueUrl.bind(this), this.showMessage.bind(this));

		this.productItem.clear();
		var productItemList = this.element.select('.ctProduct-item');
		for (var i = 0; i < productItemList.length; i++) {
			this.productItem.push(new CtProduct_Item(productItemList[i], this.productItemRemove.bind(this), this.changeTotalPrice.bind(this)));
		}

		updateHeight();
		this.changeTotalPrice();
	},

	productItemAdd: function(content) {
		Element.insert(this.productAdd.element, {before:content});
		updateHeight();
		var productItemList = this.element.select('.ctProduct-item');
		this.productItem.push(new CtProduct_Item(productItemList.last(), this.productItemRemove.bind(this), this.changeTotalPrice.bind(this)));

		this.changeTotalPrice();
	},

	productItemRemove: function(element) {
		this.productItem = this.productItem.without(element);
		this.changeTotalPrice();
	},

	changeTotalPrice: function() {
		var totalPrice = 0;
		for (var i = 0; i < this.productItem.length; i++) {
			totalPrice += this.productItem[i].getPrice() * this.productItem[i].getCount();
		}

		this.totalPriceElement.update(formatPrice(totalPrice));
	},

	showMessage: function(message) {
		this.status.hide();
		if (message.length == 0) {
			return false;
		}

		this.status.show(message);
		return this.status.hasErrors(message);
	},

	isUniqueUrl: function(url) {
		for (var i = 0; i < this.productItem.length; i++) {
			if (this.productItem[i].getUrl() == url) {
				this.productItem[i].highlight();
				return false;
			}
		}

		return true;
	}
});


CtPage.registerScript('CtProduct');