admin

Администратор
Команда форума
Регистрация
30.09.2022
Сообщения
468
Реакции
84
uvnnuOa.gif

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

Пример готового фильтра Вы можете увидеть в шаблоне «snow»

Фильтр будет располагаться на главной странице (шаблон 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 классы и формируйте стили под цвета Вашего шаблона.
 

admin

Администратор
Команда форума
Регистрация
30.09.2022
Сообщения
468
Реакции
84
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>


Так же, есть небольшой кусок 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>
 

admin

Администратор
Команда форума
Регистрация
30.09.2022
Сообщения
468
Реакции
84
Фильтр в категории шаблона 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>



Вставлять его лучше всего в самый низ шаблона 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,...
 
Верх