скрипт позволяет пользователю фильтровать и динамически загружать комплект шин для квадроциклов на веб-странице. Фильтрация происходит на основе таких параметров, как диаметр шин, высота шин, марка и другие. Пользователь может применять фильтры, не перезагружая страницу, и динамически загружать больше товаров с помощью кнопки "Загрузить еще".
Основные шаги работы скрипта:
Получение параметров фильтрации:
При загрузке страницы или изменении фильтров (например, выбор диаметра или высоты шины) параметры фильтрации собираются с помощью функции getURLParameters() (при первой загрузке) или через форму с помощью $('#filterForm').serializeArray() (при нажатии кнопки).
Эти параметры включают выбранные пользователем значения для полей фильтра, таких как диаметр, высота, ширина и т.д.
Динамическая загрузка товаров:
Когда пользователь заходит на страницу, вызывается функция loadMoreWheels(), которая отправляет AJAX-запрос на сервер (файл load_more_wheels.php), передавая параметры фильтрации и смещение товаров.
В ответе сервер возвращает HTML-код товаров, который вставляется на страницу в блок #wheels-container.
Если на сервере больше нет товаров для загрузки, кнопка "Загрузить еще" скрывается. Иначе она остается видимой и обновляется текстом "Загрузить еще".
Ключевой момент — товары загружаются не сразу все, а по частям (по 20 товаров за раз, начиная с offset = 0).
Обновление параметров фильтрации без перезагрузки:
Когда пользователь меняет значение в фильтре (например, выбирает новый диаметр или высоту шины), вызывается функция updateOptions(). Эта функция отправляет AJAX-запрос на сервер (файл filter_options.php), который возвращает возможные опции для других полей формы.
Например, если пользователь выбрал диаметр шины, сервер может вернуть обновленный список доступных высот шин, ширин и других параметров, которые соответствуют выбранному диаметру.
Функция updateSelectOptions() обновляет содержимое выпадающих списков на странице в соответствии с результатами ответа сервера. Она:
Обновляет текст опций с количеством доступных товаров (например, "Диаметр 14 (20 шт)").
Отключает недоступные опции, которые больше не подходят под текущие фильтры (например, диаметр шины может стать недоступным, если соответствующих товаров больше нет).
Сохраняет выбранные значения пользователем.
Группировка опций:
На серверной стороне товары сортируются и группируются для упрощения выбора. Например, диаметр шин делится на несколько групп: шины с диаметром 14 или 12 находятся в одной группе, а шины с диаметром больше 15 — в другой.
Для каждой группы отображается определенное количество доступных товаров.
Серверная обработка запросов:
На сервере файл load_more_wheels.php обрабатывает запросы, применяя фильтрацию к базе данных:
Если пользователь выбрал фильтр по диаметру шин, сервер добавляет условие фильтрации, например wcm.radius IN (14, 15).
Товары извлекаются из базы данных с учетом смещения (например, начиная с 20-го товара, если это вторая загрузка).
Результаты возвращаются в виде HTML-кода, который обновляет список товаров на странице.
Если пользователь применяет фильтры через форму, они передаются на сервер как параметры GET-запроса.
Обновление интерфейса:
При каждой загрузке новых товаров или изменении фильтров интерфейс обновляется: скрываются или отключаются недоступные элементы, меняются тексты опций с указанием количества доступных товаров.
Пример работы:
Предположим, пользователь хочет выбрать комплект шин с диаметром 14. Пользователь выбирает соответствующий параметр в фильтре. Вот как работает система:
После выбора диаметр шин передается на сервер.
Сервер возвращает список доступных товаров, соответствующих этому диаметру.
Обновляется интерфейс, отображаются товары с диаметром 14, а также обновляются другие параметры, такие как высота шин и ширина, чтобы пользователь мог дальше фильтровать товары.
Таким образом, весь процесс фильтрации и загрузки новых товаров выполняется динамически, без необходимости перезагружать страницу.
Этот скрипт отвечает за загрузку и фильтрацию товаров (в данном случае, колес) на веб-странице с использованием библиотеки jQuery. Рассмотрим его по частям.
1. Подключение библиотеки jQuery
html
Копировать код
Что делает: Подключает библиотеку jQuery версии 1.12.4, которая упрощает работу с JavaScript, особенно с манипуляцией элементами страницы и AJAX-запросами.
2. Функция для получения параметров из URL
javascript
Копировать код
// Функция для получения параметров из URL
function getURLParameters() {
const params = new URLSearchParams(window.location.search);
const entries = Array.from(params.entries());
return entries.map(([name, value]) => ({ name, value }));
}
Что делает:
Извлекает параметры из строки запроса URL (то, что после знака ?).
Преобразует их в массив объектов с ключами name и value.
Пример: Если URL такой example.com?page=2&sort=asc, функция вернёт:
javascript
Копировать код
[
{ name: 'page', value: '2' },
{ name: 'sort', value: 'asc' }
]
3. Основной блок кода, выполняющийся при загрузке страницы
javascript
Копировать код
$(document).ready(function() {
let offset = 0;
const limit = 20;
// Функция для загрузки дополнительных товаров
function loadMoreWheels() {
let params;
if (offset === 0) {
// При первой загрузке страницы берем параметры из URL
params = getURLParameters();
} else {
// При нажатии "Загрузить еще" берем параметры из формы
params = $('#filterForm').serializeArray();
}
params.push({ name: 'offset', value: offset });
$.ajax({
url: 'load_more_wheels.php',
type: 'GET',
data: params,
beforeSend: function() {
$('#load-more').text('Загрузка...');
},
success: function(data) {
if (data.trim() !== '') {
$('#wheels-container').append(data); // добавляем товары в контейнер
offset += limit; // увеличиваем смещение для следующей загрузки
// Проверяем, есть ли еще товары для загрузки
var tempDiv = $('
').html(data);
var productsLoaded = tempDiv.find('.wrapper-good').length;
if (productsLoaded < limit) {
// Больше товаров нет, скрываем кнопку
$('#load-more-container').hide();
} else {
// Еще есть товары для загрузки
$('#load-more-container').show();
$('#load-more').text('Загрузить еще');
}
} else {
// Нет данных, скрываем кнопку
$('#load-more-container').hide();
}
},
error: function() {
$('#load-more').text('Ошибка загрузки');
}
});
}
// Загружаем начальные товары при загрузке страницы
loadMoreWheels();
// Загружаем дополнительные товары при клике на кнопку
$('#load-more').on('click', function() {
loadMoreWheels();
});
});
Детальный разбор:
Инициализация переменных:
offset = 0: Начальное смещение для загрузки товаров.
limit = 20: Количество товаров, загружаемых за один запрос.
Функция loadMoreWheels:
Цель: Загружать дополнительные товары по мере необходимости (например, при нажатии на кнопку "Загрузить еще").
Логика:
Если offset равен 0 (первая загрузка), параметры фильтра берутся из URL с помощью функции getURLParameters.
В противном случае параметры берутся из формы фильтрации с идентификатором filterForm и сериализуются в массив.
К параметрам добавляется offset, чтобы сервер знал, с какого места начать загрузку.
AJAX-запрос:
URL: 'load_more_wheels.php' – серверный скрипт, который возвращает HTML-код дополнительных товаров.
Метод: GET.
Данные: Параметры фильтрации и смещение.
beforeSend: Перед отправкой запроса меняет текст кнопки на "Загрузка...".
success:
Если данные не пустые:
Добавляет полученные товары в контейнер с идентификатором wheels-container.
Увеличивает offset на limit для следующей загрузки.
Проверяет, сколько товаров было загружено (.wrapper-good – класс каждого товара).
Если загружено меньше, чем limit, скрывает кнопку "Загрузить еще", так как больше товаров нет.
Иначе, возвращает кнопку в исходное состояние.
Если данные пустые, скрывает кнопку.
error: При ошибке загрузки меняет текст кнопки на "Ошибка загрузки".
Начальная загрузка и обработчик кнопки:
loadMoreWheels(); – при загрузке страницы сразу загружаются первые товары.
Обработчик клика на кнопку #load-more:
При нажатии на кнопку вызывается функция loadMoreWheels для загрузки следующих товаров.
4. Функция для обновления опций фильтров
javascript
Копировать код
// Функция для обновления опций
function updateOptions() {
// Собираем выбранные значения
var selectedRadius = $('#opt_radius').val() || [];
var selectedSize = $('#opt_size').val() || [];
var selectedMarka = $('#opt_marka').val() || [];
var selectedType = $('#opt_type').val() || [];
var selectedWidthFront = $('#opt_width_front').val() || [];
var selectedWidthRear = $('#opt_width_rear').val() || [];
// Отправляем AJAX-запрос
$.ajax({
url: 'filter_options.php',
type: 'POST',
dataType: 'json',
data: {
radius: selectedRadius,
size: selectedSize,
marka: selectedMarka,
type: selectedType,
width_front: selectedWidthFront,
width_rear: selectedWidthRear
},
success: function(response) {
// Обновляем опции для каждого селектора
updateSelectOptions('#opt_radius', response.radius, selectedRadius);
updateSelectOptions('#opt_size', response.size, selectedSize);
updateSelectOptions('#opt_marka', response.marka, selectedMarka);
updateSelectOptions('#opt_type', response.type, selectedType);
updateSelectOptions('#opt_width_front', response.width_front, selectedWidthFront);
updateSelectOptions('#opt_width_rear', response.width_rear, selectedWidthRear);
}
});
}
Детальный разбор:
Сбор выбранных значений фильтров:
Получает значения из нескольких селекторов (#opt_radius, #opt_size, и т.д.).
Если значение не выбрано, устанавливает пустой массив.
AJAX-запрос:
URL: 'filter_options.php' – серверный скрипт, который возвращает обновлённые опции для фильтров в формате JSON.
Метод: POST.
Тип данных ответа: json.
Данные: Передаёт текущие выбранные значения фильтров.
Обработка успешного ответа:
Для каждого селектора вызывает функцию updateSelectOptions, передавая:
Идентификатор селектора (например, '#opt_radius').
Данные опций из ответа сервера (response.radius, response.size, и т.д.).
Текущие выбранные значения, чтобы сохранить выбор пользователя.
5. Функция для обновления опций селекторов
javascript
Копировать код
// Функция для обновления опций селектора
function updateSelectOptions(selectorId, optionsData, selectedValues) {
var $select = $(selectorId);
var counts = {};
var labels = {};
for (var i = 0; i < optionsData.length; i++) {
counts[optionsData[i].value] = optionsData[i].total_sets;
if (optionsData[i].label !== undefined) {
labels[optionsData[i].value] = optionsData[i].label;
}
}
$select.find('option').each(function() {
var $option = $(this);
var value = $option.val();
if (value === '------------------') {
// Это разделитель
return;
}
var count = counts[value] || 0;
var text = '';
// Для селектора типа шины используем label
if (selectorId === '#opt_type') {
var label = labels[value] || $option.text().split(' (')[0];
text = label + ' (' + count + ' шт)';
} else {
text = value + ' (' + count + ' шт)';
}
$option.text(text);
if (counts.hasOwnProperty(value)) {
$option.prop('disabled', false);
} else {
$option.prop('disabled', true);
}
// Оставляем опцию выбранной, если она в selectedValues
if (selectedValues.indexOf(value) !== -1) {
$option.prop('selected', true);
} else {
$option.prop('selected', false);
}
});
}
Детальный разбор:
Параметры функции:
selectorId: Идентификатор селектора, который нужно обновить (например, '#opt_radius').
optionsData: Массив объектов с новыми опциями для селектора, полученных от сервера.
selectedValues: Массив значений, которые уже выбраны пользователем, чтобы сохранить выбор.
Создание словарей:
counts: Объект, где ключи – значения опций, а значения – количество доступных товаров для каждой опции (total_sets).
labels: Объект для хранения дополнительных меток, если они есть (label).
Обновление каждой опции селектора:
Перебирает все