cosmopet.ae/wp-content/themes/woodmart/js/price-range-slider.js

// Сохраните этот файл как price-range-slider.js в папке /js/ вашей темы
document.addEventListener('DOMContentLoaded', function() {
    // Функция для создания слайдера цены
    function initPriceRangeSlider() {
        // Получаем элементы DOM
        const slider = document.getElementById('price-range-slider');
        if (!slider) return;
        
        // Получаем параметры переданные из PHP
        const minPrice = parseInt(price_slider_params.min_price);
        const maxPrice = parseInt(price_slider_params.max_price);
        let currentMinPrice = parseInt(price_slider_params.current_min_price);
        let currentMaxPrice = parseInt(price_slider_params.current_max_price);
        const currencySymbol = price_slider_params.currency_symbol;
        
        // Элементы отображения и скрытые поля
        const minPriceInput = document.getElementById('min_price');
        const maxPriceInput = document.getElementById('max_price');
        const priceRangeMin = document.getElementById('price-range-min');
        const priceRangeMax = document.getElementById('price-range-max');
        const rangeSliderContainer = document.querySelector('.price-range-slider-container');
        
        // Устанавливаем начальные значения для скрытых полей
        minPriceInput.value = currentMinPrice;
        maxPriceInput.value = currentMaxPrice;
        
        // Отображаем начальные значения
        priceRangeMin.textContent = currencySymbol + currentMinPrice;
        priceRangeMax.textContent = currencySymbol + currentMaxPrice;
        
        // Создаем элементы слайдера
        const sliderTrack = document.createElement('div');
        sliderTrack.classList.add('slider-track');
        
        const sliderRange = document.createElement('div');
        sliderRange.classList.add('slider-range');
        
        const handleMin = document.createElement('div');
        handleMin.classList.add('slider-handle', 'handle-min');
        
        const handleMax = document.createElement('div');
        handleMax.classList.add('slider-handle', 'handle-max');
        
        // Добавляем элементы в DOM
        slider.appendChild(sliderTrack);
        slider.appendChild(sliderRange);
        slider.appendChild(handleMin);
        slider.appendChild(handleMax);
        
        // Устанавливаем размеры слайдера
        const sliderWidth = slider.offsetWidth;
        const handleWidth = 18; // Ширина ручки в пикселях
        
        // Функция для конвертации цены в положение
        function priceToPosition(price) {
            return ((price - minPrice) / (maxPrice - minPrice)) * (sliderWidth - handleWidth);
        }
        
        // Функция для конвертации положения в цену
        function positionToPrice(position) {
            return Math.round(minPrice + (position / (sliderWidth - handleWidth)) * (maxPrice - minPrice));
        }
        
        // Устанавливаем начальные положения
        let minHandlePosition = priceToPosition(currentMinPrice);
        let maxHandlePosition = priceToPosition(currentMaxPrice);
        
        // Обновляем положения элементов
        function updateSliderPositions() {
            handleMin.style.left = minHandlePosition + 'px';
            handleMax.style.left = maxHandlePosition + 'px';
            sliderRange.style.left = minHandlePosition + 'px';
            sliderRange.style.width = (maxHandlePosition - minHandlePosition) + 'px';
        }
        
        // Обновляем значения цен
        function updatePriceValues() {
            currentMinPrice = positionToPrice(minHandlePosition);
            currentMaxPrice = positionToPrice(maxHandlePosition);
            
            minPriceInput.value = currentMinPrice;
            maxPriceInput.value = currentMaxPrice;
            
            priceRangeMin.textContent = currencySymbol + currentMinPrice;
            priceRangeMax.textContent = currencySymbol + currentMaxPrice;
        }
        
        // Инициализация положений
        updateSliderPositions();
        
        // Функция для обработки перетаскивания ручек
        function startDrag(e, isMin) {
            e.preventDefault();
            
            let startX = e.clientX || e.touches[0].clientX;
            let startPosition = isMin ? minHandlePosition : maxHandlePosition;
            
            function doDrag(e) {
                let currentX = e.clientX || e.touches[0].clientX;
                let newPosition = startPosition + (currentX - startX);
                
                // Ограничиваем положение ручек
                if (isMin) {
                    newPosition = Math.max(0, Math.min(newPosition, maxHandlePosition - 10));
                    minHandlePosition = newPosition;
                } else {
                    newPosition = Math.max(minHandlePosition + 10, Math.min(newPosition, sliderWidth - handleWidth));
                    maxHandlePosition = newPosition;
                }
                
                updateSliderPositions();
                updatePriceValues();
            }
            
            function stopDrag() {
                document.removeEventListener('mousemove', doDrag);
                document.removeEventListener('touchmove', doDrag);
                document.removeEventListener('mouseup', stopDrag);
                document.removeEventListener('touchend', stopDrag);
            }
            
            document.addEventListener('mousemove', doDrag);
            document.addEventListener('touchmove', doDrag);
            document.addEventListener('mouseup', stopDrag);
            document.addEventListener('touchend', stopDrag);
        }
        
        // Обработчики событий для ручек
        handleMin.addEventListener('mousedown', function(e) {
            startDrag(e, true);
        });
        
        handleMin.addEventListener('touchstart', function(e) {
            startDrag(e, true);
        });
        
        handleMax.addEventListener('mousedown', function(e) {
            startDrag(e, false);
        });
        
        handleMax.addEventListener('touchstart', function(e) {
            startDrag(e, false);
        });
    }
    
    // Инициализируем слайдер после загрузки DOM
    initPriceRangeSlider();
    
    // Обработчик отправки формы
    const ajaxForm = document.getElementById('ajaxform');
    if (ajaxForm) {
        ajaxForm.addEventListener('submit', function(e) {
            // Если необходимо предотвратить отправку формы для AJAX-обработки
            // e.preventDefault();
            // Здесь можно добавить код для AJAX-отправки формы
        });
    }
});