{"id":50,"date":"2026-06-03T06:46:02","date_gmt":"2026-06-03T06:46:02","guid":{"rendered":"https:\/\/industradesphere.com\/?page_id=50"},"modified":"2026-06-24T09:53:56","modified_gmt":"2026-06-24T09:53:56","slug":"product","status":"publish","type":"page","link":"https:\/\/industradesphere.com\/?page_id=50","title":{"rendered":"Product"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"50\" class=\"elementor elementor-50\">\n\t\t\t\t<div class=\"elementor-element elementor-element-7b66965 e-con e-atomic-element e-flexbox-base e-3a33d49 \" data-id=\"7b66965\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"7b66965\">\n    \t\t<div class=\"elementor-element elementor-element-6f2688a elementor-widget-tablet__width-initial elementor-widget elementor-widget-html\" data-id=\"6f2688a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\r\n\r\n:root{\r\n--blue:#1e88e5;\r\n--blue-dark:#1565c0;\r\n--light:#f4f8ff;\r\n--border:#d8e6f7;\r\n--white:#ffffff;\r\n}\r\n\r\n*{\r\nmargin:0;\r\npadding:0;\r\nbox-sizing:border-box;\r\n}\r\n\r\nbody{\r\nfont-family:Arial,sans-serif;\r\nbackground:var(--light);\r\n}\r\n\r\n\/* TOPBAR *\/\r\n\r\n.topbar{\r\nbackground:#fff;\r\npadding:15px 20px;\r\nborder-bottom:2px solid var(--border);\r\n}\r\n\r\n.topbar h2{\r\ncolor:#3273a8;\r\n}\r\n\r\n\/* LAYOUT *\/\r\n\r\n.container{\r\ndisplay:flex;\r\nmin-height:calc(100vh - 70px);\r\n}\r\n\r\n\/* SIDEBAR *\/\r\n\r\n.sidebar{\r\nwidth:270px;\r\nbackground:#fff;\r\nborder-right:2px solid var(--border);\r\npadding:15px;\r\n}\r\n\r\n.sidebar h3{\r\ncolor:#3273a8;\r\nmargin-bottom:15px;\r\n}\r\n\r\n.brand{\r\nbackground:#f3f8ff;\r\npadding:12px;\r\nmargin-bottom:10px;\r\nborder-radius:10px;\r\ncursor:pointer;\r\nfont-weight:600;\r\ntransition:.3s;\r\nborder:1px solid #e3eefb;\r\n}\r\n\r\n.brand:hover{\r\nbackground:var(--blue);\r\ncolor:#fff;\r\n}\r\n\r\n.allBrand{\r\nbackground:var(--blue);\r\ncolor:#fff;\r\n}\r\n\r\n\/* MAIN *\/\r\n\r\n.main{\r\nflex:1;\r\npadding:20px;\r\n}\r\n\r\n\/* SEARCH *\/\r\n\r\n.searchWrap{\r\nposition:relative;\r\nmargin-bottom:15px;\r\n}\r\n\r\n.searchBox{\r\nwidth:100%;\r\npadding:14px;\r\nborder:1px solid #d7e3f3;\r\nborder-radius:10px;\r\noutline:none;\r\nfont-size:15px;\r\n}\r\n\r\n.searchBox:focus{\r\nborder-color:var(--blue);\r\n}\r\n\r\n\/* SUGGESTIONS *\/\r\n\r\n.suggestions{\r\nposition:absolute;\r\ntop:100%;\r\nleft:0;\r\nwidth:100%;\r\nbackground:#fff;\r\nborder:1px solid #ddd;\r\nborder-radius:10px;\r\nz-index:999;\r\nmax-height:250px;\r\noverflow-y:auto;\r\ndisplay:none;\r\nbox-shadow:0 5px 20px rgba(0,0,0,.1);\r\n}\r\n\r\n.suggestions div{\r\npadding:10px;\r\ncursor:pointer;\r\nborder-bottom:1px solid #eee;\r\n}\r\n\r\n.suggestions div:hover{\r\nbackground:#f0f7ff;\r\n}\r\n\r\n\/* CATEGORY GRID *\/\r\n\r\n.catGrid{\r\ndisplay:grid;\r\ngrid-template-columns:repeat(auto-fill,minmax(250px,1fr));\r\ngap:20px;\r\n}\r\n\r\n.catCard{\r\nbackground:#fff;\r\npadding:20px;\r\nborder-radius:15px;\r\nborder:1px solid #e5eef9;\r\ntext-align:center;\r\ncursor:pointer;\r\ntransition:.3s;\r\nbox-shadow:0 3px 10px rgba(0,0,0,.05);\r\n}\r\n\r\n.catCard:hover{\r\ntransform:translateY(-5px);\r\nborder-color:var(--blue);\r\n}\r\n\r\n.catCard h3{\r\ncolor:#3273a8;\r\nmargin-bottom:8px;\r\n}\r\n\r\n.catCard p{\r\ncolor:#777;\r\n}\r\n\r\n\/* PRODUCT SECTION *\/\r\n\r\n#partsSection{\r\ndisplay:none;\r\n}\r\n\r\n.backBtn{\r\nbackground:var(--blue);\r\ncolor:#fff;\r\nborder:none;\r\npadding:10px 18px;\r\nborder-radius:8px;\r\ncursor:pointer;\r\nmargin-bottom:15px;\r\n}\r\n\r\n.backBtn:hover{\r\nbackground:var(--blue-dark);\r\n}\r\n\r\n#partTitle{\r\ncolor:#3273a8;\r\nmargin-bottom:15px;\r\n}\r\n\r\n\/* PRODUCT COUNT *\/\r\n\r\n#productCount{\r\nmargin-bottom:15px;\r\nfont-weight:bold;\r\ncolor:#3273a8;\r\n}\r\n\r\n\/* TABLE *\/\r\n\r\n.tableWrap{\r\nwidth:100%;\r\noverflow-x:auto;\r\n}\r\n\r\ntable{\r\nwidth:100%;\r\nmin-width:1100px;\r\nborder-collapse:collapse;\r\nbackground:#fff;\r\nborder-radius:12px;\r\noverflow:hidden;\r\nbox-shadow:0 4px 15px rgba(0,0,0,.08);\r\n}\r\n\r\nthead th{\r\nbackground:#3273a8;\r\ncolor:#fff;\r\npadding:14px;\r\ntext-align:left;\r\nfont-size:14px;\r\n}\r\n\r\ntbody td{\r\npadding:12px;\r\nborder-bottom:1px solid #e8eef8;\r\n}\r\n\r\ntbody tr:nth-child(odd){\r\nbackground:#fff;\r\n}\r\n\r\ntbody tr:nth-child(even){\r\nbackground:#dfeffc;\r\n}\r\n\r\ntbody tr:hover{\r\nbackground:inherit !important;\r\ntransform:none !important;\r\n}\r\n\r\ntable{\r\ntable-layout:fixed;\r\n}\r\n\r\ntbody tr{\r\nheight:85px;\r\n}\r\n\r\ntbody td{\r\nvertical-align:middle;\r\noverflow:hidden;\r\nword-break:break-word;\r\n}\r\n\r\n\r\n\/* PRODUCT IMAGE *\/\r\n\r\n.productImg{\r\nwidth:60px !important;\r\nheight:60px !important;\r\nmin-width:60px !important;\r\nmax-width:60px !important;\r\nmin-height:60px !important;\r\nmax-height:60px !important;\r\nobject-fit:cover;\r\nborder-radius:8px;\r\ncursor:pointer;\r\nborder:1px solid #ddd;\r\ndisplay:block;\r\n}\r\n\r\n\/* BUTTONS *\/\r\n\r\n.actionBtns{\r\ndisplay:flex;\r\ngap:8px;\r\nflex-wrap:wrap;\r\n}\r\n\r\n.moreBtn{\r\nbackground:#3273a8;\r\ncolor:#fff;\r\ntext-decoration:none;\r\npadding:8px 12px;\r\nborder-radius:6px;\r\nfont-size:13px;\r\n}\r\n\r\n.waBtn{\r\nbackground:#25D366;\r\ncolor:#fff;\r\ntext-decoration:none;\r\npadding:8px 12px;\r\nborder-radius:6px;\r\nfont-size:13px;\r\n}\r\n\r\n\/* IMAGE POPUP *\/\r\n\r\n.imagePopup{\r\ndisplay:none;\r\nposition:fixed;\r\ninset:0;\r\nbackground:rgba(0,0,0,.9);\r\nz-index:99999;\r\njustify-content:center;\r\nalign-items:center;\r\n}\r\n\r\n.popupContent{\r\nposition:relative;\r\n}\r\n\r\n.popupContent img{\r\nmax-width:90vw;\r\nmax-height:90vh;\r\nborder-radius:12px;\r\n}\r\n\r\n.closePopup{\r\nposition:absolute;\r\ntop:-40px;\r\nright:0;\r\ncolor:#fff;\r\nfont-size:40px;\r\ncursor:pointer;\r\n}\r\n\r\n\/* DETAIL POPUP *\/\r\n\r\n.detailPopup{\r\ndisplay:none;\r\nposition:fixed;\r\ninset:0;\r\nbackground:rgba(0,0,0,.8);\r\nz-index:99999;\r\njustify-content:center;\r\nalign-items:center;\r\n}\r\n\r\n.detailBox{\r\nbackground:#fff;\r\nwidth:90%;\r\nmax-width:700px;\r\nborder-radius:15px;\r\npadding:25px;\r\nposition:relative;\r\nmax-height:85vh;\r\noverflow:auto;\r\n}\r\n\r\n.closeDetail{\r\nposition:absolute;\r\nright:15px;\r\ntop:10px;\r\nfont-size:35px;\r\ncursor:pointer;\r\ncolor:#333;\r\n}\r\n\r\n\/* MOBILE *\/\r\n\r\n@media(max-width:768px){\r\n\r\n\r\n.container{\r\n    flex-direction:column;\r\n}\r\n\r\n.sidebar{\r\n    width:100%;\r\n    border-right:none;\r\n    border-bottom:2px solid var(--border);\r\n    display:flex;\r\n    overflow-x:auto;\r\n    gap:10px;\r\n}\r\n\r\n.sidebar h3{\r\n    display:none;\r\n}\r\n\r\n.brand{\r\n    white-space:nowrap;\r\n    min-width:max-content;\r\n    margin:0;\r\n}\r\n\r\n.catGrid{\r\n    grid-template-columns:repeat(2,1fr);\r\n}\r\n\r\n\r\n}\r\n\r\n@media(max-width:480px){\r\n\r\n\r\n.catGrid{\r\n    grid-template-columns:1fr;\r\n}\r\n\r\n.topbar h2{\r\n    font-size:18px;\r\n}\r\n\r\n.searchBox{\r\n    font-size:14px;\r\n}\r\n\r\n\r\n}\r\n\r\n    \r\n    \r\n<\/style>\r\n\r\n<div class=\"topbar\">\r\n    <h2>PRODUCTS DETAILS<\/h2>\r\n<\/div>\r\n\r\n<div class=\"container\">\r\n\r\n\r\n<!-- SIDEBAR -->\r\n\r\n<aside class=\"sidebar\">\r\n\r\n    <h3>Brands<\/h3>\r\n\r\n    <div class=\"brand allBrand\"\r\n         onclick=\"showAllCategories()\">\r\n\r\n        ALL CATEGORIES\r\n\r\n    <\/div>\r\n\r\n    <div id=\"brandList\">\r\n\r\n        <div class=\"brand\">\r\n            Loading Brands...\r\n        <\/div>\r\n\r\n    <\/div>\r\n\r\n<\/aside>\r\n\r\n<!-- MAIN -->\r\n\r\n<main class=\"main\">\r\n\r\n    <!-- CATEGORY SEARCH -->\r\n\r\n    <div class=\"searchWrap\">\r\n\r\n        <input\r\n            type=\"text\"\r\n            id=\"categorySearch\"\r\n            class=\"searchBox\"\r\n            placeholder=\"Search Brand or Category...\"\r\n            onkeyup=\"filterCategories()\">\r\n\r\n        <div id=\"categorySuggestions\"\r\n             class=\"suggestions\">\r\n        <\/div>\r\n\r\n    <\/div>\r\n\r\n    <!-- CATEGORY GRID -->\r\n\r\n    <div id=\"catGrid\"\r\n         class=\"catGrid\">\r\n\r\n        <div class=\"catCard\">\r\n\r\n            <h3>Loading...<\/h3>\r\n\r\n            <p>\r\n                Please Wait\r\n            <\/p>\r\n\r\n        <\/div>\r\n\r\n    <\/div>\r\n\r\n    <!-- PRODUCT SECTION -->\r\n\r\n    <section id=\"partsSection\">\r\n\r\n        <button\r\n            class=\"backBtn\"\r\n            onclick=\"backToCategories()\">\r\n\r\n            \u2190 Back To Categories\r\n\r\n        <\/button>\r\n\r\n        <h2 id=\"partTitle\"><\/h2>\r\n\r\n        <!-- PRODUCT SEARCH -->\r\n\r\n        <div class=\"searchWrap\">\r\n\r\n            <input\r\n                type=\"text\"\r\n                id=\"searchBox\"\r\n                class=\"searchBox\"\r\n                placeholder=\"Search Part Number, Model or Brand...\"\r\n                onkeyup=\"filterParts()\">\r\n\r\n            <div id=\"searchSuggestions\"\r\n                 class=\"suggestions\">\r\n            <\/div>\r\n\r\n        <\/div>\r\n\r\n        <!-- PRODUCT COUNT -->\r\n\r\n        <div id=\"productCount\"><\/div>\r\n\r\n        <!-- TABLE -->\r\n\r\n        <div class=\"tableWrap\">\r\n\r\n            <div id=\"parts\"><\/div>\r\n\r\n        <\/div>\r\n\r\n    <\/section>\r\n\r\n<\/main>\r\n\r\n\r\n<\/div>\r\n\r\n<!-- IMAGE POPUP -->\r\n\r\n<div id=\"imagePopup\"\r\n     class=\"imagePopup\">\r\n\r\n\r\n<div class=\"popupContent\">\r\n\r\n    <span\r\n        class=\"closePopup\"\r\n        onclick=\"closeImagePopup()\">\r\n\r\n        \u00d7\r\n\r\n    <\/span>\r\n\r\n    <img decoding=\"async\"\r\n        id=\"popupImage\"\r\n        src=\"\"\r\n        alt=\"Product\">\r\n\r\n<\/div>\r\n\r\n\r\n<\/div>\r\n\r\n\r\n<\/div>\r\n\r\n<!-- DETAIL POPUP -->\r\n\r\n<div id=\"detailPopup\"\r\n     class=\"detailPopup\">\r\n\r\n\r\n<div class=\"detailBox\">\r\n\r\n    <span\r\n        class=\"closeDetail\"\r\n        onclick=\"closeDetailPopup()\">\r\n\r\n        \u00d7\r\n\r\n    <\/span>\r\n\r\n    <div id=\"detailContent\"><\/div>\r\n\r\n<\/div>\r\n\r\n\r\n<\/div>\r\n\r\n<!-- PAPAPARSE -->\r\n\r\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/PapaParse\/5.4.1\/papaparse.min.js\"><\/script>\r\n\r\n<script>\r\n\r\nconst SHEET_URL =\r\n\"https:\/\/docs.google.com\/spreadsheets\/d\/e\/2PACX-1vTcaEi9qJYB-LkZYUVP9mOlHO8wYVmIuAocS1nyfvTU53QzsDxG_M6E57g_Du5QjAfUZA_j6Ja9XMRS\/pub?output=csv\";\r\n\r\nlet data = {};\r\nlet allProducts = [];\r\nlet currentProducts = [];\r\nlet currentBrand = \"\";\r\nlet currentCategory = \"\";\r\n\r\n\/* =========================\r\n   LOAD SHEET\r\n========================= *\/\r\n\r\nfunction loadSheet(firstLoad=true){\r\n\r\n    Papa.parse(\r\n        SHEET_URL + \"&t=\" + Date.now(),\r\n        {\r\n            download:true,\r\n            header:true,\r\n            skipEmptyLines:true,\r\n\r\n            complete:function(results){\r\n\r\n                data = {};\r\n                allProducts = [];\r\n\r\n                results.data.forEach(row=>{\r\n\r\n                    const brand =\r\n                    (row[\"Brand\"] || \"\").trim();\r\n\r\n                    const category =\r\n                    (row[\"Category\"] || \"\").trim();\r\n\r\n                    if(!brand || !category) return;\r\n\r\n                    if(!data[brand]){\r\n                        data[brand] = {};\r\n                    }\r\n\r\n                    if(!data[brand][category]){\r\n                        data[brand][category] = [];\r\n                    }\r\n\r\n                    const product = {\r\n\r\n                        part:\r\n                        row[\"Part Number\"] || \"\",\r\n\r\n                        model:\r\n                        row[\"Model\"] || \"\",\r\n\r\n                        brand:\r\n                        row[\"Product Brand\"] || \"\",\r\n\r\n                        category:\r\n                        category,\r\n\r\n                        image:\r\n                        row[\"Image URL\"] || \"\",\r\n\r\n                        link:\r\n                        row[\"Product URL\"] || \"#\"\r\n\r\n                    };\r\n\r\n                    data[brand][category]\r\n                    .push(product);\r\n\r\n                    allProducts.push(product);\r\n\r\n                });\r\n\r\n                buildBrandList();\r\n\r\n                if(firstLoad){\r\n\r\n                    showAllCategories();\r\n                    checkURLSearch();\r\n\r\n                }else{\r\n\r\n                    if(\r\n                        currentBrand &&\r\n                        currentCategory &&\r\n                        data[currentBrand] &&\r\n                        data[currentBrand][currentCategory]\r\n                    ){\r\n\r\n                        currentProducts =\r\n                        data[currentBrand][currentCategory];\r\n\r\n                        renderTable(currentProducts);\r\n\r\n                    }\r\n\r\n                }\r\n\r\n                console.log(\r\n                \"Products Loaded:\",\r\n                allProducts.length\r\n                );\r\n\r\n            },\r\n\r\n            error:function(err){\r\n\r\n                console.log(err);\r\n\r\n            }\r\n\r\n        }\r\n    );\r\n\r\n}\r\n\r\n\/* FIRST LOAD *\/\r\n\r\nloadSheet(true);\r\n\r\n\/* AUTO REFRESH *\/\r\n\r\nsetInterval(function(){\r\n\r\n    if(document.hidden) return;\r\n\r\n    loadSheet(false);\r\n\r\n},300000);\r\n\r\n\/* =========================\r\n   BRAND LIST\r\n========================= *\/\r\n\r\nfunction buildBrandList(){\r\n\r\n    let html = \"\";\r\n\r\n    for(let brand in data){\r\n\r\n        html += `\r\n        <div class=\"brand\"\r\n        onclick=\"loadCategories('${brand}')\">\r\n\r\n            ${brand}\r\n\r\n        <\/div>\r\n        `;\r\n    }\r\n\r\n    document.getElementById(\"brandList\")\r\n    .innerHTML = html;\r\n\r\n}\r\n\r\n\/* =========================\r\n   ALL CATEGORIES\r\n========================= *\/\r\n\r\nfunction showAllCategories(){\r\n\r\n    let html = \"\";\r\n\r\n    for(let brand in data){\r\n\r\n        for(let category in data[brand]){\r\n\r\n            html += `\r\n\r\n            <div class=\"catCard\"\r\n            onclick=\"openCategory('${brand}','${category}')\">\r\n\r\n                <h3>${category}<\/h3>\r\n\r\n                <p>${brand}<\/p>\r\n\r\n            <\/div>\r\n\r\n            `;\r\n        }\r\n    }\r\n\r\n    document.getElementById(\"catGrid\")\r\n    .innerHTML = html;\r\n\r\n    document.getElementById(\"catGrid\")\r\n    .style.display = \"grid\";\r\n\r\n    document.getElementById(\"partsSection\")\r\n    .style.display = \"none\";\r\n\r\n}\r\n\r\n\/* =========================\r\n   BRAND CATEGORIES\r\n========================= *\/\r\n\r\nfunction loadCategories(brand){\r\n\r\n    currentBrand = brand;\r\n\r\n    let html = \"\";\r\n\r\n    Object.keys(data[brand]).forEach(category=>{\r\n\r\n        html += `\r\n\r\n        <div class=\"catCard\"\r\n        onclick=\"openCategory('${brand}','${category}')\">\r\n\r\n            <h3>${category}<\/h3>\r\n\r\n            <p>${brand}<\/p>\r\n\r\n        <\/div>\r\n\r\n        `;\r\n\r\n    });\r\n\r\n    document.getElementById(\"catGrid\")\r\n    .innerHTML = html;\r\n\r\n    document.getElementById(\"catGrid\")\r\n    .style.display = \"grid\";\r\n\r\n    document.getElementById(\"partsSection\")\r\n    .style.display = \"none\";\r\n\r\n}\r\n\r\n\/* =========================\r\n   OPEN CATEGORY\r\n========================= *\/\r\n\r\nfunction openCategory(brand, category){\r\n\r\n    currentBrand = brand;\r\n    currentCategory = category;\r\n\r\n    currentProducts = data[brand][category] || [];\r\n\r\n    document.getElementById(\"catGrid\").style.display = \"none\";\r\n    document.getElementById(\"partsSection\").style.display = \"block\";\r\n\r\n    document.getElementById(\"partTitle\").innerHTML =\r\n    brand + \" \/ \" + category;\r\n\r\n    renderTable(currentProducts);\r\n}\r\n\r\n\/* =========================\r\n   CATEGORY SEARCH\r\n========================= *\/\r\n\r\nfunction filterCategories(){\r\n\r\n    const value =\r\n    document.getElementById(\"categorySearch\")\r\n    .value\r\n    .toLowerCase()\r\n    .trim();\r\n\r\n    let html = \"\";\r\n\r\n    for(const brand in data){\r\n\r\n        for(const category in data[brand]){\r\n\r\n            if(\r\n                brand.toLowerCase().includes(value) ||\r\n                category.toLowerCase().includes(value)\r\n            ){\r\n\r\n                html += `\r\n                <div class=\"catCard\"\r\n                onclick=\"openCategory('${brand}','${category}')\">\r\n\r\n                    <h3>${category}<\/h3>\r\n                    <p>${brand}<\/p>\r\n\r\n                <\/div>\r\n                `;\r\n            }\r\n        }\r\n    }\r\n\r\n    document.getElementById(\"catGrid\").innerHTML =\r\n    html || `\r\n    <div class=\"catCard\">\r\n        <h3>No Result<\/h3>\r\n        <p>No Category Found<\/p>\r\n    <\/div>\r\n    `;\r\n}\r\n\r\n\/* =========================\r\n   PRODUCT SEARCH\r\n========================= *\/\r\n\r\nfunction filterParts(){\r\n\r\n    const keyword =\r\n    document.getElementById(\"searchBox\")\r\n    .value\r\n    .toLowerCase()\r\n    .trim();\r\n\r\n    if(keyword === \"\"){\r\n\r\n        renderTable(currentProducts);\r\n        return;\r\n    }\r\n\r\n    const filtered =\r\n    currentProducts.filter(item =>\r\n\r\n        (item.part || \"\")\r\n        .toLowerCase()\r\n        .includes(keyword)\r\n\r\n        ||\r\n\r\n        (item.model || \"\")\r\n        .toLowerCase()\r\n        .includes(keyword)\r\n\r\n        ||\r\n\r\n        (item.brand || \"\")\r\n        .toLowerCase()\r\n        .includes(keyword)\r\n\r\n        ||\r\n\r\n        (item.category || \"\")\r\n        .toLowerCase()\r\n        .includes(keyword)\r\n\r\n    );\r\n\r\n    renderTable(filtered);\r\n}\r\n\r\n\/* =========================\r\n   HOME SEARCH\r\n========================= *\/\r\n\r\nfunction checkURLSearch(){\r\n\r\n    const params =\r\n    new URLSearchParams(window.location.search);\r\n\r\n    const keyword = params.get(\"search\");\r\n\r\n    if(keyword){\r\n\r\n        searchAllProducts(keyword);\r\n    }\r\n}\r\n\r\nfunction searchAllProducts(keyword){\r\n\r\n    keyword =\r\n    keyword.toLowerCase().trim();\r\n\r\n    const results =\r\n    allProducts.filter(item =>\r\n\r\n        (item.part || \"\")\r\n        .toLowerCase()\r\n        .includes(keyword)\r\n\r\n        ||\r\n\r\n        (item.model || \"\")\r\n        .toLowerCase()\r\n        .includes(keyword)\r\n\r\n        ||\r\n\r\n        (item.brand || \"\")\r\n        .toLowerCase()\r\n        .includes(keyword)\r\n\r\n        ||\r\n\r\n        (item.category || \"\")\r\n        .toLowerCase()\r\n        .includes(keyword)\r\n\r\n    );\r\n\r\n    document.getElementById(\"catGrid\")\r\n    .style.display = \"none\";\r\n\r\n    document.getElementById(\"partsSection\")\r\n    .style.display = \"block\";\r\n\r\n    document.getElementById(\"partTitle\")\r\n    .innerHTML =\r\n    \"Search Results : \" + keyword;\r\n\r\n    currentProducts = results;\r\n\r\n    renderTable(results);\r\n}\r\n\r\n\/* =========================\r\n   FAST TABLE RENDER\r\n========================= *\/\r\n\r\nfunction renderTable(products){\r\n\r\n    document.getElementById(\"productCount\").innerHTML =\r\n    \"Total Products : \" + products.length;\r\n\r\n    if(products.length === 0){\r\n\r\n        document.getElementById(\"parts\").innerHTML = `\r\n        <div style=\"\r\n        background:#fff;\r\n        padding:25px;\r\n        border-radius:12px;\r\n        text-align:center;\r\n        \">\r\n        No Products Found\r\n        <\/div>\r\n        `;\r\n\r\n        return;\r\n    }\r\n\r\n    let rows = \"\";\r\n\r\n    products.forEach((item,index)=>{\r\n\r\n        rows += `\r\n\r\n        <tr>\r\n\r\n            <td>${index+1}<\/td>\r\n\r\n            <td>${item.part || \"\"}<\/td>\r\n\r\n            <td>${item.model || \"\"}<\/td>\r\n\r\n            <td>${item.brand || \"\"}<\/td>\r\n\r\n            <td>${item.category || \"\"}<\/td>\r\n\r\n            <td>\r\n\r\n                <img decoding=\"async\"\r\n                loading=\"lazy\"\r\n                src=\"${item.image || ''}\"\r\n                class=\"productImg\"\r\n                onclick=\"openImagePopup('${item.image || ''}')\">\r\n\r\n            <\/td>\r\n\r\n            <td>\r\n\r\n                <div class=\"actionBtns\">\r\n\r\n                    <a\r\n                    href=\"javascript:void(0)\"\r\n                    class=\"moreBtn\"\r\n                    onclick=\"showProductDetailByPart('${item.part}')\">\r\n\r\n                    See More\r\n\r\n                    <\/a>\r\n\r\n                    <a\r\n                    target=\"_blank\"\r\n                    class=\"waBtn\"\r\n                    href=\"https:\/\/wa.me\/923008117857?text=${encodeURIComponent(\r\n`Hello,\r\n\r\nI am interested in this product.\r\n\r\nPart Number: ${item.part}\r\nModel: ${item.model}\r\nBrand: ${item.brand}\r\nCategory: ${item.category}\r\n\r\nPlease send price and availability.`\r\n)}\">\r\n\r\n                    WhatsApp\r\n\r\n                    <\/a>\r\n\r\n                <\/div>\r\n\r\n            <\/td>\r\n\r\n        <\/tr>\r\n\r\n        `;\r\n    });\r\n\r\n    document.getElementById(\"parts\").innerHTML = `\r\n\r\n    <table>\r\n\r\n        <thead>\r\n\r\n            <tr>\r\n\r\n                <th>Sr#<\/th>\r\n                <th>Part Number<\/th>\r\n                <th>Model<\/th>\r\n                <th>Brand<\/th>\r\n                <th>Category<\/th>\r\n                <th>Image<\/th>\r\n                <th>Action<\/th>\r\n\r\n            <\/tr>\r\n\r\n        <\/thead>\r\n\r\n        <tbody>\r\n\r\n            ${rows}\r\n\r\n        <\/tbody>\r\n\r\n    <\/table>\r\n\r\n    `;\r\n}\r\n\r\n\/* =========================\r\n   PRODUCT DETAILS\r\n========================= *\/\r\n\r\nfunction showProductDetailByPart(part){\r\n\r\n    const item =\r\n    allProducts.find(p => p.part === part);\r\n\r\n    if(!item) return;\r\n\r\n    document.getElementById(\"detailContent\").innerHTML = `\r\n\r\n<div style=\"\r\ndisplay:flex;\r\ngap:25px;\r\nflex-wrap:wrap;\r\nalign-items:flex-start;\r\n\">\r\n\r\n    <!-- IMAGE -->\r\n\r\n    <div style=\"flex:1;min-width:250px;text-align:center;\">\r\n\r\n        <img decoding=\"async\"\r\n        src=\"${item.image || ''}\"\r\n        style=\"\r\n        width:100%;\r\n        max-width:320px;\r\n        border-radius:15px;\r\n        border:1px solid #dbe8f7;\r\n        box-shadow:0 5px 15px rgba(0,0,0,.08);\r\n        \">\r\n\r\n    <\/div>\r\n\r\n    <!-- DETAILS -->\r\n\r\n    <div style=\"flex:1.5;min-width:280px;\">\r\n\r\n        <h2 style=\"\r\n        color:#3273a8;\r\n        margin-bottom:20px;\r\n        \">\r\n        Product Details\r\n        <\/h2>\r\n\r\n        <div style=\"\r\n        background:#f7fbff;\r\n        padding:15px;\r\n        border-radius:12px;\r\n        border:1px solid #dceafb;\r\n        \">\r\n\r\n            <p style=\"margin-bottom:12px;\">\r\n                <strong>Part Number:<\/strong>\r\n                ${item.part || '-'}\r\n            <\/p>\r\n\r\n            <p style=\"margin-bottom:12px;\">\r\n                <strong>Model:<\/strong>\r\n                ${item.model || '-'}\r\n            <\/p>\r\n\r\n            <p style=\"margin-bottom:12px;\">\r\n                <strong>Brand:<\/strong>\r\n                ${item.brand || '-'}\r\n            <\/p>\r\n\r\n            <p style=\"margin-bottom:12px;\">\r\n                <strong>Category:<\/strong>\r\n                ${item.category || '-'}\r\n            <\/p>\r\n\r\n        <\/div>\r\n\r\n        <!-- BUTTONS -->\r\n\r\n        <div style=\"\r\n        margin-top:20px;\r\n        display:flex;\r\n        gap:10px;\r\n        flex-wrap:wrap;\r\n        \">\r\n\r\n            <a\r\n            target=\"_blank\"\r\n            href=\"https:\/\/wa.me\/923008117857?text=${encodeURIComponent(\r\n`Hello,\r\n\r\nI am interested in this product.\r\n\r\nPart Number: ${item.part}\r\nModel: ${item.model}\r\nBrand: ${item.brand}\r\nCategory: ${item.category}\r\n\r\nPlease send price and availability.`\r\n            )}\"\r\n            style=\"\r\n            background:#25D366;\r\n            color:#fff;\r\n            text-decoration:none;\r\n            padding:12px 20px;\r\n            border-radius:8px;\r\n            font-weight:bold;\r\n            \">\r\n\r\n            WhatsApp Inquiry\r\n\r\n            <\/a>\r\n\r\n            <a\r\n            href=\"${item.link || '#'}\"\r\n            target=\"_blank\"\r\n            style=\"\r\n            background:#3273a8;\r\n            color:#fff;\r\n            text-decoration:none;\r\n            padding:12px 20px;\r\n            border-radius:8px;\r\n            font-weight:bold;\r\n            \">\r\n\r\n            View Product\r\n\r\n            <\/a>\r\n\r\n        <\/div>\r\n\r\n    <\/div>\r\n\r\n<\/div>\r\n\r\n`;\r\n\r\n    document.getElementById(\"detailPopup\")\r\n    .style.display = \"flex\";\r\n}\r\n\r\n\/* =========================\r\n   IMAGE POPUP\r\n========================= *\/\r\n\r\nfunction openImagePopup(src){\r\n\r\n    if(!src) return;\r\n\r\n    document.getElementById(\"popupImage\").src = src;\r\n\r\n    document.getElementById(\"imagePopup\")\r\n    .style.display = \"flex\";\r\n}\r\n\r\nfunction closeImagePopup(){\r\n\r\n    document.getElementById(\"imagePopup\")\r\n    .style.display = \"none\";\r\n}\r\n\r\n\/* =========================\r\n   DETAIL POPUP CLOSE\r\n========================= *\/\r\n\r\nfunction closeDetailPopup(){\r\n\r\n    document.getElementById(\"detailPopup\")\r\n    .style.display = \"none\";\r\n}\r\n\r\n\/* =========================\r\n   BACK BUTTON\r\n========================= *\/\r\n\r\nfunction backToCategories(){\r\n\r\n    document.getElementById(\"partsSection\")\r\n    .style.display = \"none\";\r\n\r\n    document.getElementById(\"catGrid\")\r\n    .style.display = \"grid\";\r\n\r\n    document.getElementById(\"searchBox\").value = \"\";\r\n}\r\n\r\n\/* =========================\r\n   POPUP OUTSIDE CLICK\r\n========================= *\/\r\n\r\nwindow.addEventListener(\"click\",function(e){\r\n\r\n    const imagePopup =\r\n    document.getElementById(\"imagePopup\");\r\n\r\n    const detailPopup =\r\n    document.getElementById(\"detailPopup\");\r\n\r\n    if(e.target === imagePopup){\r\n\r\n        closeImagePopup();\r\n    }\r\n\r\n    if(e.target === detailPopup){\r\n\r\n        closeDetailPopup();\r\n    }\r\n\r\n});\r\n\r\n\/* =========================\r\n   SMART AUTO REFRESH\r\n   (NO PAGE RESET)\r\n========================= *\/\r\n\r\nsetInterval(function(){\r\n\r\n    Papa.parse(\r\n        SHEET_URL + \"&refresh=\" + Date.now(),\r\n        {\r\n            download:true,\r\n            header:true,\r\n            skipEmptyLines:true,\r\n\r\n            complete:function(results){\r\n\r\n                let latestCount =\r\n                results.data.length;\r\n\r\n                if(latestCount !== allProducts.length){\r\n\r\n                    console.log(\r\n                    \"New Data Found \u2192 Updating\"\r\n                    );\r\n\r\n                    loadSheet();\r\n                }\r\n            }\r\n        }\r\n    );\r\n\r\n},30000);\r\n\r\n\/* =========================\r\n   ENTER SEARCH\r\n========================= *\/\r\n\r\ndocument.addEventListener(\r\n\"DOMContentLoaded\",\r\nfunction(){\r\n\r\n    const search =\r\n    document.getElementById(\"searchBox\");\r\n\r\n    if(search){\r\n\r\n        search.addEventListener(\r\n        \"keyup\",\r\n        function(e){\r\n\r\n            if(e.key === \"Enter\"){\r\n\r\n                filterParts();\r\n            }\r\n\r\n        });\r\n    }\r\n\r\n});\r\n\r\n\/* =========================\r\n   PERFORMANCE LOG\r\n========================= *\/\r\n\r\nconsole.log(\r\n\"ADVANCED VERSION LOADED\"\r\n);\r\n\r\n\r\n<\/script>\r\n\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-58dc465 e-con e-atomic-element e-flexbox-base e-50e33bc \" data-id=\"58dc465\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"58dc465\">\n    \t\t<div class=\"elementor-element elementor-element-b8b0db8 elementor-widget elementor-widget-html\" data-id=\"b8b0db8\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\r\n.brand-ribbon-section{\r\n    background:;\r\n    padding:90px 0;\r\n    overflow:hidden;\r\n    position:relative;\r\n    font-family:Arial,sans-serif;\r\n}\r\n\r\n.brand-ribbon-heading{\r\n    text-align:center;\r\n    margin-bottom:50px;\r\n}\r\n\r\n.brand-ribbon-heading h2{\r\n    color:#ff;\r\n    font-size:52px;\r\n    font-weight:800;\r\n    margin-bottom:10px;\r\n}\r\n\r\n.brand-ribbon-heading h2 span{\r\n    color:#3f84bc;\r\n}\r\n\r\n.brand-ribbon-heading p{\r\n    color:#bdbdb;\r\n    max-width:700px;\r\n    margin:auto;\r\n}\r\n\r\n.brand-ribbon{\r\n    position:relative;\r\n    overflow:hidden;\r\n}\r\n\r\n.brand-ribbon::before,\r\n.brand-ribbon::after{\r\n    content:\"\";\r\n    position:absolute;\r\n    top:0;\r\n    width:150px;\r\n    height:100%;\r\n    z-index:2;\r\n}\r\n\r\n.brand-ribbon::before{\r\n    left:0;\r\n    background:linear-gradient(to right,#3273a8,transparent);\r\n}\r\n\r\n.brand-ribbon::after{\r\n    right:0;\r\n    background:linear-gradient(to left,#3273a8,transparent);\r\n}\r\n\r\n.ribbon-track{\r\n    display:flex;\r\n    width:max-content;\r\n    animation:ribbonMove 20s linear infinite;\r\n}\r\n\r\n.brand-ribbon:hover .ribbon-track{\r\n    animation-play-state:paused;\r\n}\r\n\r\n.brand-logo{\r\n    width:260px;\r\n    height:140px;\r\n    margin:0 15px;\r\n    background:;\r\n    border-radius:16px;\r\n    border:1px solid rgba(50, 115, 168);\r\n    display:flex;\r\n    align-items:center;\r\n    justify-content:center;\r\n    transition:.3s;\r\n}\r\n\r\n.brand-logo:hover{\r\n    border-color:#ff7a00;\r\n    box-shadow:0 0 25px rgba();\r\n    transform:scale(1.05);\r\n}\r\n\r\n.brand-logo img{\r\n    width:75%;\r\n    max-height:80px;\r\n    object-fit:contain;\r\n}\r\n\r\n@keyframes ribbonMove{\r\n    from{\r\n        transform:translateX(0);\r\n    }\r\n    to{\r\n        transform:translateX(-50%);\r\n    }\r\n}\r\n\r\n@media(max-width:768px){\r\n\r\n.brand-ribbon-heading h2{\r\n    font-size:34px;\r\n}\r\n\r\n.brand-logo{\r\n    width:180px;\r\n    height:100px;\r\n}\r\n\r\n.brand-logo img{\r\n    max-height:55px;\r\n}\r\n\r\n}\r\n<\/style>\r\n\r\n<section class=\"brand-ribbon-section\">\r\n\r\n<div class=\"brand-ribbon-heading\">\r\n<h2>Our <span>Brands<\/span><\/h2>\r\n<p>Trusted automotive brands delivering quality, durability and performance.<\/p>\r\n<\/div>\r\n\r\n<div class=\"brand-ribbon\">\r\n\r\n<div class=\"ribbon-track\">\r\n\r\n<div class=\"brand-logo\">\r\n<img  alt=\"\" loading=\"eager\" fetchpriority=\"high\" decoding=\"async\" src=\"https:\/\/industradesphere.com\/wp-content\/uploads\/2026\/06\/image-2-Copy.jpeg\">\r\n<\/div>\r\n\r\n<div class=\"brand-logo\">\r\n<img  alt=\"\" loading=\"lazy\" decoding=\"async\" src=\"https:\/\/industradesphere.com\/wp-content\/uploads\/2026\/06\/CHERRY-GASKET-Copy.jpeg\">\r\n<\/div>\r\n\r\n<div class=\"brand-logo\">\r\n<img  alt=\"\" loading=\"lazy\" decoding=\"async\" src=\"https:\/\/industradesphere.com\/wp-content\/uploads\/2026\/06\/BEAR-BRAND.png\">\r\n<\/div>\r\n\r\n<!-- Duplicate for smooth infinite scroll -->\r\n\r\n<div class=\"brand-logo\">\r\n<img  alt=\"\" loading=\"lazy\" decoding=\"async\" src=\"https:\/\/industradesphere.com\/wp-content\/uploads\/2026\/06\/image-2-Copy.jpeg\">\r\n<\/div>\r\n\r\n<div class=\"brand-logo\">\r\n<img  alt=\"\" loading=\"lazy\" decoding=\"async\" src=\"https:\/\/industradesphere.com\/wp-content\/uploads\/2026\/06\/CHERRY-GASKET-Copy.jpeg\">\r\n<\/div>\r\n\r\n<div class=\"brand-logo\">\r\n<img  alt=\"\" loading=\"lazy\" decoding=\"async\" src=\"https:\/\/industradesphere.com\/wp-content\/uploads\/2026\/06\/BEAR-BRAND.png\">\r\n\r\n<\/div>\r\n<div class=\"brand-logo\">\r\n<img  alt=\"\" loading=\"lazy\" decoding=\"async\" src=\"https:\/\/industradesphere.com\/wp-content\/uploads\/2026\/06\/MICRO-2.jpeg\">\r\n<\/div>\r\n<div class=\"brand-logo\">\r\n<img  alt=\"\" loading=\"lazy\" decoding=\"async\" src=\"https:\/\/industradesphere.com\/wp-content\/uploads\/2026\/06\/KNORR-BREMSE-2.jpg\">\r\n<\/div>\r\n<div class=\"brand-logo\">\r\n<img  alt=\"\" loading=\"lazy\" decoding=\"async\" src=\"https:\/\/industradesphere.com\/wp-content\/uploads\/2026\/06\/KIBI-GASKET-1.jpg.jpeg\">\r\n<\/div>\r\n<div class=\"brand-logo\">\r\n<img  alt=\"\" loading=\"lazy\" decoding=\"async\" src=\"https:\/\/industradesphere.com\/wp-content\/uploads\/2026\/06\/KANSAI-VALVE.png\">\r\n<\/div>\r\n<div class=\"brand-logo\">\r\n<img  alt=\"\" loading=\"lazy\" decoding=\"async\" src=\"https:\/\/industradesphere.com\/wp-content\/uploads\/2026\/06\/HKP-REAL.png\">\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/section>\r\n\t\t\t\t<\/div>\n\t\t\n<\/div>\n\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>PRODUCTS DETAILS Brands ALL CATEGORIES Loading Brands&#8230; Loading&#8230; Please Wait \u2190 Back To Categories \u00d7 \u00d7 Our Brands Trusted automotive brands delivering quality, durability and performance.<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-50","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/industradesphere.com\/index.php?rest_route=\/wp\/v2\/pages\/50","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/industradesphere.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/industradesphere.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/industradesphere.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/industradesphere.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=50"}],"version-history":[{"count":373,"href":"https:\/\/industradesphere.com\/index.php?rest_route=\/wp\/v2\/pages\/50\/revisions"}],"predecessor-version":[{"id":1948,"href":"https:\/\/industradesphere.com\/index.php?rest_route=\/wp\/v2\/pages\/50\/revisions\/1948"}],"wp:attachment":[{"href":"https:\/\/industradesphere.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=50"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}