✉ Inquiry 0
/* =========================================================
KANO MARINE – PARTS PAGE SCRIPT
========================================================= */
let zoomLevel = 1;
const zoomStep = 0.2;
/* ZOOM */
function zoomIn(){
zoomLevel += zoomStep;
document.getElementById("diagramImage").style.transform =
"scale(" + zoomLevel + ")";
}
function zoomOut(){
zoomLevel = Math.max(1, zoomLevel - zoomStep);
document.getElementById("diagramImage").style.transform =
"scale(" + zoomLevel + ")";
}
function resetZoom(){
zoomLevel = 1;
document.getElementById("diagramImage").style.transform =
"scale(1)";
}
document.addEventListener("DOMContentLoaded", function(){
const searchInput = document.getElementById("kmSearch");
const toast = document.getElementById("km-toast");
const inquiryCount = document.querySelector(".km-inquiry-count");
/* =========================================
AUTO ENGINE MODEL FROM BREADCRUMB
========================================= */
const breadcrumb =
document.querySelector(".km-breadcrumb")?.innerText || "";
const breadcrumbParts =
breadcrumb.split("›").map(item => item.trim());
const kmEngineModel =
breadcrumbParts[2] || "";
/* =========================================
LOCAL STORAGE
========================================= */
function getInquiryItems(){
return JSON.parse(localStorage.getItem("kmInquiryItems")) || [];
}
function saveInquiryItems(items){
localStorage.setItem(
"kmInquiryItems",
JSON.stringify(items)
);
}
/* =========================================
UPDATE COUNTER
========================================= */
function updateInquiryCount(){
const items = getInquiryItems();
let total = 0;
items.forEach(function(item){
total += Number(item.quantity);
});
if(inquiryCount){
inquiryCount.innerText = total;
}
}
/* =========================================
TOAST
========================================= */
function showToast(){
if(!toast) return;
toast.classList.add("show");
setTimeout(function(){
toast.classList.remove("show");
}, 2200);
}
/* =========================================
SEARCH
========================================= */
if(searchInput){
searchInput.addEventListener("keyup", function(){
const value = this.value.toLowerCase();
document.querySelectorAll(".km-parts tbody tr")
.forEach(function(row){
const partNo =
row.cells[1].innerText.toLowerCase();
const desc =
row.cells[2].innerText.toLowerCase();
if(
partNo.includes(value) ||
desc.includes(value)
){
row.style.display = "";
}else{
row.style.display = "none";
}
});
});
}
/* =========================================
QTY PLUS
========================================= */
document.querySelectorAll(".km-plus")
.forEach(function(btn){
btn.addEventListener("click", function(){
const input =
this.parentElement.querySelector(".km-qty-input");
input.value =
parseInt(input.value || 1) + 1;
});
});
/* =========================================
QTY MINUS
========================================= */
document.querySelectorAll(".km-minus")
.forEach(function(btn){
btn.addEventListener("click", function(){
const input =
this.parentElement.querySelector(".km-qty-input");
let value = parseInt(input.value || 1);
if(value > 1){
input.value = value - 1;
}
});
});
/* =========================================
ADD SIMPLE PRODUCT
========================================= */
document.querySelectorAll(".km-add")
.forEach(function(btn){
btn.addEventListener("click", function(e){
e.preventDefault();
const row = this.closest("tr");
const qtyInput =
row.querySelector(".km-qty-input");
const quantity =
parseInt(qtyInput?.value || 1);
const productId =
this.getAttribute("data-product");
const partNumber =
row.cells[1].innerText.trim();
const description =
row.cells[2].innerText.trim();
let items = getInquiryItems();
const existing =
items.find(item =>
item.product_id === productId
);
if(existing){
existing.quantity += quantity;
}else{
items.push({
product_id : productId,
engine_model: kmEngineModel,
part_number : partNumber,
description : description,
quantity : quantity
});
}
saveInquiryItems(items);
updateInquiryCount();
showToast();
/* BUTTON EFFECT */
const originalText = this.innerText;
this.innerText = "Added ✓";
this.style.background = "#16A34A";
setTimeout(() => {
this.innerText = originalText;
this.style.background = "";
}, 1500);
});
});
/* =========================================
ADD VARIABLE PRODUCT
========================================= */
document.querySelectorAll(".km-add-var")
.forEach(function(btn){
btn.addEventListener("click", function(e){
e.preventDefault();
const row = this.closest("tr");
const select =
row.querySelector(".km-variant");
if(!select.value){
alert("Please select an option");
return;
}
const quantity =
parseInt(
row.querySelector(".km-qty-input")?.value || 1
);
const productId = select.value;
const partNumber =
select.options[
select.selectedIndex
].text;
const description =
row.cells[2].innerText.trim();
let items = getInquiryItems();
const existing =
items.find(item =>
item.product_id === productId
);
if(existing){
existing.quantity += quantity;
}else{
items.push({
product_id : productId,
engine_model: kmEngineModel,
part_number : partNumber,
description : description,
quantity : quantity
});
}
saveInquiryItems(items);
updateInquiryCount();
showToast();
/* BUTTON EFFECT */
const originalText = this.innerText;
this.innerText = "Added ✓";
this.style.background = "#16A34A";
setTimeout(() => {
this.innerText = originalText;
this.style.background = "";
}, 1500);
});
});
/* =========================================
INITIAL COUNTER
========================================= */
updateInquiryCount();
});
