(function () { if (window.__ovGuard) return; window.__ovGuard = true; function $(id) { return document.getElementById(id); } function qsa(sel, root) { return Array.prototype.slice.call((root || document).querySelectorAll(sel)); } function on(el, ev, fn) { if (el) el.addEventListener(ev, fn); } function clear(el) { if (!el) return; while (el.firstChild) el.removeChild(el.firstChild); } function esc(s) { return s == null ? '' : String(s); } function setText(id, text) { var el = $(id); if (el) el.textContent = esc(text); } function digitsOnly(s) { return esc(s).replace(/[^0-9]/g, ''); } function parsePrice(s) { var d = digitsOnly(s); return d ? parseInt(d, 10) : null; } function trim(s) { return esc(s).replace(/^\s+|\s+$/g, ''); } function toMsisdn(raw) { var d = digitsOnly(raw); if (!d) return ''; if (d.charAt(0) === '0') d = '90' + d.slice(1); else if (d.length <= 10 && d.slice(0, 2) !== '90') d = '90' + d; return d; } // ---------------- Marka rozeti: OtoVitrin Mavi'in ilk harfinden türetilir ---------------- function initBrand() { var marks = qsa('[data-ov-brand-mark]'); if (!marks.length) return; var names = qsa('[data-ov-brand-name]'); var name = ''; for (var i = 0; i < names.length; i++) { var t = trim(names[i].textContent); if (t) { name = t; break; } } if (!name) return; var initial = name.charAt(0).toUpperCase(); for (var j = 0; j < marks.length; j++) marks[j].textContent = initial; } // ---------------- Telefon linkleri (tel: / wa.me) normalize ---------------- function initPhoneLinks() { var tels = qsa('a[data-tel]'); for (var i = 0; i < tels.length; i++) { var msisdn = toMsisdn(tels[i].getAttribute('data-tel')); if (!msisdn) { tels[i].style.display = 'none'; continue; } tels[i].style.display = ''; tels[i].setAttribute('href', 'tel:+' + msisdn); } var was = qsa('a[data-wa]'); for (var k = 0; k < was.length; k++) { var m2 = toMsisdn(was[k].getAttribute('data-wa')); if (!m2) { was[k].style.display = 'none'; continue; } was[k].style.display = ''; was[k].setAttribute('href', 'https://wa.me/' + m2); } } // ---------------- Mobil hamburger menü (kendi kök öğesini arar; yoksa sessizce çıkar) ---------------- function initMobileNav() { var burger = document.querySelector('.ov-burger'); var nav = document.querySelector('.ov-nav'); if (!burger || !nav) return; function closeNav() { nav.classList.remove('open'); burger.setAttribute('aria-expanded', 'false'); } function openNav() { nav.classList.add('open'); burger.setAttribute('aria-expanded', 'true'); } on(burger, 'click', function (e) { e.stopPropagation(); if (nav.classList.contains('open')) closeNav(); else openNav(); }); var navLinks = qsa('a', nav); for (var i = 0; i < navLinks.length; i++) on(navLinks[i], 'click', closeNav); document.addEventListener('click', function (e) { if (!nav.classList.contains('open')) return; if (nav.contains(e.target) || burger.contains(e.target)) return; closeNav(); }); document.addEventListener('keydown', function (e) { if (e.key === 'Escape' || e.keyCode === 27) closeNav(); }); window.addEventListener('resize', function () { if (window.innerWidth >= 901) closeNav(); }); } // ---------------- Yıl/Fiyat aralık değeri: "min:max" -> [min,max] ---------------- function parseRange(v) { if (!v) return null; var parts = String(v).split(':'); var min = parseInt(parts[0], 10), max = parseInt(parts[1], 10); if (isNaN(min) || isNaN(max)) return null; return [min, max]; } function extractYear(specs) { var m = esc(specs).match(/(19|20)\d{2}/); return m ? parseInt(m[0], 10) : null; } function isRental(l) { return !!(l && l.tag === 'Kiralık'); } // ---------------- Kart render (vitrin + araçlar ortak) ---------------- function renderCard(l) { var a = document.createElement('a'); a.href = '/arac/' + encodeURIComponent(l.id || ''); a.className = 'ov-card'; var media = document.createElement('div'); media.className = 'ov-card-media'; if (l.img) { var img = document.createElement('img'); img.className = 'ov-card-img'; img.src = l.img; img.alt = l.title || ''; img.loading = 'lazy'; media.appendChild(img); } else { var ph = document.createElement('div'); ph.className = 'ov-noimg'; ph.textContent = '🚗'; media.appendChild(ph); } var tag = document.createElement('span'); tag.className = 'ov-card-tag' + (l.tag === 'Kiralık' ? ' is-rent' : ''); tag.textContent = l.tag || ''; media.appendChild(tag); a.appendChild(media); var body = document.createElement('div'); body.className = 'ov-card-body'; var loc = document.createElement('div'); loc.className = 'ov-card-loc'; loc.textContent = '◦ ' + (l.area || ''); body.appendChild(loc); var title = document.createElement('h3'); title.className = 'ov-card-title'; title.textContent = l.title || ''; body.appendChild(title); var foot = document.createElement('div'); foot.className = 'ov-card-foot'; var specs = document.createElement('span'); specs.className = 'ov-card-specs'; specs.textContent = l.specs || ''; var price = document.createElement('span'); price.className = 'ov-card-price'; price.textContent = l.price || ''; foot.appendChild(specs); foot.appendChild(price); body.appendChild(foot); a.appendChild(body); return a; } function renderCards(container, list, emptyText) { if (!container) return; clear(container); if (!list.length) { var empty = document.createElement('div'); empty.className = 'ov-empty'; empty.textContent = emptyText || 'Şu anda gösterilecek araç bulunmuyor.'; container.appendChild(empty); return; } for (var i = 0; i < list.length; i++) container.appendChild(renderCard(list[i])); } function showGridError(container) { if (!container) return; clear(container); var err = document.createElement('div'); err.className = 'ov-empty'; err.textContent = 'Araçlar şu anda yüklenemiyor. Lütfen daha sonra tekrar deneyin.'; container.appendChild(err); } // ---------------- Anasayfa: vitrin ---------------- function initHome() { var grid = $('ov-featured-grid'); if (!grid) return; fetch('/api/listings', { credentials: 'same-origin' }) .then(function (r) { return r.json(); }) .then(function (j) { var list = (j && j.ok && Array.isArray(j.listings)) ? j.listings : []; renderCards(grid, list.slice(0, 6)); }) .catch(function () { showGridError(grid); }); } function initHeroSearch() { var form = $('ov-hero-search'); if (!form) return; on(form, 'submit', function (e) { e.preventDefault(); var q = trim(($('ov-hero-q') || {}).value || ''); var yil = ($('ov-hero-yil') || {}).value || ''; var fiyat = ($('ov-hero-fiyat') || {}).value || ''; var params = []; if (q) params.push('q=' + encodeURIComponent(q)); if (yil) params.push('yil=' + encodeURIComponent(yil)); if (fiyat) params.push('fiyat=' + encodeURIComponent(fiyat)); window.location.href = '/araclar' + (params.length ? ('?' + params.join('&')) : ''); }); } // ---------------- Araçlar: liste + filtre + sıralama ---------------- var LST = { all: [], q: '', tag: '', yil: '', fiyat: '', sort: '' }; function applyFilters() { var grid = $('ov-listings-grid'); if (!grid) return; var q = trim(LST.q).toLocaleLowerCase('tr-TR'); var terms = q ? q.split(/\s+/) : []; var yilRange = parseRange(LST.yil); var fiyatRange = parseRange(LST.fiyat); var out = LST.all.filter(function (l) { if (LST.tag && l.tag !== LST.tag) return false; if (terms.length) { var hay = [l.title, l.area, l.specs, l.desc].join(' ').toLocaleLowerCase('tr-TR'); for (var i = 0; i < terms.length; i++) { if (terms[i] && hay.indexOf(terms[i]) === -1) return false; } } if (yilRange) { var year = extractYear(l.specs); if (year !== null && (year < yilRange[0] || year > yilRange[1])) return false; } if (fiyatRange) { // Kiralık ilanların fiyatı AYLIK'tır ("₺28.000 / ay") — satılık fiyat kovalarıyla aynı // ölçekte değildir. Fiyat aralığı seçiliyken kiralıklar listeden çıkarılır (kullanıcı zaten // etiket filtresinden "Kiralık" seçtiyse aralık uygulanmaz). if (isRental(l)) { if (LST.tag !== 'Kiralık') return false; } else { var price = parsePrice(l.price); if (price !== null && (price < fiyatRange[0] || price > fiyatRange[1])) return false; } } return true; }); if (LST.sort === 'asc' || LST.sort === 'desc') { out = out.slice().sort(function (a, b) { // Satılık ve kiralık fiyatlar tek listede sıralanmaz: kiralıklar her zaman sonda gruplanır. var ra = isRental(a) ? 1 : 0, rb = isRental(b) ? 1 : 0; if (ra !== rb) return ra - rb; var pa = parsePrice(a.price), pb = parsePrice(b.price); if (pa === null && pb === null) return 0; if (pa === null) return 1; if (pb === null) return -1; return LST.sort === 'asc' ? pa - pb : pb - pa; }); } renderCards(grid, out, 'Aradığınız kriterlere uygun araç bulunamadı.'); var countEl = $('ov-f-count'); if (countEl) countEl.textContent = out.length + ' araç'; } function initListings() { var grid = $('ov-listings-grid'); if (!grid) return; var params = new URLSearchParams(window.location.search); var qInput = $('ov-f-q'), tagSelect = $('ov-f-tag'), yilSelect = $('ov-f-yil'), fiyatSelect = $('ov-f-fiyat'), sortSelect = $('ov-f-sort'); LST.q = params.get('q') || ''; LST.yil = params.get('yil') || ''; LST.fiyat = params.get('fiyat') || ''; if (qInput) qInput.value = LST.q; if (yilSelect && LST.yil) yilSelect.value = LST.yil; if (fiyatSelect && LST.fiyat) fiyatSelect.value = LST.fiyat; on(qInput, 'input', function () { LST.q = qInput.value || ''; applyFilters(); }); on(tagSelect, 'change', function () { LST.tag = tagSelect.value || ''; applyFilters(); }); on(yilSelect, 'change', function () { LST.yil = yilSelect.value || ''; applyFilters(); }); on(fiyatSelect, 'change', function () { LST.fiyat = fiyatSelect.value || ''; applyFilters(); }); on(sortSelect, 'change', function () { LST.sort = sortSelect.value || ''; applyFilters(); }); fetch('/api/listings', { credentials: 'same-origin' }) .then(function (r) { return r.json(); }) .then(function (j) { if (!j || !j.ok) { showGridError(grid); return; } LST.all = Array.isArray(j.listings) ? j.listings : []; applyFilters(); }) .catch(function () { showGridError(grid); }); } // ---------------- Araç detay ---------------- function specLabel(text) { var t = esc(text).toLocaleLowerCase('tr-TR'); if (/^\d{4}$/.test(trim(text))) return 'Yıl'; if (t.indexOf('km') !== -1) return 'KM'; if (t.indexOf('otomatik') !== -1 || t.indexOf('manuel') !== -1 || t.indexOf('yarı') !== -1 || t.indexOf('vites') !== -1) return 'Vites'; if (t.indexOf('dizel') !== -1 || t.indexOf('benzin') !== -1 || t.indexOf('lpg') !== -1 || t.indexOf('hibrit') !== -1 || t.indexOf('elektrik') !== -1) return 'Yakıt'; return 'Özellik'; } function renderMeta(container, specsStr) { if (!container) return; clear(container); var raw = trim(specsStr); if (!raw) { container.style.display = 'none'; return; } var parts = raw.split('·'); var count = 0; for (var i = 0; i < parts.length; i++) { var t = trim(parts[i]); if (!t) continue; var box = document.createElement('div'); box.className = 'ov-meta-box'; var label = document.createElement('div'); label.className = 'ov-meta-label'; label.textContent = specLabel(t); var val = document.createElement('div'); val.className = 'ov-meta-val'; val.textContent = t; box.appendChild(label); box.appendChild(val); container.appendChild(box); count++; } container.style.display = count ? 'grid' : 'none'; } function renderFeatures(container, headingId, features) { if (!container) return; clear(container); var list = Array.isArray(features) ? features : []; var heading = headingId ? $(headingId) : null; if (!list.length) { container.style.display = 'none'; if (heading) heading.style.display = 'none'; return; } container.style.display = 'grid'; if (heading) heading.style.display = 'block'; for (var i = 0; i < list.length; i++) { var row = document.createElement('div'); row.className = 'ov-feat-item'; var check = document.createElement('span'); check.className = 'ov-feat-check'; check.textContent = '✓'; row.appendChild(check); row.appendChild(document.createTextNode(' ' + esc(list[i]))); container.appendChild(row); } } // Görsel yoksa yerine tonlu-arkaplan+ikon placeholder göster (kırık ikon önleme) function setGalleryImg(imgEl, src, alt) { if (!imgEl) return; var parent = imgEl.parentNode; var ph = parent ? parent.querySelector('.ov-noimg') : null; if (src) { imgEl.src = src; imgEl.alt = alt || ''; imgEl.style.display = ''; if (ph && ph.parentNode) ph.parentNode.removeChild(ph); } else { imgEl.removeAttribute('src'); imgEl.style.display = 'none'; if (!ph && parent) { ph = document.createElement('div'); ph.className = 'ov-noimg'; ph.textContent = '🚗'; parent.appendChild(ph); } } } function renderGallery(images, title) { var mainEl = $('ov-d-img-main'), bEl = $('ov-d-img-b'), cEl = $('ov-d-img-c'); var extraWrap = $('ov-d-gallery-extra'), track = $('ov-d-gallery-track'); var badge = $('ov-d-gallery-badge'), badgeCount = $('ov-d-gallery-count'); var imgs = Array.isArray(images) ? images.filter(Boolean) : []; var main = imgs[0] || '', subB = imgs[1] || imgs[0] || '', subC = imgs[2] || imgs[0] || ''; setGalleryImg(mainEl, main, title); setGalleryImg(bEl, subB, title); setGalleryImg(cEl, subC, title); // EVRENSEL LIGHTBOX — motorun enjekte ettiği window.vsGallery.open(images, index) ile tam // ekran büyütme + ‹ › slider (tüm imgs dizisini gezer). Yoksa sessizce yok say (kendini koru). function openGal(idx) { try { if (window.vsGallery) window.vsGallery.open(imgs, idx); } catch (e) {} } if (imgs[0]) { var mainIdx = 0, bIdx = imgs.length > 1 ? 1 : 0, cIdx = imgs.length > 2 ? 2 : 0; if (mainEl) { mainEl.style.cursor = 'pointer'; on(mainEl, 'click', function () { openGal(mainIdx); }); } if (bEl) { bEl.style.cursor = 'pointer'; on(bEl, 'click', function () { openGal(bIdx); }); } if (cEl) { cEl.style.cursor = 'pointer'; on(cEl, 'click', function () { openGal(cIdx); }); } if (badge) { if (imgs.length > 1) { if (badgeCount) badgeCount.textContent = imgs.length + ' fotoğraf'; badge.style.display = 'flex'; } else { badge.style.display = 'none'; } } } else if (badge) { badge.style.display = 'none'; } if (extraWrap && track) { clear(track); if (imgs.length > 3) { extraWrap.style.display = 'block'; for (var i = 3; i < imgs.length; i++) { (function (src, idx) { var thumb = document.createElement('div'); thumb.className = 'ov-gallery-thumb'; var im = document.createElement('img'); im.src = src; im.alt = title + ' ' + (idx + 1); thumb.appendChild(im); on(thumb, 'click', function () { openGal(idx); }); track.appendChild(thumb); })(imgs[i], i); } } else { extraWrap.style.display = 'none'; } } } function showDetailNotFound() { var loading = $('ov-d-loading'); if (loading) loading.style.display = 'none'; var body = $('ov-d-body'); if (body) body.style.display = 'none'; var nf = $('ov-d-notfound'); if (nf) nf.style.display = 'block'; } function applyListing(listing) { if (listing.title) { try { document.title = listing.title + ' — OtoVitrin Mavi'; } catch (e) {} } setText('ov-d-crumb-title', listing.title); setText('ov-d-tag', listing.tag); setText('ov-d-title', listing.title); setText('ov-d-loc', listing.area ? ('◦ ' + listing.area) : ''); setText('ov-d-price', listing.price); setText('ov-d-desc', listing.desc || 'Bu araç için henüz açıklama eklenmedi.'); renderMeta($('ov-d-meta'), listing.specs); renderFeatures($('ov-d-features'), 'ov-d-features-h', listing.features); renderGallery(listing.images && listing.images.length ? listing.images : [listing.img], listing.title || 'OtoVitrin Mavi'); var loading = $('ov-d-loading'); if (loading) loading.style.display = 'none'; var nf = $('ov-d-notfound'); if (nf) nf.style.display = 'none'; var body = $('ov-d-body'); if (body) body.style.display = 'block'; initPhoneLinks(); } function initDetail() { var root = $('ov-detail-root'); if (!root) return; var path = window.location.pathname; var leadPageEl = $('ov-lead-page'); if (leadPageEl) leadPageEl.setAttribute('value', path); var leadBackEl = $('ov-lead-back'); if (leadBackEl) leadBackEl.setAttribute('value', path); var m = path.match(/\/arac\/([^\/?#]+)/); var id = m ? decodeURIComponent(m[1]) : ''; if (!id) { showDetailNotFound(); return; } function tryFromList() { fetch('/api/listings', { credentials: 'same-origin' }) .then(function (r) { return r.json(); }) .then(function (j) { var list = (j && j.ok && Array.isArray(j.listings)) ? j.listings : []; var found = null; for (var i = 0; i < list.length; i++) { if (list[i] && list[i].id === id) { found = list[i]; break; } } if (found) applyListing(found); else showDetailNotFound(); }) .catch(showDetailNotFound); } fetch('/api/listings/' + encodeURIComponent(id), { credentials: 'same-origin' }) .then(function (r) { if (r.status === 404) { showDetailNotFound(); return null; } return r.json(); }) .then(function (j) { if (j === null) return; if (j && j.ok && j.listing) applyListing(j.listing); else tryFromList(); }) .catch(tryFromList); } // ---------------- Formlar — POST /api/form (multipart); 2xx/3xx/redirected başarı sayılır ---------------- function wireLeadForm(formId, msgId, successText) { var form = $(formId); if (!form) return; var msg = $(msgId); on(form, 'submit', function (e) { e.preventDefault(); var btn = form.querySelector('button[type="submit"]'); if (btn) btn.disabled = true; if (msg) { msg.className = 'ov-form-msg'; msg.textContent = ''; } var fd = new FormData(form); fetch('/api/form', { method: 'POST', body: fd }) .then(function (res) { var success = res.ok || res.status === 0 || res.redirected || res.type === 'opaqueredirect' || (res.status >= 200 && res.status < 400); if (!success) throw new Error('form-failed'); if (msg) { msg.className = 'ov-form-msg is-ok'; msg.textContent = successText; } form.reset(); }) .catch(function () { if (msg) { msg.className = 'ov-form-msg is-err'; msg.textContent = 'Bir şeyler ters gitti. Lütfen tekrar deneyin ya da bizi telefonla arayın.'; } }) .then(function () { if (btn) btn.disabled = false; }); }); } // ---------------- İletişim haritası: adres URL-encode edilerek gömülür, adres yoksa gizli kalır ---------------- function initOfficeMap() { var box = $('ov-office-map'); if (!box) return; var adres = trim(box.getAttribute('data-adres') || ''); if (!adres) { box.style.display = 'none'; return; } var frame = document.createElement('iframe'); frame.src = 'https://maps.google.com/maps?q=' + encodeURIComponent(adres) + '&z=15&output=embed'; frame.width = '100%'; frame.height = '190'; frame.style.border = '0'; frame.loading = 'lazy'; frame.referrerPolicy = 'no-referrer-when-downgrade'; frame.title = adres + ' — harita'; box.appendChild(frame); box.style.display = ''; } initBrand(); initPhoneLinks(); initMobileNav(); initOfficeMap(); initHeroSearch(); initHome(); initListings(); initDetail(); wireLeadForm('ov-contact-form', 'ov-contact-msg', 'Teşekkürler! Mesajınız iletildi, danışmanımız en kısa sürede sizinle iletişime geçecek.'); wireLeadForm('ov-lead-form', 'ov-lead-msg', 'Teşekkürler! Talebiniz alındı, danışmanımız sizinle iletişime geçecek.'); })();

Tüm Araçlar