Показать сообщение отдельно
  #1 (permalink)  
Старый 14.04.2016, 22:00
Интересующийся
Отправить личное сообщение для js-user Посмотреть профиль Найти все сообщения от js-user
 
Регистрация: 11.07.2015
Сообщений: 16

Выбор а-ля 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();
})

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