[Update] Refactored the whole search. Fixed responsive design and category select feature/simple-search

1 files changed, 35 insertions, 22 deletions

diff --git a/wp-content/themes/carmag/assets/src/scripts/scripts.js b/wp-content/themes/carmag/assets/src/scripts/scripts.js
index f58c82e..93e8823 100755
--- a/wp-content/themes/carmag/assets/src/scripts/scripts.js
+++ b/wp-content/themes/carmag/assets/src/scripts/scripts.js
@@ -46,10 +46,10 @@ faqFields.forEach((field) => {
 let selectedBrand = document.getElementById("brands");
 let modelsNames = Object.keys(carModels);
 modelsNames.forEach((model) => {
-    let option = document.createElement("option");
-    option.value = model;
-    option.innerHTML = model;
-    selectedBrand.appendChild(option);
+	let option = document.createElement("option");
+	option.value = model;
+	option.innerHTML = model;
+	selectedBrand.appendChild(option);
 });
 const handleModels = () => {
 	const brand = event.target.value;
@@ -58,18 +58,18 @@ const handleModels = () => {
 	modelsSelect.innerHTML = "";
 	modelsSelect.append(defaultOption);
 	let models;
-	if(selectedType.value === "car") {
+	if (selectedType.value === "car") {
 		models = carModels;
-	} else if(selectedType.value === "truck") {
+	} else if (selectedType.value === "truck") {
 		models = truckModels;
-	} else if(selectedType.value === "motorcycle") {
+	} else if (selectedType.value === "motorcycle") {
 		models = motorcycleModels;
-	} else if(selectedType.value === "tractor") {
+	} else if (selectedType.value === "tractor") {
 		models = agriculturalBrands;
-	} else if(selectedType.value === "bus") {
+	} else if (selectedType.value === "bus") {
 		models = busModels;
 	}
-	if(brand) {
+	if (brand) {
 		models[brand].forEach((model) => {
 			let option = document.createElement("option");
 			option.value = model;
@@ -82,27 +82,27 @@ const handleModels = () => {
 		option.innerHTML = "Model";
 		modelsSelect.appendChild(option);
 	}
-}
+};
 let selectedType = document.getElementById("category");
 let types = document.querySelectorAll(".type");
-types.forEach(type => {
-    type.addEventListener("click", () => {
+types.forEach((type) => {
+	type.addEventListener("click", () => {
 		event.stopPropagation();
-        types.forEach(type => {
+		types.forEach((type) => {
 			type.classList.remove("selected");
-		})
+		});
 		event.target.classList.add("selected");
 		selectedType.value = event.target.id;
 		let models;
-		if(selectedType.value === "car") {
+		if (selectedType.value === "car") {
 			models = carModels;
-		} else if(selectedType.value === "truck") {
+		} else if (selectedType.value === "truck") {
 			models = truckModels;
-		} else if(selectedType.value === "motorcycle") {
+		} else if (selectedType.value === "motorcycle") {
 			models = motorcycleModels;
-		} else if(selectedType.value === "tractor") {
+		} else if (selectedType.value === "tractor") {
 			models = agriculturalBrands;
-		} else if(selectedType.value === "bus") {
+		} else if (selectedType.value === "bus") {
 			models = busModels;
 		}
 		modelsNames = Object.keys(models);
@@ -115,5 +115,18 @@ types.forEach(type => {
 			option.innerHTML = model;
 			selectedBrand.appendChild(option);
 		});
-    })
-})
+	});
+});
+
+const switcher = document.querySelectorAll(".switcher")[0];
+if (switcher) {
+	switcher.addEventListener("click", () => {
+		event.stopPropagation();
+		const firstPrice = document.querySelectorAll(".price-first")[0];
+		const secondPrice = document.querySelectorAll(".price-second")[0];
+		[firstPrice.value, secondPrice.value] = [
+			secondPrice.value,
+			firstPrice.value,
+		];
+	});
+}