{% extends 'layout.html.twig' %}
{% block title %}{{ seoBag.metaTitle }}{% endblock %}
{% block description %}{{ seoBag.metaDescription }}{% endblock %}
{% block image %}https://perina-peroni.ru/img/favicon.png{% endblock %}
{% block header %}
{% if pager.currentPage > 1 %}
<link rel="canonical" href="https://perina-peroni.ru{{ pager.baseUrl }}">
{% endif %}
{% endblock %}
{% block body %}
<div class="breadcrumbs">
<div class="breadcrumbs">
{% for item in breadCrumbs.items %}
{% if loop.last %}
<span class="breadcrumbs__last-item">{{ item.title }}</span>
{% else %}
<a href="{{ item.url }}">{{ item.title }}</a>
{% endif %}
{% endfor %}
</div>
</div>
<section class="category">
<h1 class="category__header">{{ seoBag.h1 }} <span
id="js-products-num">{{ pager.totalItems|productsPlural }}</span></h1>
{% if productsListContent and productsListContent.tags|length %}
<div class="tags-bag">
{% for tag in productsListContent.tags %}
<a href="{{ tag.tagUrl }}"
class="tags-bag__tag">{{ tag.tagName }}</a>
{% endfor %}
</div>
{% endif %}
{# <div class="tags-bag"> #}
{# <a href="#" class="tags-bag__tag">Для женщин</a> #}
{# <a href="#" class="tags-bag__tag">Для мужчин</a> #}
{# <a href="#" class="tags-bag__tag">Для сауны</a> #}
{# <a href="#" class="tags-bag__tag">Для бани</a> #}
{# <a href="#" class="tags-bag__tag">В подарочной упаковке</a> #}
{# </div> #}
<div class="category__body" id="js-category-body">
{% if filter.filterItems|length or (productsListContent is not null and productsListContent.logoImg) %}
<div class="category__filter">
{% if productsListContent is not null and productsListContent.logoImg %}
<img style="margin-bottom: 20px" src="https://perina-peroni.ru{{ article_web_dir ~ productsListContent.logoImg }}"
alt="{{ seoBag.h1 }}">
{% endif %}
<div class="category__filter-title">
Фильтр
<a href="{{ pager.baseUrl }}"
id="js-filter-reset"
class="filter-reset-lnk">сбросить</a>
</div>
{% include 'catalog/category/category.filter.html.twig' %}
</div>
{% endif %}
<div class="category__products">
<div class="category__products-seo-text" id="js-seo-top-text">
{% if productsListContent is not null and productsListContent.seoTextTop and pager.firstPage %}
{{ productsListContent.seoTextTop|raw }}
{% endif %}
</div>
{% if productsListContent is not null and productsListContent.topBannerImg %}
<div class="category__products-banner">
<a href="{% if productsListContent.topBannerUrl %}{{ productsListContent.topBannerUrl }}{% else %}javascript:;{% endif %}">
<img style="margin: 0 auto;max-width: 100%"
src="{{ banner_web_dir ~ productsListContent.topBannerImg }}" alt="Это интересно">
</a>
</div>
{% endif %}
<div id="js-top-filter-block">
{% include 'catalog/category/filter.top.html.twig' %}
</div>
<div class="category__products-sort">
<span>Сортировать:</span>
{% for sort in productsPresenter.sortItems %}
<a href="javascript:;"
class="js-cat-sort {% if productsPresenter.active(sort) %}active{% endif %}"
data-sort="{{ sort.value }}">{{ sort.title }}</a>
{% endfor %}
</div>
<div class="category__products-inner" id="js-products">
{% include 'catalog/category/category.products.html.twig' %}
</div>
<div class="category__pager" id="js-pager">
{% include 'catalog/pagination/pager.html.twig' %}
</div>
<div class="category__products-seo-text mt-50" id="js-bottom-seo-text">
{% if productsListContent is not null and productsListContent.seoTextBottom and pager.firstPage %}
{{ productsListContent.seoTextBottom|raw }}
{% endif %}
</div>
</div>
</div>
<div style="display: none">
<div itemscope itemtype="http://schema.org/Product">
<meta content="{{ seoBag.h1 }}" itemprop="Name">
<div itemtype="http://schema.org/AggregateOffer" itemscope="" itemprop="offers">
<meta content="{{ pager.totalItems }}" itemprop="offerCount">
<meta content="{{ filter.maxPrice }}" itemprop="highPrice">
<meta content="{{ filter.minPrice }}" itemprop="lowPrice">
<meta content="RUB" itemprop="priceCurrency">
</div>
</div>
</div>
</section>
{% endblock %}
{% block scripts %}
<script>
document.addEventListener("DOMContentLoaded", function (event) {
let body = $('body');
let baseUrl = '{{ pager.baseUrl }}';
window.onpopstate = function () {
$(this).sendFilter();
};
let lastFilter;
body.on('click', '.js-f', function (e) {
if ($(this).hasClass('js-no-active')) {
e.preventDefault();
return false;
}
lastFilter = $(this).attr('data-f');
setTimeout(function () {
$(this).sendFilter();
}, 60);
});
body.on('click', '.js-remove-filter-lnk', function (e) {
e.preventDefault();
let $this = $(this);
let vid = $this.attr('data-vid');
$('#js-filter').find('input[value=' + vid + ']').prop('checked', false);
setTimeout(function () {
$(this).sendFilter();
}, 60);
$this.remove();
return false;
});
let urlParams = new URLSearchParams(window.location.search);
if (urlParams.has("sort")) {
let sortKey = urlParams.get("sort");
$('body').find('a[data-sort="' + sortKey + '"]').addClass('active');
}
body.on('click', '.js-cat-sort', function (e) {
event.preventDefault();
let $this = $(this);
if ($this.hasClass('active')) {
return false;
}
$('.js-cat-sort').removeClass('active');
$this.addClass('active');
let sortKey = $this.attr('data-sort');
$('html, body').animate({
scrollTop: $("html, body").offset().top
}, 500);
let urlParams = new URLSearchParams(window.location.search);
if (urlParams.has("sort")) {
urlParams.set("sort", sortKey);
} else {
urlParams.append('sort', sortKey);
}
if (urlParams.has("page")) {
urlParams.set("page", '1');
}
history.pushState('', '', '?' + urlParams.toString());
document.location.reload();
// $.get(null, null, function (r) {
// if (!r.success) {
// alert('Server error');
// return false;
// }
// $('#js-products').html(r.products);
// $('#js-pager').html(r.pager);
// $('#js-filter').replaceWith(r.filter);
//
// });
return false;
});
body.on('click', '#js-filter-reset', function (e) {
event.preventDefault();
let urlParams = new URLSearchParams(window.location.search);
if (urlParams.has("filter")) {
urlParams.delete("filter");
history.pushState('', '', '?' + urlParams.toString());
document.location.reload();
}
return false;
});
body.on('click', '.js-page', function (e) {
event.preventDefault();
let $this = $(this);
let url = $this.attr('href');
history.pushState('', '', url);
$('html, body').animate({
scrollTop: $("html, body").offset().top
}, 500);
$.get(url, null, function (r) {
if (!r.success) {
alert('Server error');
return false;
}
$('#js-products').html(r.products);
$('#js-pager').html(r.pager);
$('#js-filter').replaceWith(r.filter);
$('#js-bottom-seo-text').html(r.seoTextBottom);
$('#js-seo-top-text').html(r.seoTextTop);
if (typeof $('link[rel=canonical]').attr('href') === 'undefined') {
$('head').append('<link rel="canonical" href="https://perina-peroni.ru' + baseUrl + '">');
}
});
return false;
});
body.on('click', '#js-show-more', function (e) {
event.preventDefault();
let $this = $(this);
let url = $this.data('url');
history.pushState('', '', url);
$.get(url, null, function (r) {
if (!r.success) {
alert('Server error');
return false;
}
$('#js-bottom-seo-text, #js-seo-top-text').remove();
$('#js-products').append(r.products);
$('#js-pager').html(r.pager);
$('#js-filter').replaceWith(r.filter);
if (typeof $('link[rel=canonical]').attr('href') === 'undefined') {
$('head').append('<link rel="canonical" href="https://perina-peroni.ru' + baseUrl + '">');
}
});
return false;
});
body.on('change', '.js-prop-update', function (e) {
event.preventDefault();
let $this = $(this);
let url = $this.data('url');
let val = $this.val();
let name = $this.attr('name');
$.post(url, {'val': val, 'name': name}, function (r) {
if (!r.success) {
alert('Server error');
return false;
}
});
});
$.fn.sendFilter = function () {
let filterData = [];
// let priceFrom = parseInt($('#js-price-slider-from').val());
// let priceTo = parseInt($('#js-price-slider-to').val());
// let minPrice = $('#js-price-slider').data('min');
// let maxPrice = $('#js-price-slider').data('max');
// if (minPrice !== priceFrom || maxPrice !== priceTo) {
// filterData.push('p_' + priceFrom + '-' + priceTo);
// }
$('#js-filter').find('input:checkbox:checked').each(function (i, e) {
let f = $(e).data('f');
let val = $(e).val();
filterData.push(f + '_' + val);
});
let filterString = filterData.join(',');
let urlParams = new URLSearchParams(window.location.search);
let firstPageUrl = $('link[rel=canonical]').attr('href');
if (filterData.length > 0) {
if (urlParams.has("page")) {
urlParams.set("page", 1);
}
if (urlParams.has("filter")) {
urlParams.set("filter", filterString);
} else {
urlParams.append('filter', filterString);
}
} else {
if (urlParams.has("filter")) {
urlParams.delete("filter");
}
}
console.log(urlParams);
if (typeof firstPageUrl !== 'undefined') {
history.pushState('', '', firstPageUrl + '?' + urlParams.toString());
} else {
history.pushState('', '', '?' + urlParams.toString());
}
document.location.reload();
// $.get(null, null, function (r) {
// $('#js-products').html(r.products);
// $('#js-filter').replaceWith(r.filter);
// $('#js-products-num').text(r.productsNum);
// $('#js-pager').html(r.pager);
// $('#js-top-filter-block').html(r.topFilterHtml);
// openLastFilterItem();
// if (typeof firstPageUrl === 'undefined') {
// $('head').append('<link rel="canonical" href="' + baseUrl + '">');
// }
// });
};
function openLastFilterItem() {
if (lastFilter) {
let el = $('body').find('input[data-f="' + lastFilter + '"]').eq(0);
if (el) {
let $this = el.parents('.category__filter-item').find('.js-filter-item');
if (!$this.hasClass('opened')) {
$this.next().slideToggle(0);
setTimeout(function () {
$this.addClass('opened')
}, 150)
}
}
}
}
openLastFilterItem();
});
</script>
<script type="application/ld+json">
{{ breadCrumbs.toSchemaOrgJson|raw }}
</script>
{% endblock %}