Делаю страницу товара на сайте интернет-магазина. Хочу сделать подбор параметров, как это реализовано на сайте 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();
})
Надеюсь, понятно описал проблему. Хочу посоветоваться с опытными товарищами о механизме реализации моей задумки. Есть ли более эффективные пути решения задачи? Буду рад любой помощи.
