Выбор а-ля Aliexpress
 

Делаю страницу товара на сайте интернет-магазина. Хочу сделать подбор параметров, как это реализовано на сайте Aliexpress.
Вот, что у меня пока получилось:
http://kedrovaya.in.ua/tara/100.php

Я ещё не закончил. По идее, в конце после того, как покупатель выберет все параметры, ему должна показаться правильная картинка товара и правильная цена.

Все данные о товарах храню в XML файле:
http://kedrovaya.in.ua/tara/tara.xml

Данные из него берут через AJAX.
Вот код на JQuary:

function doOption(data, item){
	//цвет удалить
	var ul = $('#'+item);
	ul.children().remove();
	//цвет добавить
	data.find(item).each(function(){
		//элемент
		var li = $('<li></li>');
		//имя
		var name = $(this).html();
		li.text(name);
		//активный
		var active = $(this).attr('active');
		if (active == '1'){
			li.addClass('active');
		};
		//добавить
		ul.append(li);
	});
};

function doOptions(capData){
	var options = ['color', 'neck', 'material', 'drop', 'phase', 'store'];
	$.each(options, function(i, e){
		doOption(capData, e);
	});
}

function doCapacity(data){
	//ёмкость удалить
	var ul = $('#capacity');
	ul.children().remove();
	//ёмкость добавить
	$(data).find('capacity').each(function(){
		//элемент
		var cap = $(this);
		var li = $('<li></li>');
		//значение
		var value = cap.attr('value');
		li.text(value);
		//активный
		var active = cap.attr('active');
		if (active == '1'){
			li.addClass('active');
			//опции
			doOptions(cap);
		};
		//добавить
		ul.append(li);
	});
}

function buildTara(){
    $.ajax({
        type: "POST",
        url: "tara.xml",
        dataType: "xml",
        success: function(data){
        	doCapacity(data);
        },
        error: function(){
            alert('Ошибка при получении данных!');
        }
    });
}

function getTara(capValue){
    $.ajax({
        type: "POST",
        url: "tara.xml",
        dataType: "xml",
        success: function(data) {
        	$(data).find('capacity').each(function(){
        		var cap = $(this);
        		var v = cap.attr('value');
        		if(v == capValue){
        			doOptions(cap);
        		};
        	});
        },
        error: function(){
            alert('ERROR');
        }
    });
}

$(function(){
	//при клике на кнопке
	$('form').on('click', 'li', function(){
		//активный
		$(this).addClass('active').siblings().removeClass('active');
		//ёмкость
		var item = $(this).parent().attr('id');
		if(item == 'capacity'){
			var v = $(this).text();
			getTara(v);
		};
	});
	//начальная обработка
	buildTara();
})

Надеюсь, понятно описал проблему. Хочу посоветоваться с опытными товарищами о механизме реализации моей задумки. Есть ли более эффективные пути решения задачи? Буду рад любой помощи.

Я бы точно не стал хранить данные в xml. Мало того, что это медленно, парсить каждый раз надо плохочитаемую структуру, так еще и как это обновлять? В ручную что ли будешь?
Если это вопрос не религиозный - то следовало бы использовать СУБД, и получать данные в формате json

Но для организации СУБД нужно писать админку, страницу ввода и редактирования данных. Это всё время и знания.

А товар в одном количестве получается что-ли?

Настройка страницы ещё не закончена. Пока только решал задачу по отображению всех нужных кнопочек, изображения товара и цены.

Однако, получилось. Прошу заценить.
http://kedrovaya.in.ua/tara/100.php

Буду ооочень признателен знатоку JQuary, который поможет оптимизировать код:
http://kedrovaya.in.ua/tara/tara.js

Как говорил Станиславский, любите искусство в себе, а не себя в искусстве. Сегодня, когда большая часть задания выполнена, я пришёл к выводу, что для меня, конечно, будет очень лестно иметь такую головоломку на сайте, но покупателю работать с такой формой подбора товара будет не удобно. Лучше использовать уже популярную систему, когда все товары выводятся списком, а к списку применяется фильтр по заданному покупателем критерию отбора. И как бы это ни было ужасным, но у каждого товара должна быть отдельная страница.

В общем, всем спасибо за участие.