M
M
Maxim2020-05-02 19:14:52
JavaScript
Maxim, 2020-05-02 19:14:52

Filter initialization?

Hello everyone, I am writing a product filter in laravel on jquery , when initializing the script , I

initialize

<script type="text/javascript">
        $("._filter").each(function () {new filterProducts.ProductFilter(this, {"url": "/category/zerkala", "sort":0 });});
    </script>


gives an error message
Uncaught TypeError: filterProducts.ProductFilter is not a constructor
    at HTMLDivElement.<anonymous> (category.html:1130)
    at Function.each (app.js:462)
    at jQuery.fn.init.each (app.js:297)
    at category.html:1130

filtering script

filterProducts = (function ($) {
    'use strict';
    return {
        init: function () {
            let module = this;
            let ProductFilter = (function () {
                function ProductFilter(domElem, options) {
                    let self = this;
                    options = options || {};

                    this.sort = options.sort || 0;
                    this.url = options.url || '';
                    this.domElem = domElem;
                    this.$domElem = $(domElem);
                    this.$filters = $('._filter-item', domElem);
                    this.init();
                }

                ProductFilter.prototype.init = function () {
                    let self = this;
                    this.$filters.each(function () {
                        let $this = $(this);
                        if ($this.hasClass('_filter-item-range')) {
                            self.rangeFilter($this);
                        }
                    });
                };



                ProductFilter.prototype.rangeFilter = function ($filter) {
                    let self = this;

                    let slider = document.getElementById('_filter-price');

                    let sliderMin = +slider.getAttribute('data-min');
                    let sliderMax = +slider.getAttribute('data-max');
                    let sliderGlobalMin = +slider.getAttribute('data-current-min');
                    let sliderGlobalMax = +slider.getAttribute('data-current-max');
                    let inputFrom = '.product-filter-item-value_from .product-filter-item-value__value';
                    let inputTo = '.product-filter-item-value_to .product-filter-item-value__value';

                    noUiSlider.create(slider, {
                        start: [sliderGlobalMin, sliderGlobalMax],
                        connect: true,
                        range: {
                            'min': sliderMin,
                            'max': sliderMax
                        },
                        format: {
                            from: parseInt,
                            to: parseInt
                        }
                    });

                    slider.noUiSlider.on('update', function (values, handle) {
                        $(handle ? inputFrom : inputTo, $filter).val(values[handle].toString().split('.').map(function(value, index) {return index ? value : value.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1 ")}).join('.'));
                    });
                    slider.noUiSlider.on('set', function () {
                        let $slider = $(slider);
                        let top = $slider.position().top + $slider.outerHeight(true) / 2;
                    });

                    $filter
                        .on('change', inputFrom, function (event) {
                            var target = event.currentTarget;
                            var value = +target.value.toString().replace(/[^\d\.]/g, "");
                            slider.noUiSlider.set([value, null]);
                        })
                        .on('change', inputTo, function (event) {
                            var target = event.currentTarget;
                            var value = +target.value.toString().replace(/[^\d\.]/g, "");

                            slider.noUiSlider.set([null, value]);
                        });

                };

                return ProductFilter;
            })();
            module.ProductFilter = ProductFilter;
        }
    };
})(jQuery);

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question