Multipro Compact

<div class="product-filter-wrapper">
	<div class="filter-mobile-btn">
		<svg width="24px" height="24px" xmlns="http://www.w3.org/2000/svg">
			<g fill="none" fill-rule="evenodd">
				<path d="M0 0h24v24H0z" />
				<path
					d="M18 16v2.434h4v2h-4V23h-2v-7h2Zm-4 2.434v2H2.001v-2H14ZM8 9v7H6v-2.566H2v-2h4V9h2Zm14 2.434v2H10.001v-2H22ZM18 2v2.434h4v2h-4V9h-2V2h2Zm-4 2.434v2H2.001v-2H14Z"
					fill="#000"
					fill-rule="nonzero"
				/>
			</g>
		</svg>
		Filters
	</div>
	<div class="product-filter">
		<div class="entry-filter" id="filterby">
			<div class="filter-heading">กรองตาม:</div>
		</div>
		<div class="entry-sort">
			<div class="dropdown">
				<input type="checkbox" class="dropdown__switch" id="sort" hidden />
				<label for="sort" class="dropdown__options-filter">
					<ul class="dropdown__filter" role="listbox" tabindex="-1">
						<li class="dropdown__filter-selected" aria-selected="true">Order: A-Z</li>
						<li>
							<ul class="dropdown__select">
								<li class="dropdown__select-option" role="option">Order: A-Z</li>
								<li class="dropdown__select-option" role="option">Order: Z-A</li>
							</ul>
						</li>
					</ul>
				</label>
			</div>
		</div>
	</div>
</div>

<script>
	document.addEventListener('DOMContentLoaded', function (event) {
		document.querySelectorAll('.entry-filter > .dropdown').forEach((dropdown) => {
			dropdown.querySelector('.dropdown__options-filter').addEventListener('focusout', () => {
				dropdown.querySelector('.dropdown__switch').checked = false;
			});
		});

		// filter function
		let filterby = document.getElementById('filterby');
		let attr_labels = document.querySelectorAll('.item-attr-wrap [data-slug]');
		let attr_values = [];

		const filterResult = document.createElement('div');
		filterResult.classList.add('filter-results');

		let clearAll = document.createElement('div');
		clearAll.classList.add('clear-all-btn');
		clearAll.innerHTML = 'ล้างข้อมูลทั้งหมด';
		clearAll.addEventListener('click', () => {
			let active_options = Array.from(
				filterby.querySelectorAll('.dropdown__select-option.active')
			);
			active_options.forEach((option) => {
				option.click();
			});
			document.querySelectorAll('input.dropdown__switch').forEach((item) => {
				item.checked = false;
			});
		});

		filterResult.prepend(clearAll);

		let productListing = document.querySelector('.product-listing');
		productListing.prepend(filterResult);

		attr_labels.forEach((attr) => {
			let optionProperty = attr.dataset.attr;
			if (attr_values[optionProperty] == undefined) {
				attr_values[optionProperty] = [];
			}

			if (!attr_values[optionProperty].includes(attr.dataset.value)) {
				attr_values[optionProperty].push(attr.dataset.value);
			}
		});

		index = 1;
		Object.entries(attr_values).forEach((entry) => {
			const [key, value] = entry;
			let options = value.map(function (opt) {
				return (
					'<li class="dropdown__select-option" data-key="' +
					key +
					'" data-val="' +
					opt +
					'">' +
					opt +
					'</li>'
				);
			});

			const dropdown = document.createElement('div');
			const dropdown_id = 'data-filter-' + index;
			index++;
			dropdown.className = 'dropdown';
			dropdown.innerHTML =
				`
				<input type="checkbox" class="dropdown__switch" id="` +
				dropdown_id +
				`" hidden />
				<label for="` +
				dropdown_id +
				`" class="dropdown__options-filter">
					<ul class="dropdown__filter" role="listbox" tabindex="-1">
						<li class="dropdown__filter-selected" data-level="` +
				key +
				`">` +
				key +
				`</li>
						<li>
							<ul class="dropdown__select">` +
				options.join('') +
				`</ul>
						</li>
					</ul>
				</label>`;

			filterby.appendChild(dropdown);

			let dropdown_list = Array.from(dropdown.querySelectorAll('.dropdown__select-option'));
			let label = dropdown.querySelector('.dropdown__filter-selected');
			dropdown_list.forEach((option) => {
				option.addEventListener('click', () => {
					option.classList.toggle('active');

					length = dropdown.querySelectorAll('.dropdown__select-option.active').length;
					if (length) {
						label.textContent = key + '(' + length + ')';
						dropdown.classList.add('has-filter');
					} else {
						label.textContent = key;
						dropdown.classList.remove('has-filter');
					}

					filterupdate();
				});
			});
		});

		function filterupdate() {
			let active_filters = Array.from(filterby.querySelectorAll('.dropdown.has-filter'));
			let items = document.querySelectorAll('.product-listing .bricks-layout-item');

			filterResult.querySelectorAll('.filter-item').forEach((item) => {
				item.remove();
			});

			items.forEach((item) => {
				let count = 0;
				active_filters.forEach((filter) => {
					let active_options = Array.from(
						filter.querySelectorAll('.dropdown__select-option.active')
					);
					has_filter = 0;
					active_options.forEach((option) => {
						let dataset = option.dataset;
						let hasData = item.querySelectorAll(
							'div[data-attr="' + dataset.key + '"][data-value="' + dataset.val + '"]'
						).length;
						has_filter = has_filter + hasData;
					});

					if (has_filter) {
						count = count + 1;
					}
					console.log(2);
				});

				if (count == active_filters.length) {
					item.classList.add('show');
					item.classList.remove('hide');
				} else {
					item.classList.add('hide');
					item.classList.remove('show');
				}
				console.log(1);
			});

			// add item to results
			active_filters.forEach((filter) => {
				let active_options = Array.from(
					filter.querySelectorAll('.dropdown__select-option.active')
				);
				active_options.forEach((option) => {
					let dataset = option.dataset;
					let filterItem = document.createElement('div');
					filterItem.classList.add('filter-item');
					filterItem.dataset.attr = dataset.key;
					filterItem.dataset.value = dataset.val;
					filterItem.innerHTML = dataset.val;

					filterItem.addEventListener('click', (e) => {
						// console.log(e.currentTarget.dataset);
						let itemTarget = document.querySelector(
							`.dropdown__select-option[data-key="${e.currentTarget.dataset.attr}"][data-val="${e.currentTarget.dataset.value}"]`
						);
						itemTarget.click();
						itemTarget
							.closest('.dropdown')
							.querySelector('.dropdown__switch').checked = false;
					});

					filterResult.insertBefore(filterItem, filterResult.firstChild);
				});
			});
		}

		// button
		let filterBtn = document.querySelector('.filter-mobile-btn');
		filterBtn.addEventListener('click', function () {
			let filter = document.querySelector('.product-filter');
			filter.classList.toggle('active');
		});
	});
