Как сделать фильтр фильмов на киносайте? (скрипт фильтра по нескольким категориям)

Думает, что помогает
Регистрация
15 Дек 2017
Сообщения
4,970
#1

Некоторые из вас уже сделали себе фильтр фильмов на JS, но если еще нет, то в пару строк кода, который Вам нужно будет только копировать и вставлять, Вы сможете реализовать такую функцию.

Пример готового фильтра Вы можете увидеть в шаблоне «snow» - https://enota.club/threads/novyj-sh...w-skript-filtra-beskonechnaja-prokrutka.2965/

Фильтр будет располагаться на главной странице (шаблон index.ejs) и на странице категорий (шаблон category.ejs). Скрипт практически идентичный, отличия будет только в одной функции, которая ставит заранее предопределенные значения, например если человек зашел на «Фильмы + 2021 + комедия», чтобы это уже стояло в фильтре.

Стили и цвета фильтра, Вам придется подбирать под Ваш сайт, и редактировать CSS. Весь код будет прокомментирован, поэтому Вы легко разбересь.

Код для вставки в index.ejs

HTML-код фильтра фильмов:
HTML:
<div>

    <!-- Слайдер годов -->
    <div>
        <div id="cinemapress-slider"></div>
    </div>

    <!-- Параметры фильтра -->
    <div id="cinemapress-filter">

        <!-- Тип: Фильмы/Сериалы -->
        <div class="custom-select">
            <!-- data-url - URL типа из админ-панели (для подставления в запрос ?type=фильмы) -->
            <!-- data-url_name - URL типа (для подставления в хеш #type=фильмы) -->
            <select data-url="<%- page.urls.type %>" data-url_name="type">
                <option value=""></option>
                <option value="<%- page.urls.types.movie %>" selected="selected"><%- page.l.movies %></option>
                <option value="<%- page.urls.types.serial %>"><%- page.l.series %></option>
            </select>
        </div>

        <!-- Жанры: комедия,драма,ужасы -->
        <div class="custom-select">
            <!-- data-url - URL типа из админ-панели (для подставления в запрос ?genre=комедия) -->
            <!-- data-url_name - URL типа (для подставления в хеш #genre=комедия) -->
            <select data-url="<%- page.urls.genre %>" data-url_name="genre">
                <option value="" selected="selected"><%- page.l.genre %>:</option>
                <% /* Жанры (список в настройках отображения) */ %>
                <% page.urls.genres.forEach(function(genre) { %>
                    <option value="<%- genre.title %>"><%- genre.title %></option>
                <% }); %>
            </select>
        </div>

        <!-- Страны: США,Россия,Япония -->
        <div class="custom-select">
            <!-- data-url - URL типа из админ-панели (для подставления в запрос ?country=США) -->
            <!-- data-url_name - URL типа (для подставления в хеш #country=США) -->
            <select data-url="<%- page.urls.country %>" data-url_name="country">
                <option value="" selected="selected"><%- page.l.country %>:</option>
                <% /* Жанры (список в настройках отображения) */ %>
                <% page.urls.countries.forEach(function(country) { %>
                    <option value="<%- country.title %>"><%- country.title %></option>
                <% }); %>
            </select>
        </div>

        <!-- Сортировка: По числу голосов КП, По рейтингу IMDb -->
        <div class="custom-select">
            <!-- data-url - URL типа из админ-панели (для подставления в запрос ?sorting=По рейтингу IMDb) -->
            <!-- data-url_name - URL типа (для подставления в хеш #sorting=По рейтингу IMDb) -->
            <select data-url="sorting" data-url_name="sorting">
                <option value="" selected="selected"><%- page.l.sorting %>:</option>
                <% if (page.l['kinopoisk-rating-up']) { %>
                    <option value="kinopoisk-rating-up"><%- page.l['kinopoisk-rating-up'] %></option>
                <% } %>
                <% if (page.l['imdb-rating-up']) { %>
                    <option value="imdb-rating-up"><%- page.l['imdb-rating-up'] %></option>
                <% } %>
                <% if (page.l['kinopoisk-vote-up']) { %>
                    <option value="kinopoisk-vote-up"><%- page.l['kinopoisk-vote-up'] %></option>
                <% } %>
                <% if (page.l['imdb-vote-up']) { %>
                    <option value="imdb-vote-up"><%- page.l['imdb-vote-up'] %></option>
                <% } %>
                <% if (page.l['year-up']) { %>
                    <option value="year-up"><%- page.l['year-up'] %></option>
                <% } %>
                <% if (page.l['premiere-up']) { %>
                    <option value="premiere-up"><%- page.l['premiere-up'] %></option>
                <% } %>
            </select>
        </div>

        <!-- Сбросить значения -->
        <button id="reset-filter">
            <span><%- page.l.reset %></span>
        </button>

        <!-- Начать поиск -->
        <button id="submit-filter">
            <span><%- page.l.search %></span>
        </button>

    </div>

</div>

<!-- Кнопка поиска случайного фильма на основе значений фильтра -->
<a href="javascript:void(0)" id="random-filter">
    <span><%- page.l.lucky %></span>
</a>
Как Вы видите, в HTML нет ничего сложного, проставляйте CSS классы и формируйте стили под цвета Вашего шаблона.
 
Думает, что помогает
Регистрация
15 Дек 2017
Сообщения
4,970
#2
JavaScript код Вам скорее всего редактировать не придется, но если Вы разбираетесь, то можете что-то улучшить.

Вставлять его лучше всего в самый низ шаблона index.ejs

https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/14.6.3/nouislider.min.js

Скрипт слайдера, должен быть загружен в /themes/ШАБЛОН/public/js/nouislider.min.js

HTML:
<script src="/themes/<%- page.theme %>/public/js/nouislider.min.js"></script>

<script>
    var cinemapress_filter = document.getElementById('cinemapress-filter').innerHTML;
    var cinemapress_slider = document.getElementById('cinemapress-slider');
    var year_min = parseInt('<%- page.urls.years[page.urls.years.length-1].title %>');
    var year_max = parseInt('<%- page.urls.years[0].title %>');
    var page_urls_search = '<%- page.urls.search %>';
    var page_urls_year = '<%- page.urls.year %>';

    function customSlider() {
        var win = window,
            doc = document,
            docElem = doc.documentElement,
            body = doc.getElementsByTagName('body')[0],
            x = win.innerWidth || docElem.clientWidth || body.clientWidth;
        cinemapress_slider = document.getElementById('cinemapress-slider');
        noUiSlider.create(cinemapress_slider, {
            start: [year_min, year_max],
            connect: true,
            step: 1,
            range: {
                'min': [year_min],
                'max': [year_max]
            },
            tooltips: [true, true],
            pips: {
                mode: 'count',
                values: x && x < 400 ? 5 : 11,
                density: 1,
                stepped: true
            },
            format: {
                to: (v) => parseFloat(v).toFixed(0),
                from: (v) => parseFloat(v).toFixed(0)
            }
        });
    }
    function customSelect() {
        var x, i, j, l, ll, selElement, a, b, c;
        x = document.getElementsByClassName("custom-select");
        l = x.length;
        for (i = 0; i < l; i++) {
            selElement = x[i].getElementsByTagName("select")[0];
            ll = selElement.length;
            a = document.createElement("DIV");
            a.setAttribute("class", "select-selected");
            a.innerHTML = selElement.options[selElement.selectedIndex].innerHTML;
            x[i].appendChild(a);
            b = document.createElement("DIV");
            b.setAttribute("class", "select-items select-hide");
            for (j = 1; j < ll; j++) {
                c = document.createElement("DIV");
                c.innerHTML = selElement.options[j].innerHTML;
                c.addEventListener("click", function(e) {
                    var y, i, k, s, h, sl, yl;
                    s = this.parentNode.parentNode.getElementsByTagName("select")[0];
                    sl = s.length;
                    h = this.parentNode.previousSibling;
                    for (i = 0; i < sl; i++) {
                        if (s.options[i].innerHTML === this.innerHTML) {
                            s.selectedIndex = i;
                            h.innerHTML = this.innerHTML;
                            y = this.parentNode.getElementsByClassName("same-as-selected");
                            yl = y.length;
                            for (k = 0; k < yl; k++) {
                                y[k].removeAttribute("class");
                            }
                            this.setAttribute("class", "same-as-selected");
                            break;
                        }
                    }
                    h.click();
                });
                b.appendChild(c);
            }
            x[i].appendChild(b);
            a.addEventListener("click", function(e) {
                e.stopPropagation();
                closeAllSelect(this);
                this.nextSibling.classList.toggle("select-hide");
                this.classList.toggle("select-arrow-active");
            });
        }
    }

    function closeAllSelect(e) {
        var x, y, i, xl, yl, arrNo = [];
        x = document.getElementsByClassName("select-items");
        y = document.getElementsByClassName("select-selected");
        xl = x.length;
        yl = y.length;
        for (i = 0; i < yl; i++) {
            if (e === y[i]) {
                arrNo.push(i)
            } else {
                y[i].classList.remove("select-arrow-active");
            }
        }
        for (i = 0; i < xl; i++) {
            if (arrNo.indexOf(i)) {
                x[i].classList.add("select-hide");
            }
        }
    }

    function submitData() {
        var years = cinemapress_slider.noUiSlider.get();
        var year = years[0] === years[1] ? years[0] : years[0] + '-' + years[1];
        var url = '/' + page_urls_search + '?' + page_urls_year + '=' + year;
        var hash = '#year=' + year;
        document.querySelectorAll('[data-url]').forEach(function(e) {
            var v = encodeURIComponent( e.value || (typeof e.selectedIndex !== 'undefined' && typeof e.options !== 'undefined' && typeof e.options[e.selectedIndex] !== 'undefined' && e.options[e.selectedIndex].value) || '');
            if (v) {
                hash += '|' + e.dataset.url_name + '=' + v;
                url += '&' + e.dataset.url + '=' + v;
            }
        });
        window.location.href = url + hash;
    }

    function resetData() {
        cinemapress_slider.noUiSlider.set([year_min, year_max]);
        document.querySelectorAll('[data-url]').forEach(function(s) {
            s.selectedIndex = null;
        });
        document.getElementById('cinemapress-filter').innerHTML = cinemapress_filter;
        document.getElementById('random-filter').addEventListener('click', randomData);
        document.getElementById('reset-filter').addEventListener('click', resetData);
        document.getElementById('submit-filter').addEventListener('click', submitData);
        customSelect();
    }

    function randomData() {
        var years = cinemapress_slider.noUiSlider.get();
        var year = years[0] === years[1] ? years[0] : years[0] + '-' + years[1];
        var url = '/' + page_urls_search + '?' + page_urls_year + '=' + year;
        document.querySelectorAll('[data-url]').forEach(function(e) {
            var v = encodeURIComponent(e.value || e.options[e.selectedIndex].value);
            if (v) {
                url += '&' + e.dataset.url + '=' + v;
            }
        });
        window.location.href = url + '&random=' + Math.random();
    }

    function setHashData() {
        customSlider();
        if(window.location.hash) {
            var hash = decodeURIComponent(window.location.hash.substring(1));
            hash.split('|').forEach(function (key_val) {
                if (key_val.indexOf('=') + 1) {
                    var key = key_val.split('=')[0];
                    var val = key_val.split('=')[1];
                    if (key === 'year') {
                        var year = val.split('-');
                        var year_min_new = parseInt(year[0]);
                        var year_max_new = parseInt(year[1] || year[0]);
                        cinemapress_slider.noUiSlider.set([year_min_new, year_max_new]);
                    }
                    var el_opt = document.querySelectorAll('[data-url]');
                    el_opt.forEach(function(e) {
                        if (e.dataset.url_name === key) {
                            for (var i = 0; i < e.options.length; i++) {
                                if (e.options[i].value === val) {
                                    e.options[i].selected = true;
                                    e.selectedIndex = i;
                                    break;
                                }
                            }
                        }
                    });
                }
            })
        }
        customSelect();
    }

    document.getElementById('random-filter').addEventListener('click', randomData);
    document.getElementById('reset-filter').addEventListener('click', resetData);
    document.getElementById('submit-filter').addEventListener('click', submitData);
    document.addEventListener('click', closeAllSelect);
    setHashData();
</script>
 
Думает, что помогает
Регистрация
15 Дек 2017
Сообщения
4,970
#3
Так же, есть небольшой кусок CSS-стилей, который уже раскрасит Ваш фильтр в цвета (вставить после скрипта):

HTML:
<style>
    .custom-select {
        position: relative;
        background: 0 0;
        border: 1px #72436f solid;
        border-radius: 8px;
        color: #e79899
    }

    .custom-select select {
        display: none
    }

    .select-selected {
        background: 0 0
    }

    .select-selected:after {
        position: absolute;
        content: "";
        top: 18px;
        right: 10px;
        width: 0;
        height: 0;
        border: 6px solid transparent;
        border-color: #f07d7f transparent transparent transparent
    }

    .select-selected.select-arrow-active:after {
        border-color: transparent transparent #964c8c transparent;
        top: 10px
    }

    .select-items div,
    .select-selected {
        color: #e79899;
        padding: 8px 16px;
        border: 1px solid transparent;
        cursor: pointer;
        user-select: none
    }

    .select-items {
        position: absolute;
        background: 0 0;
        color: #e79899;
        top: 100%;
        left: 0;
        right: 0;
        z-index: 99
    }

    .select-hide {
        display: none
    }

    .select-items {
        border: 1px #563550 solid;
        border-radius: 8px;
        background-color: rgba(0, 0, 0, .7)
    }

    .select-items div {
        color: #fff;
        font-size: 12px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden
    }

    .same-as-selected,
    .select-items div:hover {
        border-radius: 8px;
        background-color: rgba(0, 0, 0, .3)
    }

    .select-selected {
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden
    }

    .filter-slider {
        margin: 60px auto;
        padding: 10px 25px 10px 10px
    }

    .noUi-connect {
        background-image: -webkit-gradient(linear, left top, right top, from(#f37f7f), to(#944b8c));
        background-image: -o-linear-gradient(left, #f37f7f, #944b8c);
        background-image: linear-gradient(to right, #f37f7f, #944b8c);
        border: 0
    }

    .noUi-horizontal .noUi-handle,
    .noUi-vertical .noUi-handle {
        background-image: -webkit-gradient(linear, left top, right top, from(#944b8c), to(#f37f7f));
        background-image: -o-linear-gradient(left, #944b8c, #f37f7f);
        background-image: linear-gradient(to right, #944b8c, #f37f7f)
    }

    .noUi-value {
        color: #72436f!important
    }

    .noUi-marker {
        color: #302f3f!important;
        background: #302f3f!important
    }

    .noUi-horizontal {
        background-image: -webkit-gradient(linear, left top, right top, from(#f37f7f), to(#944b8c));
        background-image: -o-linear-gradient(left, #f37f7f, #944b8c);
        background-image: linear-gradient(to right, #f37f7f, #944b8c);
        border: 0;
        color: #fff
    }

    .noUi-target.noUi-horizontal {
        background-image: -webkit-gradient(linear, left top, right top, from(#f37f7f), to(#944b8c));
        background-image: -o-linear-gradient(left, #f37f7f, #944b8c);
        background-image: linear-gradient(to right, #f37f7f, #944b8c);
        border: 0;
        color: #fff
    }

    .noUi-tooltip {
        background-image: -webkit-gradient(linear, left top, right top, from(#944b8c), to(#f37f7f));
        background-image: -o-linear-gradient(left, #944b8c, #f37f7f);
        background-image: linear-gradient(to right, #944b8c, #f37f7f);
        border: 0;
        color: #fff
    }

    .noUi-horizontal {
        height: 10px!important;
        border: 0!important;
        background: #302f3f!important;
        box-shadow: none!important
    }

    .noUi-handle {
        box-shadow: none!important;
        border-radius: 100%!important;
        border: 0!important;
        width: 20px!important;
        height: 20px!important
    }

    .noUi-handle::after,
    .noUi-handle::before {
        background: 0 0!important
    }
</style>
 
Думает, что помогает
Регистрация
15 Дек 2017
Сообщения
4,970
#4
Фильтр в категории шаблона categore.ejs по умолчанию закрыт, и только если в URL-хеше есть предустановленные значения (например #genre=комедия), тогда фильтр открывается.

HTML:
<!-- Скрываем фильтр по умолчанию -->
<div style="display: none">

    <!-- Слайдер годов -->
    <div>
        <div id="cinemapress-slider"></div>
    </div>

    <!-- Параметры фильтра -->
    <div id="cinemapress-filter">

        <!-- Тип: Фильмы/Сериалы -->
        <div class="custom-select">
            <!-- data-url - URL типа из админ-панели (для подставления в запрос ?type=фильмы) -->
            <!-- data-url_name - URL типа (для подставления в хеш #type=фильмы) -->
            <select data-url="<%- page.urls.type %>" data-url_name="type">
                <option value=""></option>
                <option value="<%- page.urls.types.movie %>" selected="selected"><%- page.l.movies %></option>
                <option value="<%- page.urls.types.serial %>"><%- page.l.series %></option>
            </select>
        </div>

        <!-- Жанры: комедия,драма,ужасы -->
        <div class="custom-select">
            <!-- data-url - URL типа из админ-панели (для подставления в запрос ?genre=комедия) -->
            <!-- data-url_name - URL типа (для подставления в хеш #genre=комедия) -->
            <select data-url="<%- page.urls.genre %>" data-url_name="genre">
                <option value="" selected="selected"><%- page.l.genre %>:</option>
                <% /* Жанры (список в настройках отображения) */ %>
                <% page.urls.genres.forEach(function(genre) { %>
                    <option value="<%- genre.title %>"><%- genre.title %></option>
                <% }); %>
            </select>
        </div>

        <!-- Страны: США,Россия,Япония -->
        <div class="custom-select">
            <!-- data-url - URL типа из админ-панели (для подставления в запрос ?country=США) -->
            <!-- data-url_name - URL типа (для подставления в хеш #country=США) -->
            <select data-url="<%- page.urls.country %>" data-url_name="country">
                <option value="" selected="selected"><%- page.l.country %>:</option>
                <% /* Жанры (список в настройках отображения) */ %>
                <% page.urls.countries.forEach(function(country) { %>
                    <option value="<%- country.title %>"><%- country.title %></option>
                <% }); %>
            </select>
        </div>

        <!-- Сортировка: По числу голосов КП, По рейтингу IMDb -->
        <div class="custom-select">
            <!-- data-url - URL типа из админ-панели (для подставления в запрос ?sorting=По рейтингу IMDb) -->
            <!-- data-url_name - URL типа (для подставления в хеш #sorting=По рейтингу IMDb) -->
            <select data-url="sorting" data-url_name="sorting">
                <option value="" selected="selected"><%- page.l.sorting %>:</option>
                <% if (page.l['kinopoisk-rating-up']) { %>
                    <option value="kinopoisk-rating-up"><%- page.l['kinopoisk-rating-up'] %></option>
                <% } %>
                <% if (page.l['imdb-rating-up']) { %>
                    <option value="imdb-rating-up"><%- page.l['imdb-rating-up'] %></option>
                <% } %>
                <% if (page.l['kinopoisk-vote-up']) { %>
                    <option value="kinopoisk-vote-up"><%- page.l['kinopoisk-vote-up'] %></option>
                <% } %>
                <% if (page.l['imdb-vote-up']) { %>
                    <option value="imdb-vote-up"><%- page.l['imdb-vote-up'] %></option>
                <% } %>
                <% if (page.l['year-up']) { %>
                    <option value="year-up"><%- page.l['year-up'] %></option>
                <% } %>
                <% if (page.l['premiere-up']) { %>
                    <option value="premiere-up"><%- page.l['premiere-up'] %></option>
                <% } %>
            </select>
        </div>

        <!-- Сбросить значения -->
        <button id="reset-filter">
            <span><%- page.l.reset %></span>
        </button>

        <!-- Начать поиск -->
        <button id="submit-filter">
            <span><%- page.l.search %></span>
        </button>

    </div>

</div>

<!-- Кнопка поиска случайного фильма на основе значений фильтра -->
<a href="javascript:void(0)" id="random-filter">
    <span><%- page.l.lucky %></span>
</a>

<!-- Кнопка ручного открытия фильтра -->
<a href="javascript:void(0)" id="show-filter">
    <span><%- page.l.filter %></span>
</a>
 
Думает, что помогает
Регистрация
15 Дек 2017
Сообщения
4,970
#5
Вставлять его лучше всего в самый низ шаблона category.ejs

HTML:
<!-- Скрипт слайдера, должен быть загружен в /themes/ШАБЛОН/public/js/nouislider.min.js -->
<script src="/themes/<%- page.theme %>/public/js/nouislider.min.js"></script>

<script>
    var cinemapress_filter = document.getElementById('cinemapress-filter').innerHTML;
    var cinemapress_slider = document.getElementById('cinemapress-slider');
    var filter_container = document.querySelector('.filter-container');
    var year_min = parseInt('<%- page.urls.years[page.urls.years.length-1].title %>');
    var year_max = parseInt('<%- page.urls.years[0].title %>');
    var page_urls_search = '<%- page.urls.search %>';
    var page_urls_year = '<%- page.urls.year %>';

    function customSlider() {
        cinemapress_slider = document.getElementById('cinemapress-slider');
        var win = window,
            doc = document,
            docElem = doc.documentElement,
            body = doc.getElementsByTagName('body')[0],
            x = win.innerWidth || docElem.clientWidth || body.clientWidth;
        noUiSlider.create(cinemapress_slider, {
            start: [year_min, year_max],
            connect: true,
            step: 1,
            range: {
                'min': [year_min],
                'max': [year_max]
            },
            tooltips: [true, true],
            pips: {
                mode: 'count',
                values: x && x < 400 ? 5 : 11,
                density: 1,
                stepped: true
            },
            format: {
                to: (v) => parseFloat(v).toFixed(0),
                from: (v) => parseFloat(v).toFixed(0)
            }
        });
    }
    function customSelect() {
        var x, i, j, l, ll, selElement, a, b, c;
        x = document.getElementsByClassName("custom-select");
        l = x.length;
        for (i = 0; i < l; i++) {
            selElement = x[i].getElementsByTagName("select")[0];
            ll = selElement.length;
            a = document.createElement("DIV");
            a.setAttribute("class", "select-selected");
            a.innerHTML = selElement.options[selElement.selectedIndex].innerHTML;
            x[i].appendChild(a);
            b = document.createElement("DIV");
            b.setAttribute("class", "select-items select-hide");
            for (j = 1; j < ll; j++) {
                c = document.createElement("DIV");
                c.innerHTML = selElement.options[j].innerHTML;
                c.addEventListener("click", function(e) {
                    var y, i, k, s, h, sl, yl;
                    s = this.parentNode.parentNode.getElementsByTagName("select")[0];
                    sl = s.length;
                    h = this.parentNode.previousSibling;
                    for (i = 0; i < sl; i++) {
                        if (s.options[i].innerHTML === this.innerHTML) {
                            s.selectedIndex = i;
                            h.innerHTML = this.innerHTML;
                            y = this.parentNode.getElementsByClassName("same-as-selected");
                            yl = y.length;
                            for (k = 0; k < yl; k++) {
                                y[k].removeAttribute("class");
                            }
                            this.setAttribute("class", "same-as-selected");
                            break;
                        }
                    }
                    h.click();
                });
                b.appendChild(c);
            }
            x[i].appendChild(b);
            a.addEventListener("click", function(e) {
                e.stopPropagation();
                closeAllSelect(this);
                this.nextSibling.classList.toggle("select-hide");
                this.classList.toggle("select-arrow-active");
            });
        }
    }

    function closeAllSelect(e) {
        var x, y, i, xl, yl, arrNo = [];
        x = document.getElementsByClassName("select-items");
        y = document.getElementsByClassName("select-selected");
        xl = x.length;
        yl = y.length;
        for (i = 0; i < yl; i++) {
            if (e === y[i]) {
                arrNo.push(i)
            } else {
                y[i].classList.remove("select-arrow-active");
            }
        }
        for (i = 0; i < xl; i++) {
            if (arrNo.indexOf(i)) {
                x[i].classList.add("select-hide");
            }
        }
    }

    function submitData() {
        var years = cinemapress_slider.noUiSlider.get();
        var year = years[0] === years[1] ? years[0] : years[0] + '-' + years[1];
        var url = '/' + page_urls_search + '?' + page_urls_year + '=' + year;
        var hash = '#year=' + year;
        document.querySelectorAll('[data-url]').forEach(function(e) {
            var v = encodeURIComponent( e.value || (typeof e.selectedIndex !== 'undefined' && typeof e.options !== 'undefined' && typeof e.options[e.selectedIndex] !== 'undefined' && e.options[e.selectedIndex].value) || '');
            if (v) {
                hash += '|' + e.dataset.url_name + '=' + v;
                url += '&' + e.dataset.url + '=' + v;
            }
        });
        window.location.href = url + hash;
    }

    function resetData() {
        cinemapress_slider.noUiSlider.set([year_min, year_max]);
        document.querySelectorAll('[data-url]').forEach(function(s) {
            s.selectedIndex = null;
        });
        document.getElementById('cinemapress-filter').innerHTML = cinemapress_filter;
        document.getElementById('random-filter').addEventListener('click', randomData);
        document.getElementById('reset-filter').addEventListener('click', resetData);
        document.getElementById('submit-filter').addEventListener('click', submitData);
        customSelect();
    }

    function randomData() {
        var years = cinemapress_slider.noUiSlider.get();
        var year = years[0] === years[1] ? years[0] : years[0] + '-' + years[1];
        var url = '/' + page_urls_search + '?' + page_urls_year + '=' + year;
        document.querySelectorAll('[data-url]').forEach(function(e) {
            var v = encodeURIComponent(e.value || e.options[e.selectedIndex].value);
            if (v) {
                url += '&' + e.dataset.url + '=' + v;
            }
        });
        window.location.href = filter_container.style.display === 'block'
            ? url + '&random=' + Math.random()
            : '<%- page.url %><%- (page.url.indexOf('?') + 1 ? '&' : '?') %>random=<%- Math.random() %>';
    }

    function setHashData() {
        customSlider();
        if(window.location.hash) {
            var hash = decodeURIComponent(window.location.hash.substring(1));
            hash.split('|').forEach(function (key_val) {
                if (key_val.indexOf('=') + 1) {
                    var key = key_val.split('=')[0];
                    var val = key_val.split('=')[1];
                    if (key === 'year') {
                        var year = val.split('-');
                        var year_min_new = parseInt(year[0]);
                        var year_max_new = parseInt(year[1] || year[0]);
                        cinemapress_slider.noUiSlider.set([year_min_new, year_max_new]);
                    }
                    var el_opt = document.querySelectorAll('[data-url]');
                    el_opt.forEach(function(e) {
                        if (key && e.dataset.url_name === key) {
                            for (var i = 0; i < e.options.length; i++) {
                                if (val && e.options[i].value === val) {
                                    e.options[i].selected = true;
                                    e.selectedIndex = i;
                                    break;
                                }
                            }
                        }
                    });
                }
            })
            if (filter_container && hash.indexOf('=') + 1) {
                filter_container.style.display = 'block'; // Если в URL #hash есть знак равенства, открываем фильтр
            }
        }
        customSelect();
    }

    function showData() {
        if (filter_container && filter_container.style.display === 'none') {
            filter_container.style.display = 'block'; // Если фильтр скрыт - открываем
        } else {
            filter_container.style.display = 'none'; // Если фильтр открыт - скрываем
        }
    }

    document.getElementById('random-filter').addEventListener('click', randomData);
    document.getElementById('reset-filter').addEventListener('click', resetData);
    document.getElementById('submit-filter').addEventListener('click', submitData);
    document.getElementById('show-filter').addEventListener('click', showData);
    document.addEventListener('click', closeAllSelect);
    setHashData();
</script>

Стили такие же, как и для фильтра на главной странице.

На этом всё, фильтр должен начать работать.

Далее, рассмотрим как сделать бесконечную прокрутку в категориях, чтобы пользователм не приходилось нажимать на страницы 1,2,3,...
 
Енот
Новичо́к, через «о́»
Регистрация
13 Янв 2018
Сообщения
379
#6
89105fd152830d0dee9b820ca240a8ae.png

что то не хочет вставать данный фильтр, может в шаблоне нужно что то изменить?
 
Енот
Новичо́к, через «о́»
Заблокирован
Регистрация
15 Янв 2020
Сообщения
110
#7
что то не хочет вставать данный фильтр, может в шаблоне нужно что то изменить?
Фильтр стал нормально. Нужно задать стили - открывайте css шаблона snow и делайте по аналогии.
 
Енот
Новичо́к, через «о́»
Регистрация
8 Сен 2018
Сообщения
202
#8
Возможен RATING (kp или imdb) как параметр для фильтра? Был бы очень и очень кстати..
 
Думает, что помогает
Регистрация
15 Дек 2017
Сообщения
4,970
#9
Возможен RATING (kp или imdb) как параметр для фильтра? Был бы очень и очень кстати..
Хорошая идея, завтра будет работать URL фильтр по рейтингу (1-10 или 10-100 рейтинг, не важно):
  • ?kp_rating=70-90
  • ?imdb_rating=6.8-8.5
 
Енот
Новичо́к, через «о́»
Регистрация
8 Сен 2018
Сообщения
202
#10
Может тоже как ui-slider сделать... было бы легко в использовании
 
Новичо́к, через «о́»
Регистрация
11 Мар 2021
Сообщения
128
#11
подскажите пожалуйста как можна сделать фильтр что бы определённая страна или жанр фильма или сериала на добавлялся ко мне на сайт?
 
Енот
Новичо́к, через «о́»
Регистрация
13 Янв 2018
Сообщения
379
#13
подскажите пожалуйста как можна сделать фильтр что бы определённая страна или жанр фильма или сериала на добавлялся ко мне на сайт?
В разделе публикации настрой фильтр если не нужны допустим фильмы или сериалы из сша пропиши !"США" так же и с жанрами
 
Енот
Новичо́к, через «о́»
Регистрация
9 Май 2020
Сообщения
588
#15
В разделе публикации настрой фильтр если не нужны допустим фильмы или сериалы из сша пропиши !"США" так же и с жанрами
а низкорейтинговые фильмы скажем 1 1.5 так жэ фильтровать можно???