{"id":260,"date":"2026-05-06T11:28:32","date_gmt":"2026-05-06T08:28:32","guid":{"rendered":"https:\/\/atkhuoltokurikka.fi\/?page_id=260"},"modified":"2026-05-07T09:57:42","modified_gmt":"2026-05-07T06:57:42","slug":"260-2","status":"publish","type":"page","link":"https:\/\/atkhuoltokurikka.fi\/?page_id=260","title":{"rendered":""},"content":{"rendered":"\n<div class=\"parts-search-wrapper\">\n    <div class=\"parts-search-header\">\n        <h1>Varaosahaku &#038; Hinnasto<\/h1>\n        <p>Valitse tarvitsemasi osat, saat hinta-arvion heti<\/p>\n    <\/div>\n    \n    <div class=\"parts-search-form\">\n        <input type=\"text\" id=\"partsSearchInput\" class=\"parts-search-input\" placeholder=\"Esim. Galaxy A25, iPhone 12\" \/>\n        <button id=\"partsSearchBtn\" class=\"parts-search-button\" onclick=\"searchParts()\">Hae osat<\/button>\n    <\/div>\n    \n    <div id=\"partsResults\"><\/div>\n    \n    <div id=\"priceCalculator\" class=\"price-calculator\" style=\"display: none;\">\n        <h2>\ud83d\udcca Valitut huollot<\/h2>\n        <div id=\"selectedItems\"><\/div>\n        <div id=\"shippingRow\" class=\"shipping-cost\" style=\"display: none;\">\n            <span>\ud83d\udce6 Postikulut:<\/span>\n            <span id=\"shippingAmount\">0 \u20ac<\/span>\n        <\/div>\n        <div class=\"total-price\">\n            <span>Yhteishinta :<\/span>\n            <span id=\"totalPrice\" class=\"total-amount\">0 \u20ac<\/span>\n        <\/div>\n        <div class=\"customer-info\">\n            <h3>Yhteystiedot<\/h3>\n            <input type=\"text\" id=\"customerName\" class=\"customer-input\" placeholder=\"Nimesi *\" required>\n            <input type=\"tel\" id=\"customerPhone\" class=\"customer-input\" placeholder=\"Puhelinnumerosi *\" required>\n            <input type=\"email\" id=\"customerEmail\" class=\"customer-input\" placeholder=\"S\u00e4hk\u00f6posti (vapaaehtoinen)\">\n            <textarea id=\"customerMessage\" class=\"customer-textarea\" placeholder=\"Lis\u00e4tiedot (vapaaehtoinen)\"><\/textarea>\n        <\/div>\n        <button class=\"order-button\" onclick=\"sendOrder()\">L\u00e4het\u00e4 tarjouspyynt\u00f6 \u2192<\/button>\n    <\/div>\n<\/div>\n\n<style>\n\/* samat tyylit kuin aiemmin \u2013 kopio tarvittaessa *\/\n.parts-search-wrapper {\n    max-width: 1200px; margin: 0 auto; padding: 20px; background: #1a1a2e; color: white;\n}\n.parts-search-header h1, .parts-search-header p { color: white; }\n.parts-search-form { display: flex; gap: 10px; margin: 30px 0; flex-wrap: wrap; }\n.parts-search-input { flex: 1; min-width: 250px; padding: 12px; font-size: 16px; border: 1px solid #333; border-radius: 4px; background: #2a2a3e; color: white; }\n.parts-search-button { padding: 12px 24px; font-size: 16px; cursor: pointer; background: #0073aa; color: white; border: none; border-radius: 4px; }\n.parts-section { margin: 40px 0; }\n.parts-section h2 { color: white; border-bottom: 2px solid #0073aa; padding-bottom: 10px; }\n.parts-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; margin-top: 20px; }\n.parts-card { border: 1px solid #333; border-radius: 8px; padding: 20px; background: #2a2a3e; }\n.parts-card-name { font-weight: 600; font-size: 16px; color: white; }\n.parts-card-price { font-size: 20px; font-weight: bold; margin: 15px 0; color: #00d4ff; }\n.parts-card-checkbox { display: flex; align-items: center; gap: 10px; margin-top: 15px; padding-top: 15px; border-top: 1px solid #444; }\n.parts-card-checkbox label { color: white; cursor: pointer; }\n.parts-card-checkbox input { width: 20px; height: 20px; cursor: pointer; }\n.price-calculator { margin-top: 40px; padding: 30px; background: #2a2a3e; border-radius: 12px; border: 2px solid #0073aa; }\n.selected-item { display: flex; justify-content: space-between; padding: 12px; border-bottom: 1px solid #444; flex-wrap: wrap; gap: 8px; }\n.shipping-cost { display: flex; justify-content: space-between; padding: 15px 20px; margin: 10px 0; background: #1a1a2e; border-radius: 8px; }\n.total-price { display: flex; justify-content: space-between; padding: 20px; margin: 10px 0; background: #1a1a2e; border-radius: 8px; border: 1px solid #00ff88; }\n.customer-info { margin-top: 20px; padding: 20px; background: #1a1a2e; border-radius: 8px; }\n.customer-input, .customer-textarea { width: 100%; padding: 12px; margin-bottom: 15px; border: 1px solid #333; border-radius: 4px; background: #2a2a3e; color: white; box-sizing: border-box; }\n.order-button { width: 100%; padding: 15px; margin-top: 20px; background: #00ff88; color: #1a1a2e; border: none; border-radius: 8px; font-size: 18px; cursor: pointer; }\n.loader { text-align: center; padding: 40px; }\n.loader::after { content: \"\"; display: inline-block; width: 30px; height: 30px; border: 3px solid #333; border-top: 3px solid #0073aa; border-radius: 50%; animation: spin 1s linear infinite; }\n@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }\n.error-message, .no-results { background: #2a2a3e; border: 1px solid #c33; padding: 20px; border-radius: 8px; color: #ff8888; text-align: center; }\n@media (max-width: 768px) { .parts-search-form { flex-direction: column; } .parts-grid { grid-template-columns: 1fr; } .selected-item { flex-direction: column; text-align: center; } .total-price { flex-direction: column; text-align: center; } }\n<\/style>\n\n<script>\nconst ajaxurl = window.location.origin + '\/wp-admin\/admin-ajax.php';\n\nasync function searchParts() {\n    let query = document.getElementById('partsSearchInput').value.trim();\n    const resultsDiv = document.getElementById('partsResults');\n    if (!query) { resultsDiv.innerHTML = '<div class=\"error-message\">\u26a0\ufe0f Sy\u00f6t\u00e4 hakusana<\/div>'; return; }\n    resultsDiv.innerHTML = '<div class=\"loader\"><\/div>';\n    \n    \/\/ Hae alkuper\u00e4isell\u00e4 kyselyll\u00e4\n    let data = await fetchData(query);\n    if (!data.success || data.data.count === 0) {\n        resultsDiv.innerHTML = `<div class=\"error-message\">\ud83d\udd0d Ei tuloksia haulle \"${query}\"<\/div>`;\n        document.getElementById('priceCalculator').style.display = 'none';\n        return;\n    }\n    \n    let results = data.data.results;\n    let hasScreen = results.some(r => r.type === 'screen');\n    \n    \/\/ Jos ei ole n\u00e4ytt\u00f6j\u00e4, eik\u00e4 hakusanassa jo ole 'n\u00e4ytt\u00f6' tai 'lcd', tee lis\u00e4haku\n    if (!hasScreen && !query.toLowerCase().includes('n\u00e4ytt\u00f6') && !query.toLowerCase().includes('lcd')) {\n        let extendedQuery = query + ' n\u00e4ytt\u00f6';\n        let data2 = await fetchData(extendedQuery);\n        if (data2.success && data2.data.count > 0) {\n            let newScreens = data2.data.results.filter(r => r.type === 'screen');\n            if (newScreens.length) {\n                let combined = [...results, ...newScreens];\n                let unique = [];\n                let seen = new Set();\n                for (let item of combined) {\n                    let key = item.name.toLowerCase();\n                    if (!seen.has(key)) seen.add(key), unique.push(item);\n                }\n                results = unique;\n                resultsDiv.innerHTML = `<div class=\"optimize-info\">\ud83d\udd0d Laajennettiin hakua: \"${query} \u2192 ${extendedQuery}\"<\/div>`;\n            }\n        }\n    }\n    \n    displayResults(results, query);\n}\n\nasync function fetchData(query) {\n    try {\n        const resp = await fetch(`${ajaxurl}?action=fetch_parts&query=${encodeURIComponent(query)}`);\n        return await resp.json();\n    } catch(e) {\n        return { success: false };\n    }\n}\n\nfunction displayResults(results, originalQuery) {\n    \/\/ Poimitaan hausta mallinumero, esim. \"A25\" tai \"12\" (iPhone)\n    let modelMatch = originalQuery.match(\/[A-Za-z]*\\d+\/i);\n    let model = modelMatch ? modelMatch[0].toLowerCase() : '';\n    \n    const phoneBrands = ['samsung', 'iphone', 'xiaomi', 'huawei', 'oneplus', 'sony', 'nokia', 'lg', 'google', 'pixel', 'motorola', 'realme', 'oppo', 'vivo', 'asus', 'honor', 'htc'];\n    const blocked = ['teippi', 'tape', 'n\u00e4yt\u00f6nsuoja', 'suoja', 'kuori', 'cover', 'sormenj\u00e4lki', 'drone', 'laptop', 'tablet', 'ipad', 'dell', 'hp', 'lenovo'];\n    \n    let filtered = results.filter(item => {\n        const name = item.name.toLowerCase();\n        const hasPhone = phoneBrands.some(b => name.includes(b));\n        const isBlocked = blocked.some(b => name.includes(b));\n        \/\/ Mallitarkistus: jos mallinumero on annettu, nimess\u00e4 on oltava se\n        let modelOk = true;\n        if (model) {\n            modelOk = name.includes(model);\n        }\n        return hasPhone && !isBlocked && modelOk;\n    });\n    \n    if (filtered.length === 0) filtered = results.filter(item => {\n        const name = item.name.toLowerCase();\n        let modelOk = true;\n        if (model) modelOk = name.includes(model);\n        return modelOk; \/\/ fallback ilman br\u00e4ndi- tai estosuodatusta\n    });\n    \n    const screens = filtered.filter(p => p.type === 'screen');\n    const batteries = filtered.filter(p => p.type === 'battery');\n    const glasses = filtered.filter(p => p.type === 'glass');\n    \n    let html = '';\n    if (screens.length) {\n        html += `<div class=\"parts-section\"><h2>\ud83d\udcf1 N\u00e4yt\u00f6t<\/h2><div class=\"parts-grid\">`;\n        screens.forEach((p, i) => {\n            html += `<div class=\"parts-card\">\n                <div class=\"parts-card-name\">${escapeHtml(p.name)}<\/div>\n                <div class=\"parts-card-price\">Osan hinta: ${p.price ? p.price.toFixed(2)+' \u20ac' : 'Ei saatavilla'}<\/div>\n                <div class=\"parts-card-checkbox\"><input type=\"checkbox\" id=\"screen_${i}\" data-type=\"screen\" data-name=\"${escapeHtml(p.name)}\" data-price=\"${p.price || 0}\" onchange=\"updatePrice()\"><label for=\"screen_${i}\">Valitse n\u00e4yt\u00f6n vaihto (asennettuna)<\/label><\/div>\n            <\/div>`;\n        });\n        html += `<\/div><\/div>`;\n    }\n    if (batteries.length) {\n        html += `<div class=\"parts-section\"><h2>\ud83d\udd0b Akut<\/h2><div class=\"parts-grid\">`;\n        batteries.forEach((p, i) => {\n            html += `<div class=\"parts-card\">\n                <div class=\"parts-card-name\">${escapeHtml(p.name)}<\/div>\n                <div class=\"parts-card-price\">Osan hinta: ${p.price ? p.price.toFixed(2)+' \u20ac' : 'Ei saatavilla'}<\/div>\n                <div class=\"parts-card-checkbox\"><input type=\"checkbox\" id=\"battery_${i}\" data-type=\"battery\" data-name=\"${escapeHtml(p.name)}\" data-price=\"${p.price || 0}\" onchange=\"updatePrice()\"><label for=\"battery_${i}\">Valitse akun vaihto (asennettuna)<\/label><\/div>\n            <\/div>`;\n        });\n        html += `<\/div><\/div>`;\n    }\n    if (glasses.length) {\n        html += `<div class=\"parts-section\"><h2>\ud83d\udd0d Lasit<\/h2><div class=\"parts-grid\">`;\n        glasses.forEach((p, i) => {\n            html += `<div class=\"parts-card\">\n                <div class=\"parts-card-name\">${escapeHtml(p.name)}<\/div>\n                <div class=\"parts-card-price\">Osan hinta: ${p.price ? p.price.toFixed(2)+' \u20ac' : 'Ei saatavilla'}<\/div>\n                <div class=\"parts-card-checkbox\"><input type=\"checkbox\" id=\"glass_${i}\" data-type=\"glass\" data-name=\"${escapeHtml(p.name)}\" data-price=\"${p.price || 0}\" onchange=\"updatePrice()\"><label for=\"glass_${i}\">Valitse lasin vaihto (asennettuna)<\/label><\/div>\n            <\/div>`;\n        });\n        html += `<\/div><\/div>`;\n    }\n    \n    if (!screens.length && !batteries.length && !glasses.length) {\n        html = `<div class=\"error-message\">\ud83d\udd0d Ei puhelimen osia haulle \"${originalQuery}\"<\/div>`;\n        document.getElementById('priceCalculator').style.display = 'none';\n    } else {\n        document.getElementById('priceCalculator').style.display = 'block';\n    }\n    document.getElementById('partsResults').innerHTML = html;\n    updatePrice();\n}\n\nfunction updatePrice() {\n    const checkboxes = document.querySelectorAll('#partsResults input[type=\"checkbox\"]:checked');\n    const selectedDiv = document.getElementById('selectedItems');\n    const shippingRow = document.getElementById('shippingRow');\n    let total = 0;\n    let parts = [];\n    \n    checkboxes.forEach(cb => {\n        let partPrice = parseFloat(cb.dataset.price);\n        if (isNaN(partPrice)) partPrice = 0;\n        let work = partPrice >= 50 ? partPrice : 50;\n        let sum = partPrice + work;\n        parts.push({ name: cb.dataset.name, partPrice, work, total: sum, origWork: work });\n        total += sum;\n    });\n    \n    if (parts.length >= 2) {\n        let cheapest = parts.reduce((a,b) => a.work < b.work ? a : b);\n        const discount = cheapest.work * 0.5;\n        cheapest.work -= discount;\n        cheapest.total = cheapest.partPrice + cheapest.work;\n        total = parts.reduce((s, p) => s + p.total, 0);\n    }\n    \n    const shipping = checkboxes.length * 6;\n    const grand = total + shipping;\n    shippingRow.style.display = checkboxes.length ? 'flex' : 'none';\n    document.getElementById('shippingAmount').innerHTML = shipping.toFixed(2) + ' \u20ac';\n    \n    let html = '';\n    parts.forEach(p => {\n        const workDisplay = p.work !== p.origWork ? `<span style=\"text-decoration:line-through;\">${p.origWork.toFixed(2)} \u20ac<\/span> \u2192 ${p.work.toFixed(2)} \u20ac` : `${p.work.toFixed(2)} \u20ac`;\n        html += `<div class=\"selected-item\">\n            <span class=\"selected-item-name\">${p.name}<\/span>\n            <span class=\"selected-item-part-price\">Osa: ${p.partPrice.toFixed(2)} \u20ac<\/span>\n            <span class=\"selected-item-work-price\">Ty\u00f6: ${workDisplay}<\/span>\n            <span class=\"selected-item-total\">Yht: ${p.total.toFixed(2)} \u20ac<\/span>\n        <\/div>`;\n    });\n    if (parts.length >= 2) html += `<div class=\"selected-item\" style=\"color:#00ff88; justify-content:center;\">\u2728 Useamman osan alennus: halvimman ty\u00f6n hinta -50%<\/div>`;\n    if (!parts.length) html = '<div class=\"selected-item\">Ei valittuja tuotteita<\/div>';\n    \n    selectedDiv.innerHTML = html;\n    document.getElementById('totalPrice').innerHTML = grand.toFixed(2) + ' \u20ac';\n}\n\nfunction sendOrder() {\n    const checkboxes = document.querySelectorAll('#partsResults input[type=\"checkbox\"]:checked');\n    if (!checkboxes.length) { alert('Valitse v\u00e4hint\u00e4\u00e4n yksi huolto'); return; }\n    const name = document.getElementById('customerName').value.trim();\n    const phone = document.getElementById('customerPhone').value.trim();\n    if (!name || !phone) { alert('Anna nimesi ja puhelinnumerosi'); return; }\n    const email = document.getElementById('customerEmail').value.trim();\n    const msg = document.getElementById('customerMessage').value.trim();\n    let text = \"*Uusi huoltopyynt\u00f6*\\n\\n*Nimi:* \" + name + \"\\n*Puhelin:* \" + phone;\n    if (email) text += \"\\n*S\u00e4hk\u00f6posti:* \" + email;\n    text += \"\\n\\n*Valitut huollot:*\\n\";\n    checkboxes.forEach(cb => text += `- ${cb.dataset.name}\\n`);\n    const shipping = checkboxes.length * 6;\n    const total = document.getElementById('totalPrice').innerText;\n    text += `\\n*Postituskulut ):* ${shipping.toFixed(2)} \u20ac\\n*Arvioitu hinta asennettuna + postit:* ${total}\\n*Huom:* Lopullinen hinta vahvistetaan puhelimitse.\\n`;\n    if (msg) text += `\\n*Lis\u00e4tiedot:* ${msg}\\n`;\n    text += `\\nTerveiset, ${name}`;\n    window.open(`https:\/\/wa.me\/358414998026?text=${encodeURIComponent(text)}`, '_blank');\n}\n\nfunction escapeHtml(str) {\n    if (!str) return '';\n    return str.replace(\/[&<>]\/g, function(m) {\n        if (m === '&') return '&amp;';\n        if (m === '<') return '&lt;';\n        if (m === '>') return '&gt;';\n        return m;\n    });\n}\n\ndocument.getElementById('partsSearchInput').addEventListener('keypress', function(e) {\n    if (e.key === 'Enter') searchParts();\n});\n<\/script>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Varaosahaku &#038; Hinnasto Valitse tarvitsemasi osat, saat hinta-arvion heti Hae osat \ud83d\udcca Valitut huollot \ud83d\udce6 Postikulut: 0 \u20ac Yhteishinta : 0 \u20ac Yhteystiedot L\u00e4het\u00e4 tarjouspyynt\u00f6 \u2192<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"class_list":["post-260","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/atkhuoltokurikka.fi\/index.php?rest_route=\/wp\/v2\/pages\/260","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/atkhuoltokurikka.fi\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/atkhuoltokurikka.fi\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/atkhuoltokurikka.fi\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/atkhuoltokurikka.fi\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=260"}],"version-history":[{"count":30,"href":"https:\/\/atkhuoltokurikka.fi\/index.php?rest_route=\/wp\/v2\/pages\/260\/revisions"}],"predecessor-version":[{"id":299,"href":"https:\/\/atkhuoltokurikka.fi\/index.php?rest_route=\/wp\/v2\/pages\/260\/revisions\/299"}],"wp:attachment":[{"href":"https:\/\/atkhuoltokurikka.fi\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=260"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}