</script>

<div class="product-filter-wrapper">
	<div class="filter-mobile-btn">
		<svg width="24px" height="24px" xmlns="http://www.w3.org/2000/svg">
			<g fill="none" fill-rule="evenodd">
				<path d="M0 0h24v24H0z" />
				<path d="M18 16v2.434h4v2h-4V23h-2v-7h2Zm-4 2.434v2H2.001v-2H14ZM8 9v7H6v-2.566H2v-2h4V9h2Zm14 2.434v2H10.001v-2H22ZM18 2v2.434h4v2h-4V9h-2V2h2Zm-4 2.434v2H2.001v-2H14Z" fill="#000" fill-rule="nonzero" />
			</g>
		</svg>
		Filters
	</div>
	<div class="product-filter">
		<div class="entry-filter" id="filterby">
			<div class="filter-heading">Filter by:</div>
		</div>
		<div class="entry-sort">
			<div class="dropdown">
				<input type="checkbox" class="dropdown__switch" id="sort" hidden />
				<label for="sort" class="dropdown__options-filter">
					<ul class="dropdown__filter" role="listbox" tabindex="-1">
						<li class="dropdown__filter-selected" aria-selected="true">
							Order: A-Z
						</li>
						<li>
							<ul class="dropdown__select">
								<li class="dropdown__select-option" role="option">
									Order: A-Z
								</li>
								<li class="dropdown__select-option" role="option">
									Order: Z-A
								</li>
							</ul>
						</li>
					</ul>
				</label>
			</div>
		</div>
	</div>
</div>

