11 |
Cms_Controller->evalWithException('?><!-- view:page_c -->
<?php
//$_SERVER['REQUEST_URI'] = '/c/cyber-week/';
$layout = ShopCategoryLayout::getLayout($category);
$showFilters = true;
$sectorFilter = (strpos($_SERVER['REQUEST_URI'], 'clearance') || strpos($_SERVER['REQUEST_URI'], 'price-crash') ) !== false;
$heatingFilters = strpos($_SERVER['REQUEST_URI'], 'heating-accessories') ? true : false;
if($heatingFilters) {
$showFilters = false;
}
?>
<? if(strpos($_SERVER['REQUEST_URI'], 'marquee-heaters') !== false):?>
<div class="cat-hero">
<div>
<p>Marquee Heaters</p>
<p>Keep Guests Warm All Year Round</p>
</div>
<img src="/themes/nhsv2/resources/images/d_headers/marquee-heaters-for-sale.png" alt="Marquee Heaters" rel="preload" />
</div>
<? elseif(strpos($_SERVER['REQUEST_URI'], 'gas-patio-heaters') !== false):?>
<div class="cat-hero">
<div>
<p>Gas Patio Heaters</p>
<p>Domestic & Commercial Use</p>
</div>
<img src="/themes/nhsv2/resources/images/category/<?php echo strtolower($category->url_name);?>.PNG" alt="Gas Patio Heaters" loading="lazy" />
</div>
<? elseif(strpos($_SERVER['REQUEST_URI'], 'indirect-diesel-heaters') !== false):?>
<div class="cat-hero">
<div>
<p>Indirect Space Heaters</p>
<p>Ideal for Hospitality, Marquees, Bars & More</p>
</div>
<img src="/resources/images/indirect_heater.jpg" alt="Indirect Heaters" loading="lazy" />
</div>
<? elseif(strpos($_SERVER['REQUEST_URI'], 'black-friday') !== false):?>
<div class="cat-hero">
<img src="/img/NHS-black-friday-category.webp" alt="Black Friday" loading="lazy" style="display: block; height: auto;" width="2000" height="300" />
</div>
<? elseif(strpos($_SERVER['REQUEST_URI'], 'cyber-week') !== false):?>
<div class="cat-hero">
<img src="/img/NHS-cyber-week-hero-category.webp" alt="Cyber Week" loading="lazy" style="display: block; height: auto;" width="2000" height="300" />
</div>
<? endif ?>
<? if(strpos($_SERVER['REQUEST_URI'], 'accessories-and-spare-parts') !== false):?>
<img src="/themes/nhsv2/resources/images/air_inlet_kits.png" alt="Slash your energy bills up to 60% with our air inlet kits" width="2000" height="375" style="max-width: 100%; height: auto" />
<?php endif; ?>
<? if ($category):
$subcategories = $category->list_children('front_end_sort_order');
$has_subcategories = $subcategories->count;
$has_products = $category->eval_num_of_products();
?>
<section class="<? if (!$has_subcategories && $has_products): ?>l-theme3<?php endif; ?>">
<div class="container--md">
<div class="cat-heading">
<h1><?= $category->name ?></h1>
<p><?= h($category->short_description) ?></p>
<p class="cat-read-more"><span onclick="scrollToDescription();" style="color: #c62d28; font-weight: bold; cursor: pointer;">Read More</span></p>
<script>
function scrollToDescription()
{
openTab('category-tab-1');
const scrollElement = document.getElementById("category-footer-description");
const scrollPos = scrollElement.getBoundingClientRect().top + window.pageYOffset - 150;
window.scrollTo({top: scrollPos, behavior: 'smooth'});
}
</script>
</div>
</div>
</section>
<? if ($has_subcategories): ?>
<? if(strpos($_SERVER['REQUEST_URI'], '/c/dehumidifiers/') !== false):?>
<?php $this->render_partial('dehum_brands'); ?>
<div class="container">
<div class="c-categories" style="grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); padding-bottom:2em;">
<? foreach ($subcategories as $subcategory): ?>
<div class="c-categories__item">
<a href="<?= $subcategory->page_url('c') ?>/" title="<?= h($subcategory->name) ?>" class="c-categories__item-img" style="max-width: 150px;">
<img src="<?= $subcategory->image_url(0, 320, 'auto') ?>" width="260" height="260" title="<?= h($subcategory->name) ?>" alt="<?= h($subcategory->images->title) ?>" style="max-width: 150px;" />
</a>
<h2>
<a href="<?= $subcategory->page_url('c') ?>/" title="<?= h($subcategory->name) ?>"><?= h($subcategory->name) ?></a>
</h2>
</div>
<? endforeach ?>
</div>
</div>
<? else: ?>
<div class="container">
<div class="c-categories">
<? foreach ($subcategories as $subcategory): ?>
<div class="c-categories__item">
<a href="<?= $subcategory->page_url('c') ?>/" title="<?= h($subcategory->name) ?>" class="c-categories__item-img">
<img src="<?= $subcategory->image_url(0, 320, 'auto') ?>" width="260" height="260" loading="lazy" title="<?= h($subcategory->name) ?>" alt="<?= h($subcategory->images->title) ?>"/>
</a>
<h2>
<a href="<?= $subcategory->page_url('c') ?>/" title="<?= h($subcategory->name) ?>"><?= h($subcategory->name) ?></a>
</h2>
</div>
<? endforeach ?>
</div>
</div>
<? endif ?>
<!-- Popular Products -->
<!-- Popular Products -->
<section id="category-footer-description" class="category-footer-description">
<div class="category-tabs">
<div role="tablist" aria-label="Category Information Tabs" class="category-tabs__buttons">
<button role="tab" type="button" onclick="openTab('category-tab-1')" aria-selected="false" aria-controls="category-tab-1" id="category-tab-1-button" class="btn category-tab-button" tabindex="1">
Description
</button>
</div>
<div class="category-tabs__content">
<h2 class="category-tabs__heading" id="mobile-category-tab-1" onclick="openTab('category-tab-1')">Description</h2>
<div tabindex="1" role="tabpanel" id="category-tab-1" class="category-tab active" aria-labelledby="Description tab">
<div class="container">
<p class="description"><?= ($category->description) ?></p>
</div>
</div>
</div>
</div>
</section>
<?php
/*
<!-- <?php $products = $category->list_products(array('sorting'=>array('price desc'))); ?>
<section class="l-theme3">
<div class="container">
<div class="c-category-product-list list-grid" style="padding-top:2em;">
<?php $this->render_partial('shop:product_list:2:0', array(
'products' => $products,
'class' => 'two mobile-two',
'records_per_page' => 320,
'paginate'=> true,
'pagination_base_url' => $category->page_url('/c'),
'page_index' => $this->request_param(-1, 0)
)); ?>
</div>
</div>
</section> -->
*/
?>
<? endif ?>
<?php endif; ?>
<? if (!$has_subcategories && $has_products): ?>
<?php $products = $category->list_products(array('sorting'=>array('price desc'))); ?>
<section class="l-theme3">
<div class="container">
<div class="c-category-product-cols">
<?php if ($heatingFilters): ?>
<?php $this->render_partial('heating_filters', array(), array(
'cache'=>true,
'cache_vary_by'=>array('url'),
'cache_versions'=>array('catalog'),
'cache_ttl'=>86400
)
); ?>
<?php endif; ?>
<?php if($layout != 'grid' && !$showFilters): ?>
<div class="c-category-product-left">
<?php $this->render_partial('need_help'); ?>
</div>
<?php endif; ?>
<div class="<?php if($layout == 'list' && strpos($_SERVER['REQUEST_URI'], 'clearance') !== false || $layout == 'list' && (strpos($_SERVER['REQUEST_URI'], 'black-friday') !== false || strpos($_SERVER['REQUEST_URI'], 'price-crash') !== false) || $layout == 'list' && strpos($_SERVER['REQUEST_URI'], 'refurbished') !== false): ?>c-category-product-full<?php else: ?>c-category-product-right<?php endif; ?>">
<?php $this->render_partial('category_breadcrumbs'); ?>
<div class="container">
<div class="c-cat-tool-bar">
<?php if (!$sectorFilter && !$heatingFilters): ?>
<div class="sort-button | jsSortBtnWrap">
<label>Sort By:</label>
<div>
<button id="sort-button" class="btn | jsSortBtn">Best Selling</button>
<ul class="jsSortLinks">
<li>
<button onclick="SortDataAttribute('position', 'asc')" data-gtm="SO: <?php echo $category->name; ?>: Best">Best Selling</button>
</li>
<li>
<button onclick="SortDataAttribute('price', 'desc')" data-gtm="SO: <?php echo $category->name; ?>: High">Price High</button>
</li>
<li>
<button onclick="SortDataAttribute('price', 'asc')" data-gtm="SO: <?php echo $category->name; ?>: Low">Price Low</button>
</li>
</ul>
</div>
</div>
<?php endif; ?>
<a href="?layout=grid" class="btn-grid<?php if($layout == 'grid'): ?> active<?php endif; ?>"></a>
<a href="?layout=list" class="btn-list<?php if($layout != 'grid'): ?> active<?php endif; ?>"></a>
</div>
</div>
<?php if(strpos($_SERVER['REQUEST_URI'], 'clearance') !== false || strpos($_SERVER['REQUEST_URI'], 'black-friday') !== false || strpos($_SERVER['REQUEST_URI'], 'price-crash') !== false || strpos($_SERVER['REQUEST_URI'], 'refurbished') !== false):?>
<?php if ($sectorFilter): ?>
<div style="padding-bottom: 30px" class="sector-filters">
<button data-sector="0" class="btn btn-heating all-sectors active | jsSectorFilter">View All</button>
<button data-sector="1" class="btn btn-heating | jsSectorFilter">Heating</button>
<button data-sector="2" class="btn btn-cooling | jsSectorFilter">Cooling</button>
<button data-sector="3" class="btn btn-drying | jsSectorFilter">Drying</button>
<button data-sector="4" class="btn btn-ventilation | jsSectorFilter">Ventilation</button>
</div>
<?php endif; ?>
<div class="c-category-product-list list-<?php echo $layout; ?>">
<?php $this->render_partial('shop:product_list:2:0', array(
'products' => $products,
'class' => 'three mobile-two',
'records_per_page' => 320,
'paginate'=> true,
'pagination_base_url' => $category->page_url('/c'),
'page_index' => $this->request_param(-1, 0),
'layout' => $layout
), array(
'cache'=>true,
'cache_vary_by'=>array('url'),
'cache_versions'=>array('catalog'),
'cache_ttl'=>86400
)
); ?>
</div>
<?php if (!$sectorFilter && !$heatingFilters): ?>
<div class="load-more-wrap" style="padding-left: 0">
<button data-gtm="Load More: <?php echo $category->name; ?>" onclick="loadMoreProducts();" id="product-load-more-button" class="btn">Load More</button>
</div>
<?php endif; ?>
<?php else: ?>
<div class="c-category-product-list list-<?php echo $layout; ?>">
<?php if($showFilters): ?>
<div id="filters" class="bootstrap-ns-4-6-1">
<?php $this->render_partial('shop:custom_filters', [
'products' => $products,
'category' => $category,
'productsPartial' => 'shop:product_list:2:0',
'productsPartialArgs' => [
'class' => 'two mobile-two',
'records_per_page' => 320,
'paginate'=> true,
'pagination_base_url' => $category->page_url('/c'),
'page_index' => $this->request_param(-1, 0)
],
'swappable' => [
'kW Output' => 'BTU Output'
]
],
array(
'cache'=>true,
'cache_vary_by'=>array('url'),
'cache_versions'=>array('catalog'),
'cache_ttl'=>86400
)) ?>
</div>
<?php endif ?>
<?php $partial = ($layout == 'list') ? 'shop:product_list:2:0' : 'shop:product_grid:2:0'; ?>
<?php $this->render_partial($partial, array(
'products' => $products,
'class' => 'two mobile-two',
'records_per_page' => 320,
'paginate'=> true,
'pagination_base_url' => $category->page_url('/c'),
'page_index' => $this->request_param(-1, 0),
'layout' => $layout
), array(
'cache'=>true,
'cache_vary_by'=>array('url'),
'cache_versions'=>array('catalog'),
'cache_ttl'=>86400
)
); ?>
</div>
<?php if (!$sectorFilter && !$heatingFilters): ?>
<div class="load-more-wrap">
<button data-gtm="Load More: <?php echo $category->name; ?>" onclick="loadMoreProducts();" id="product-load-more-button" class="btn">Load More</button>
</div>
<?php endif; ?>
<?php endif; ?>
<?php if (!$sectorFilter && !$heatingFilters): ?>
<script>
let catView = 'desktop';
if (window.innerWidth < 689) {
catView = 'mobile';
}
let numVisibleProducts = 0;
let numProductsToLoad = 21;
function resetLoadMoreProducts()
{
productListItems = document.getElementsByClassName('c-product-list__item');
for(let i = 0; i < productListItems.length; i++) {
productListItems[i].style.display = 'block';
productListItems[i].classList.remove('hidden');
productListItems[i].classList.remove('faded');
}
for(let i = numProductsToLoad; i < productListItems.length; i++) {
productListItems[i].style.display = 'none';
productListItems[i].classList.add('hidden');
}
numVisibleProducts = productListItems.length >= numProductsToLoad ? numProductsToLoad : productListItems.length;
document.getElementById('product-load-more-button').style.display = 'block';
if (productListItems.length <= numProductsToLoad) {
document.getElementById('product-load-more-button').style.display = 'none';
}
}
function loadMoreProducts()
{
numProductsToLoad = numProductsToLoad + numVisibleProducts;
let numProductsAdded = 0;
for(let i = numVisibleProducts; i < numProductsToLoad; i++) {
if (productListItems[i]) {
productListItems[i].style.display = 'block';
productListItems[i].classList.remove('hidden');
numProductsAdded++;
}
}
document.getElementById('product-load-more-button').blur();
if (productListItems.length <= (numVisibleProducts + numProductsAdded)) {
document.getElementById('product-load-more-button').style.display = 'none';
}
fadeLoadedProducts();
}
function fadeLoadedProducts()
{
let visibleProducts = document.querySelectorAll('.c-product-list__item:not(.hidden)');
for(let i = 1; i < visibleProducts.length; i++) {
visibleProducts[i].classList.remove('faded');
if (visibleProducts.length - 1 <= i && visibleProducts.length < productListItems.length) {
visibleProducts[i].classList.add('faded');
}
}
}
let jsSortBtnWrap = document.getElementsByClassName('jsSortBtnWrap');
if (jsSortBtnWrap.length > 0) {
let jsSortBtn = document.getElementsByClassName('jsSortBtn');
let sortLinks = jsSortBtnWrap[0].getElementsByClassName('jsSortLinks');
jsSortBtnWrap[0].onclick = function () {
if (sortLinks[0].style.display == 'block') {
sortLinks[0].style.display = 'none';
} else {
sortLinks[0].style.display = 'block';
}
}
window.addEventListener('click', function (event) {
if (event.target != jsSortBtn[0]) {
sortLinks[0].style.display = 'none';
}
});
}
function sortBy(attr) {
return function(a, b) {
if (parseInt(a.dataset[attr]) < parseInt(b.dataset[attr]))
return -1;
if (parseInt(a.dataset[attr]) > parseInt(b.dataset[attr]))
return 1;
return 0;
}
}
// Function to sort Data
function SortDataAttribute(attr, direction) {
sessionStorage.setItem('sortAttr', attr);
sessionStorage.setItem('sortDirection', direction);
let sortButton = document.getElementById('sort-button');
if (attr == 'price' && direction == 'desc') {
sortButton.innerHTML = 'Price High';
} else if (attr == 'price' && direction == 'asc') {
sortButton.innerHTML = 'Price Low';
} else {
sortButton.innerHTML = 'Best Selling';
}
let rows =
document.querySelectorAll("[data-" + attr + "]");
let rowsArray = Array.from(rows);
let sorted = rowsArray.sort(sortBy(attr));
if (direction == 'desc') {
sorted.reverse();
}
sorted.forEach(e =>
document.querySelector(".c-product-list").
appendChild(e));
let productItemsParent = document.getElementById('shop-product-list');
let dramaBoxNthPos = 6;
let dramaBoxPos = dramaBoxNthPos;
let dramaBoxes = document.getElementsByClassName('drama-box');
let dramaBoxCopies = [];
if (dramaBoxes.length > 0) {
for(let i = 0, len = dramaBoxes.length; i < len; i++) {
dramaBoxCopies.push(dramaBoxes[0]);
dramaBoxes[0].remove();
}
let productItems = document.getElementsByClassName('c-product-list__item');
for(let i = 0, len = dramaBoxCopies.length; i < len; i++) {
productItemsParent.insertBefore(dramaBoxCopies[i], productItems[dramaBoxPos]);
dramaBoxPos += dramaBoxNthPos + 1;
}
}
resetLoadMoreProducts();
fadeLoadedProducts();
}
if (sessionStorage.getItem('sortAttr')) {
SortDataAttribute(sessionStorage.getItem('sortAttr'), sessionStorage.getItem('sortDirection'));
}
resetLoadMoreProducts();
fadeLoadedProducts();
</script>
<?php endif; ?>
</div>
</div>
</div>
</section>
<?php else: ?>
<? if(strpos($_SERVER['REQUEST_URI'], 'c/brands') === false):?>
<?php $this->render_partial('need_help'); ?>
<?php endif; ?>
<?php endif; ?>
<div class="container">
<? if ($category):
$subcategories = $category->list_children('front_end_sort_order');
$has_subcategories = $subcategories->count;
$has_products = $category->eval_num_of_products();
?>
<? if (!$has_subcategories && !$has_products): ?>
<p>This category does not contain any products or subcategories.</p>
<p><a href="<?= root_url('/')?>" title="Return to the home page">Return to the home page</a></p>
<? endif ?>
<? endif ?>
</div>
<? if (!$has_subcategories && $has_products): ?>
<section id="category-footer-description" class="category-footer-description">
<div class="category-tabs">
<div role="tablist" aria-label="Category Information Tabs" class="category-tabs__buttons">
<button role="tab" type="button" onclick="openTab('category-tab-1')" aria-selected="false" aria-controls="category-tab-1" id="category-tab-1-button" class="btn category-tab-button" tabindex="1">
Description
</button>
</div>
<div class="category-tabs__content">
<h2 class="category-tabs__heading" id="mobile-category-tab-1" onclick="openTab('category-tab-1')">Description</h2>
<div tabindex="1" role="tabpanel" id="category-tab-1" class="category-tab active" aria-labelledby="Description tab">
<div class="container">
<p class="description"><?= ($category->description) ?></p>
</div>
</div>
</div>
</div>
</section>
<?php if($layout == 'grid' || $showFilters): ?>
<?php $this->render_partial('need_help'); ?>
<?php endif; ?>
<? endif ?>
<?php if ($heatingFilters): ?>
<style>
#model-filters { display: block}
.heater-filters {
background-color: #fff;
padding: 20px;
margin-bottom: 20px;
width: 100%;
}
.heater-filters > div {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
}
.heater-filters h2 {
margin-top: 0;
padding-top: 0;
}
.heater-filters h4 {
font-size: 1.5rem;
font-weight: 500;
margin-top: 10px;
margin-bottom: 10px;
}
.heater-filters .btn:focus,
.heater-filters .btn {
min-width: auto;
width: auto;
margin: 0 5px 5px 0;
font-weight: bold;
cursor: pointer;
border-width: 1px;
border-color: #fff !important;
font-size: 15px;
}
.heater-filters .btn:hover {
background-color: #000 !important;
}
.heater-filters .btn.active {
border-color: #000 !important;
background-color: #000 !important;
}
.btn-logo {
padding: 2px;
background-color: #fff !important;
}
.heater-filters .btn-logo:focus,
.heater-filters .btn-logo:hover,
.heater-filters .btn-logo.active {
background-color: #fff !important;
}
.btn-logo img {
display: block;
}
#model-filters .btn {
min-width: auto;
width: auto;
margin: 0 5px 5px 0;
font-weight: bold;
cursor: pointer;
border-width: 1px;
border-color: #fff !important;
font-size: 15px;
}
</style>
<script>
class BrandModelFilter {
constructor() {
this.brandFilters = document.getElementsByClassName('jsFilterBrand');
for (let i = 0; i < this.brandFilters.length; i++) {
this.brandFilters[i].addEventListener('click', this.toggleBrandFilter.bind(this), false);
}
this.toggleBrandFilterButtons();
}
toggleBrandFilterButtons() {
let brandFilterButtons = document.getElementsByClassName('jsFilterBrand');
for (let i = 0; i < brandFilterButtons.length; i++) {
let brand = brandFilterButtons[i].dataset.brand;
let brandListItems = document.querySelectorAll("[data-manufacturer='" + brand + "']");
if (brandListItems.length > 0) {
brandFilterButtons[i].style.display = 'inline-block';
}
}
}
toggleBrandFilter(filter) {
let catView = 'desktop';
if (window.innerWidth < 689) {
catView = 'mobile';
}
let isActive = false;
if (filter.currentTarget.classList.contains('active')) {
isActive = true;
}
let brand = filter.currentTarget.dataset.brand;
let brandFilterButtons = document.getElementsByClassName('jsFilterBrand');
for (let i = 0; i < brandFilterButtons.length; i++) {
brandFilterButtons[i].classList.remove('active');
}
if (!isActive) {
filter.currentTarget.classList.add('active');
this.hideShowProducts(brand, false);
} else {
this.hideShowProducts(false, false);
}
let modelFilterButtons = document.getElementsByClassName('jsModelFilter');
console.log(modelFilterButtons.length);
if (modelFilterButtons.length > 0) {
const scrollPos = document.getElementById('model-filters').getBoundingClientRect().top + window.pageYOffset - 75;
window.scrollTo({top: scrollPos, behavior: 'smooth'});
} else {
const scrollPos = document.getElementById('shop-product-list').getBoundingClientRect().top + window.pageYOffset - 75;
window.scrollTo({top: scrollPos, behavior: 'smooth'});
}
}
toggleModelFilter(filter) {
let model = filter.target.dataset.model;
let brand = filter.target.dataset.brand;
let isActive = false;
if (filter.currentTarget.classList.contains('active')) {
isActive = true;
}
let modelFilters = document.getElementsByClassName('jsModelFilter');
for (let i = 0; i < modelFilters.length; i++) {
modelFilters[i].classList.remove('active');
}
if (!isActive) {
filter.target.classList.add('active');
this.hideShowProducts(brand, model);
} else {
this.hideShowProducts(brand);
}
const scrollPos = document.getElementById('shop-product-list').getBoundingClientRect().top + window.pageYOffset - 75;
window.scrollTo({top: scrollPos, behavior: 'smooth'});
}
hideShowProducts(brand, model) {
let catView = 'desktop';
if (window.innerWidth < 689) {
catView = 'mobile';
}
let modelFilters = document.getElementById("model-filters");
let listItems = document.getElementsByClassName('c-product-list__item');
let models = {};
for (let i = 0; i < listItems.length; i++) {
listItems[i].style.display = 'none';
if (listItems[i].dataset.manufacturer) {
if (!brand || listItems[i].dataset.manufacturer == brand) {
if (model) {
if (listItems[i].dataset.model == model) {
listItems[i].style.display = 'block';
}
} else {
if (listItems[i].dataset.model && brand) {
models[listItems[i].dataset.model] = listItems[i].dataset.model;
}
listItems[i].style.display = 'block';
}
}
}
}
if (!model) {
modelFilters.style.display = 'none';
modelFilters.innerHTML = '<h4>Select your model:</h4>';
for (let key of Object.keys(models)) {
let modelFilterButton = document.createElement("button");
let modelFilterButtonText = document.createTextNode(key);
modelFilterButton.dataset.model = key;
modelFilterButton.dataset.brand = brand;
modelFilterButton.classList.add('btn');
modelFilterButton.classList.add('jsModelFilter');
modelFilterButton.addEventListener('click', this.toggleModelFilter.bind(this), false);
modelFilterButton.appendChild(modelFilterButtonText);
modelFilters.appendChild(modelFilterButton);
}
if (Object.keys(models).length > 0) {
modelFilters.style.display = 'block';
}
}
//if (catView == 'mobile') {
// const scrollPos = modelFilters.getBoundingClientRect().top + window.pageYOffset - 75;
// window.scrollTo({top: scrollPos, behavior: 'smooth'});
//}
}
}
new BrandModelFilter();
</script>
<?php endif; ?>
<?php if ($sectorFilter): ?>
<script>
class SectorFilter {
constructor() {
this.sectorFilters = document.getElementsByClassName('jsSectorFilter');
for (let i = 0; i < this.sectorFilters.length; i++) {
this.sectorFilters[i].addEventListener('click', this.toggleSectorFilter.bind(this), false);
}
this.showFilterButtons();
}
showFilterButtons() {
let sectors = [1, 2, 3, 4];
for (let i = 0; i < sectors.length; i++) {
let sector = document.getElementsByClassName('x-sector-' + sectors[i]);
if (sector.length > 0) {
let sectorButton = document.querySelectorAll("[data-sector='" + sectors[i] + "']")[0];
sectorButton.style.display = "inline-block";
}
}
}
toggleSectorFilter(filter) {
let isActive = filter.target.classList.contains('active');
let viewAllButton = document.querySelectorAll("[data-sector='0']")[0];
for (let i = 0; i < this.sectorFilters.length; i++) {
this.sectorFilters[i].classList.remove('active');
}
if (isActive && filter.target.dataset.sector > 0) {
filter.target.classList.remove('active');
viewAllButton.classList.add('active');
} else {
filter.target.classList.add('active');
}
this.filterSectors();
}
filterSectors() {
let catView = 'desktop';
if (window.innerWidth < 689) {
catView = 'mobile';
}
let activeSectorFilters = document.getElementsByClassName("jsSectorFilter active");
let listItems = document.getElementsByClassName('c-product-list__item');
if (activeSectorFilters.length <= 0 || activeSectorFilters[0].dataset.sector == 0) {
for (let i = 0; i < listItems.length; i++) {
listItems[i].style.display = 'block';
}
} else {
for (let i = 0; i < listItems.length; i++) {
listItems[i].style.display = 'none';
}
for (let i = 0; i < activeSectorFilters.length; i++) {
let sectorID = activeSectorFilters[i].dataset.sector;
let sectors = document.getElementsByClassName('x-sector-' + sectorID);
for (let i = 0; i < sectors.length; i++) {
sectors[i].style.display = 'block';
}
}
}
}
}
new SectorFilter();
</script>
<?php endif; ?>
<script>
function openTab(tabName) {
mobileTabs = (window.innerWidth < 800) ? true : false;
var i; var x = document.getElementsByClassName("category-tab");
for (i = 0; i < x.length; i++) {
if (!mobileTabs) {
x[i].classList.remove('active');
}
}
var tabContent = document.getElementById(tabName);
if (!mobileTabs) {
tabContent.classList.add('active');
var tabButtons = document.getElementsByClassName('category-tab-button')
for (i = 0; i < tabButtons.length; i++) {
tabButtons[i].classList.remove('active');
}
var button = document.getElementById(tabName + '-button');
button.classList.add('active');
} else {
var button = document.getElementById('mobile-' + tabName);
button.classList.toggle("active");
tabContent.classList.toggle("mobile-active");
}
}
</script>', 'CMS page', 'Category') |
/modules/cms/classes/cms_controller.php |
608 |