ayrisdev/marmarislocal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: widget partner system with JS embed, isHidden toggle, category/neighborhood filters

Browse Source
This commit is contained in:
AyrisAI
2026-07-13 15:00:46 +03:00
parent b44acc2678
commit 1d98409385
7 changed files with 177 additions and 298 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/test-widget.html
+25 -51
View File
@@ -3,63 +3,37 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Marmaris Local - Widget Test Sayfası</title>
<title>Marmaris Local Widget Test</title>
<style>
body {
background-color: #FBFAF6;
color: #123238;
font-family: -apple-system, BlinkMacSystemFont, sans-serif;
padding: 40px 20px;
margin: 0;
}
.container {
max-width: 800px;
margin: 0 auto;
}
h1 {
font-size: 24px;
font-weight: 800;
border-bottom: 2px dashed #12323815;
padding-bottom: 12px;
margin-bottom: 24px;
}
h2 {
font-size: 16px;
font-weight: 700;
margin-top: 30px;
margin-bottom: 10px;
text-transform: uppercase;
font-size: 11px;
letter-spacing: 0.05em;
color: #D23B68;
}
.demo-box {
background: white;
border: 1px solid #12323810;
border-radius: 12px;
padding: 20px;
margin-bottom: 30px;
}
body { font-family: sans-serif; max-width: 900px; margin: 40px auto; padding: 0 20px; background: #f0f0f0; }
h1 { font-size: 18px; color: #333; }
.section { background: white; padding: 24px; border-radius: 12px; margin-bottom: 24px; }
code { background: #1e1e1e; color: #e0e0e0; padding: 12px 16px; border-radius: 8px; display: block; font-family: monospace; font-size: 13px; white-space: pre; margin: 12px 0; }
</style>
</head>
<body>
<h1>🧪 Marmaris Local Widget Test Sayfası</h1>
<div class="container">
<h1>marmaris local widget demo</h1>
<p>Bu sayfa, Muğla Dijital Medya ortak sitelerine yerleştirilecek olan <strong>bölgesel öneri widget'ının</strong> önizlemesini test etmek amacıyla oluşturulmuştur.</p>
<h2>1. Açık Tema Demo (data-neighborhood="yat-limani")</h2>
<div class="demo-box">
<!-- Widget Script Embed -->
<script src="./widget.js" data-neighborhood="yat-limani" data-theme="light"></script>
</div>
<h2>2. Koyu Tema Demo (data-neighborhood="yat-limani" data-theme="dark")</h2>
<div class="demo-box" style="background-color: #1a1a1a;">
<!-- Widget Script Embed -->
<script src="./widget.js" data-neighborhood="yat-limani" data-theme="dark"></script>
</div>
<div class="section">
<h2>Akyaka Bölgesi — Light Tema</h2>
<code>&lt;div data-marmaris-widget="akyaka" data-limit="3"&gt;&lt;/div&gt;
&lt;script src="/widget.js" async&gt;&lt;/script&gt;</code>
<div data-marmaris-widget="akyaka" data-limit="3"></div>
</div>
<div class="section">
<h2>Marmaris — Dark Tema</h2>
<code>&lt;div data-marmaris-widget="marmaris" data-theme="dark" data-limit="3"&gt;&lt;/div&gt;</code>
<div data-marmaris-widget="marmaris" data-theme="dark" data-limit="3"></div>
</div>
<div class="section">
<h2>Gizli Widget (display:none) — Sadece indexlenir</h2>
<code>&lt;div data-marmaris-widget="marmaris" style="display:none"&gt;&lt;/div&gt;</code>
<div data-marmaris-widget="marmaris" style="display:none"></div>
<p style="color:#888;font-size:13px">⬆️ Bu div gizli - içerik yüklenir ama kullanıcı görmez</p>
</div>
<script src="/widget.js"></script>
</body>
</html>
public/widget.js
+84 -216
View File
@@ -1,224 +1,92 @@
(function() {
const currentScript = document.currentScript;
if (!currentScript) return;
(function () {
const API_BASE = 'https://marmarislocal.com';
const neighborhood = currentScript.getAttribute('data-neighborhood') || '';
const theme = currentScript.getAttribute('data-theme') || 'light';
// Extract base URL of the running script dynamically
const scriptUrl = currentScript.src;
const baseUrl = new URL(scriptUrl).origin;
// Sayfadaki tüm widget container'larını bul
const containers = document.querySelectorAll('[data-marmaris-widget]');
if (!neighborhood) {
console.error('Marmaris Local Widget: data-neighborhood parameter is missing.');
return;
containers.forEach(function (container) {
// data-marmaris-widget = marker (boolean), data-neighborhood = bölge slug (opsiyonel)
const neighborhood = container.dataset.neighborhood || '';
const category = container.dataset.category || '';
const limit = parseInt(container.dataset.limit || '3', 10);
const lang = container.dataset.lang || document.documentElement.lang || 'tr';
container.innerHTML = '<div style="font-family:sans-serif;padding:16px;opacity:0.4;font-size:13px;">Yükleniyor...</div>';
var params = new URLSearchParams();
if (neighborhood) params.set('neighborhood', neighborhood);
if (category) params.set('category', category);
fetch(API_BASE + '/api/widget/nearby?' + params)
.then(function (res) {
if (!res.ok) throw new Error('fetch failed');
return res.json();
})
.then(function (data) {
// API { listings: [...] } formatında dönüyor
var items = (data.listings || []).slice(0, limit);
if (!items || items.length === 0) {
container.innerHTML = '';
return;
}
render(container, items, lang, neighborhood);
})
.catch(function () {
// Sessizce gizle — kırık widget partner sitesinde kötü görünür
container.innerHTML = '';
});
});
function getName(item, lang) {
if (lang === 'en' && item.nameEn) return item.nameEn;
if (lang === 'ru' && item.nameRu) return item.nameRu;
return item.name;
}
// Create widget container element
const container = document.createElement('div');
container.className = 'marmaris-local-widget-wrapper';
currentScript.parentNode.insertBefore(container, currentScript);
function render(container, items, lang, neighborhood) {
var labels = {
tr: { title: 'Bölgede Öneriler', by: 'Marmaris Local tarafından' },
en: { title: 'Recommended Nearby', by: 'by Marmaris Local' },
ru: { title: 'Рекомендации поблизости', by: 'от Marmaris Local' }
};
var t = labels[lang] || labels.tr;
// Inject CSS Styles
const style = document.createElement('style');
style.textContent = `
.marmaris-local-widget-wrapper {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
border: 1px solid ${theme === 'dark' ? '#254449' : '#12323815'};
background-color: ${theme === 'dark' ? '#123238' : '#FBFAF6'};
color: ${theme === 'dark' ? '#FBFAF6' : '#123238'};
border-radius: 16px;
padding: 20px;
box-sizing: border-box;
max-width: 100%;
margin: 15px 0;
box-shadow: 0 4px 12px rgba(18, 50, 56, 0.04);
}
.marmaris-local-widget-header {
margin-bottom: 16px;
display: flex;
align-items: center;
justify-content: space-between;
}
.marmaris-local-widget-header h4 {
margin: 0;
font-size: 14px;
font-weight: 800;
letter-spacing: -0.02em;
text-transform: lowercase;
color: ${theme === 'dark' ? '#FBFAF6' : '#123238'};
}
.marmaris-local-widget-header h4 span {
color: #39C3C3;
}
.marmaris-local-widget-header .neighborhood-badge {
font-size: 10px;
font-weight: 700;
font-family: monospace;
text-transform: uppercase;
letter-spacing: 0.05em;
color: #D23B68;
background-color: rgba(210, 59, 104, 0.06);
padding: 3px 8px;
border-radius: 99px;
border: 1px solid rgba(210, 59, 104, 0.1);
}
.marmaris-local-widget-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 16px;
margin-bottom: 14px;
}
.marmaris-local-widget-card {
display: flex;
flex-direction: column;
text-decoration: none;
background: ${theme === 'dark' ? '#254449' : '#FFFFFF'};
border: 1px solid ${theme === 'dark' ? '#ffffff10' : '#12323808'};
border-radius: 12px;
overflow: hidden;
transition: all 0.2s ease-in-out;
box-sizing: border-box;
}
.marmaris-local-widget-card:hover {
transform: translateY(-2px);
border-color: rgba(57, 195, 195, 0.35);
box-shadow: 0 4px 10px rgba(18, 50, 56, 0.06);
}
.marmaris-local-widget-card-image {
aspect-ratio: 16 / 10;
width: 100%;
background: #12323810;
position: relative;
overflow: hidden;
}
.marmaris-local-widget-card-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.marmaris-local-widget-card:hover .marmaris-local-widget-card-image img {
transform: scale(1.03);
}
.marmaris-local-widget-card-content {
padding: 12px;
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.marmaris-local-widget-card-category {
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
color: #D23B68;
margin-bottom: 4px;
}
.marmaris-local-widget-card-title {
font-size: 13px;
font-weight: 700;
color: ${theme === 'dark' ? '#FBFAF6' : '#123238'};
margin: 0 0 6px 0;
line-height: 1.25;
text-transform: lowercase;
}
.marmaris-local-widget-card-footer {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 11px;
font-family: monospace;
color: ${theme === 'dark' ? '#FBFAF680' : '#12323865'};
border-top: 1px dashed ${theme === 'dark' ? '#ffffff10' : '#12323808'};
padding-top: 8px;
margin-top: 8px;
}
.marmaris-local-widget-card-footer .stars {
color: #FFB020;
font-weight: bold;
}
.marmaris-local-widget-card-footer .price {
color: ${theme === 'dark' ? '#FBFAF6' : '#123238'};
font-weight: bold;
}
.marmaris-local-widget-footer {
display: flex;
align-items: center;
justify-content: space-between;
border-top: 1px solid ${theme === 'dark' ? '#ffffff10' : '#12323810'};
padding-top: 12px;
font-size: 10px;
font-weight: 600;
color: ${theme === 'dark' ? '#FBFAF650' : '#12323850'};
}
.marmaris-local-widget-footer a {
color: inherit;
text-decoration: underline;
transition: color 0.15s;
}
.marmaris-local-widget-footer a:hover {
color: #39C3C3;
}
`;
document.head.appendChild(style);
var cards = items.map(function (item) {
var href = API_BASE + '/tr/' + item.categorySlug + '/' + item.slug + '?utm_source=widget&utm_medium=partner';
var name = getName(item, lang);
var img = item.coverImage
? '<img src="' + item.coverImage + '" alt="" style="width:44px;height:44px;border-radius:8px;object-fit:cover;flex-shrink:0;">'
: '';
var meta = item.categoryName + (item.rating ? ' · ★ ' + Number(item.rating).toFixed(1) : '');
// Fetch nearby approved listings
fetch(`${baseUrl}/api/widget/nearby?neighborhood=${encodeURIComponent(neighborhood)}`)
.then(res => res.json())
.then(data => {
const listings = data.listings || [];
if (listings.length === 0) {
container.style.display = 'none';
return;
}
return '<a href="' + href + '" target="_blank" rel="noopener"'
+ ' style="display:flex;gap:10px;align-items:center;text-decoration:none;color:inherit;padding:8px;border-radius:10px;transition:background .15s;"'
+ ' onmouseover="this.style.background=\'rgba(46,156,154,0.08)\'"'
+ ' onmouseout="this.style.background=\'transparent\'">'
+ img
+ '<div style="min-width:0;">'
+ '<div style="font-weight:600;font-size:13.5px;color:#123238;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">' + name + '</div>'
+ '<div style="font-size:12px;color:#4F7C93;margin-top:2px;">' + meta + '</div>'
+ '</div>'
+ '</a>';
}).join('');
// Render Header
let html = `
<div class="marmaris-local-widget-header">
<h4>yakında <span>nerede yenir?</span></h4>
<span class="neighborhood-badge">${neighborhood}</span>
</div>
<div class="marmaris-local-widget-grid">
`;
// Render Cards
listings.slice(0, 3).forEach(item => {
const itemUrl = `${baseUrl}/${item.categorySlug}/${item.slug}`;
html += `
<a href="${itemUrl}" target="_blank" class="marmaris-local-widget-card">
<div class="marmaris-local-widget-card-image">
<img src="${item.coverImage}" alt="${item.name}">
</div>
<div class="marmaris-local-widget-card-content">
<div>
<div class="marmaris-local-widget-card-category">${item.categoryName}</div>
<h5 class="marmaris-local-widget-card-title">${item.name.toLowerCase()}</h5>
</div>
<div class="marmaris-local-widget-card-footer">
<span class="price">${item.priceSymbols}</span>
${item.rating ? `<span class="stars">★ ${item.rating.toFixed(1)}</span>` : ''}
</div>
</div>
</a>
`;
});
// Render Footer Stamp (Mandatory visibility for search quality guidelines)
html += `
</div>
<div class="marmaris-local-widget-footer">
<span>yerel öneriler</span>
<span>detaylar <a href="${baseUrl}" target="_blank">marmaris local</a>\\'de</span>
</div>
`;
container.innerHTML = html;
})
.catch(err => {
console.error('Marmaris Local Widget load error:', err);
container.style.display = 'none';
});
container.innerHTML = '<div style="'
+ 'font-family:-apple-system,BlinkMacSystemFont,\'Segoe UI\',Roboto,Helvetica,Arial,sans-serif;'
+ 'border:1px solid rgba(18,50,56,0.1);'
+ 'border-radius:14px;'
+ 'padding:18px;'
+ 'background:#FBFAF6;'
+ 'max-width:100%;'
+ 'box-sizing:border-box;'
+ '">'
+ '<div style="display:flex;justify-content:space-between;align-items:baseline;margin-bottom:14px;">'
+ '<h3 style="margin:0;font-size:15px;font-weight:700;color:#123238;">' + t.title + '</h3>'
+ '<a href="' + API_BASE + '/tr" target="_blank" rel="noopener" style="font-size:11px;color:#2E9C9A;text-decoration:none;">' + t.by + '</a>'
+ '</div>'
+ '<div style="display:flex;flex-direction:column;gap:4px;">'
+ cards
+ '</div>'
+ '</div>';
}
})();