<script>
	document.addEventListener("DOMContentLoaded", function (event) {
		// filter function
		let filterby = document.getElementById("filterby")
		let attr_labels = document.querySelectorAll('.item-attr-wrap [data-slug]');
		let attr_values = [];

		const filterResult = document.createElement("div");
		filterResult.classList.add('filter-results');

		let clearAll = document.createElement("div");
		clearAll.classList.add('clear-all-btn');
		clearAll.innerHTML = 'Clear all';
		clearAll.addEventListener('click', () => {
			let active_options = Array.from(filterby.querySelectorAll('.dropdown__select-option.active'));
			active_options.forEach(option => {
				option.click();
			})
		});

		filterResult.prepend(clearAll);

		let productListing = document.querySelector('.product-listing');
		productListing.prepend(filterResult);

		attr_labels.forEach((attr) => {
			let optionProperty = attr.dataset.attr;
			if (attr_values[optionProperty] == undefined) {
				attr_values[optionProperty] = [];
			}

			if (!attr_values[optionProperty].includes(attr.dataset.value)) {
				attr_values[optionProperty].push(attr.dataset.value);
			}

		});

		index = 1;
		Object.entries(attr_values).forEach(entry => {
			const [key, value] = entry;
			let options = value.map(function (opt) {
				return '<li class="dropdown__select-option" data-key="' + key + '" data-val="' + opt + '">' + opt + '</li>';
			});

			const dropdown = document.createElement('div');
			const dropdown_id = 'data-filter-' + index; index++;
			dropdown.className = 'dropdown';
			dropdown.innerHTML = `
				<input type="checkbox" class="dropdown__switch" id="`+ dropdown_id + `" hidden />
				<label for="`+ dropdown_id + `" class="dropdown__options-filter">
					<ul class="dropdown__filter" role="listbox" tabindex="-1">
						<li class="dropdown__filter-selected" data-lavel="`+ key + `">` + key + `</li>
						<li>
							<ul class="dropdown__select">`+ options.join('') + `</ul>
						</li>
					</ul>
				</label>`;

			filterby.appendChild(dropdown);

			let dropdown_list = Array.from(dropdown.querySelectorAll('.dropdown__select-option'));
			let label = dropdown.querySelector('.dropdown__filter-selected');
			dropdown_list.forEach((option) => {
				option.addEventListener('click', () => {
					option.classList.toggle('active');

					length = dropdown.querySelectorAll('.dropdown__select-option.active').length;
					if (length) {
						label.textContent = key + '(' + length + ')';
						dropdown.classList.add('has-filter');
					}
					else {
						label.textContent = key;
						dropdown.classList.remove('has-filter');
					}

					filterupdate();
				})
			});
		});

		function filterupdate() {

			let active_filters = Array.from(filterby.querySelectorAll('.dropdown.has-filter'));
			let items = document.querySelectorAll('.product-listing .bricks-layout-item');

			filterResult.querySelectorAll('.filter-item').forEach(item => {
				item.remove();
			});

			items.forEach((item) => {
				let count = 0;
				active_filters.forEach((filter) => {
					let active_options = Array.from(filter.querySelectorAll('.dropdown__select-option.active'));
					has_filter = 0;
					active_options.forEach((option) => {
						let dataset = option.dataset;
						let hasData = item.querySelectorAll('div[data-attr="' + dataset.key + '"][data-value="' + dataset.val + '"]').length;
						has_filter = has_filter + hasData;
					});

					if (has_filter) { count = count + 1; }
					console.log(2);
				});

				if (count == active_filters.length) {
					item.classList.add('show');
					item.classList.remove('hide');
				}
				else {
					item.classList.add('hide');
					item.classList.remove('show');
				}
				console.log(1);

			});

			// add item to results
			active_filters.forEach((filter) => {
				let active_options = Array.from(filter.querySelectorAll('.dropdown__select-option.active'));
				active_options.forEach((option) => {
					let dataset = option.dataset;
					let filterItem = document.createElement("div");
					filterItem.classList.add('filter-item');
					filterItem.dataset.attr = dataset.key;
					filterItem.dataset.value = dataset.val;
					filterItem.innerHTML = dataset.val;

					filterItem.addEventListener('click', (e) => {
						console.log(e.currentTarget.dataset);
						let itemTarget = document.querySelector(`.dropdown__select-option[data-key="${e.currentTarget.dataset.attr}"][data-val="${e.currentTarget.dataset.value}"]`);
						itemTarget.click();
					});

					filterResult.insertBefore(filterItem, filterResult.firstChild);
				});
			});
		}

		// button
		let filterBtn = document.querySelector('.filter-mobile-btn');
		filterBtn.addEventListener('click', function () {
			let filter = document.querySelector('.product-filter');
			filter.classList.toggle('active');
		});

	});

</script>