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

app/[locale]/admin/widget-partners/[id]/WidgetPartnerForm.tsx

@@ -30,14 +30,21 @@ export default function WidgetPartnerForm({
 
   const isEditing = !!partner
 
+  const [isHidden, setIsHidden] = useState(partner ? Boolean((partner as any).isHidden) : false)
+  const [selectedNeighborhood, setSelectedNeighborhood] = useState(partner?.neighborhoodSlug || '')
+
   const embedCode = partner
-    ? `<iframe 
-  src="https://marmarislocal.com/tr/widget${partner.neighborhoodSlug ? `?neighborhood=${partner.neighborhoodSlug}` : ''}" 
-  width="100%" 
-  height="600" 
-  style="border:none; border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.1);"
-  title="Marmaris Local Önerileri"
-></iframe>`
+    ? [
+        '<!-- Marmaris Local Widget -->',
+        '<div',
+        '  data-marmaris-widget',
+        `  data-neighborhood="${selectedNeighborhood}"`,
+        '  data-limit="3"',
+        '  data-lang="tr"',
+        isHidden ? '  style="display:none;"' : '',
+        '></div>',
+        '<script src="https://marmarislocal.com/widget.js" async></script>'
+      ].filter(Boolean).join('\n')
     : ''
 
   const handleCopy = () => {
@@ -107,7 +114,7 @@ export default function WidgetPartnerForm({
           <p className="text-xs text-ink/70 mb-4">
             Aşağıdaki kodu kopyalayarak partnerin web sitesine yerleştirin. Bu kod, sitenizden backlink almayı sağlar.
           </p>
-          <pre className="bg-stone-deep/80 text-paper p-4 rounded-xl text-xs overflow-x-auto font-mono whitespace-pre-wrap">
+          <pre className="bg-pine text-white p-4 rounded-xl text-xs overflow-x-auto font-mono whitespace-pre-wrap">
             {embedCode}
           </pre>
         </div>
@@ -155,7 +162,8 @@ export default function WidgetPartnerForm({
             <select
               id="neighborhoodSlug"
               name="neighborhoodSlug"
-              defaultValue={partner?.neighborhoodSlug || ''}
+              value={selectedNeighborhood}
+              onChange={(e) => setSelectedNeighborhood(e.target.value)}
               className="w-full bg-stone/30 border border-pine/10 rounded-xl px-4 py-2.5 text-sm focus:outline-none focus:border-turquoise focus:ring-1 focus:ring-turquoise transition-all"
             >
               <option value="">Tüm Marmaris (Karışık)</option>
@@ -166,7 +174,7 @@ export default function WidgetPartnerForm({
             <p className="text-[10px] text-shutter mt-1">Eğer seçilirse widget sadece o bölgedeki mekanları gösterir.</p>
           </div>
 
-          <div className="flex flex-col justify-center pt-6">
+          <div className="flex flex-col justify-center pt-6 space-y-4">
             <label className="flex items-center gap-3 cursor-pointer group">
               <div className="relative">
                 <input 
@@ -184,6 +192,25 @@ export default function WidgetPartnerForm({
                 <span className="text-[10px] text-shutter">Bu widget yayında mı?</span>
               </div>
             </label>
+
+            <label className="flex items-center gap-3 cursor-pointer group">
+              <div className="relative">
+                <input 
+                  type="checkbox" 
+                  name="isHidden" 
+                  value="true" 
+                  checked={isHidden}
+                  onChange={(e) => setIsHidden(e.target.checked)}
+                  className="peer sr-only" 
+                />
+                <div className="w-11 h-6 bg-stone-deep/20 rounded-full peer peer-checked:bg-pine transition-colors duration-300"></div>
+                <div className="absolute top-1 left-1 bg-white w-4 h-4 rounded-full transition-transform duration-300 peer-checked:translate-x-5 shadow-sm"></div>
+              </div>
+              <div>
+                <span className="text-sm font-bold text-pine block group-hover:text-pine/80 transition-colors">Gizli Widget</span>
+                <span className="text-[10px] text-shutter">Indexlensin ama görünmesin</span>
+              </div>
+            </label>
           </div>
         </div>
 

app/actions.ts

@@ -652,6 +652,7 @@ export async function saveWidgetPartnerAction(formData: FormData) {
   const url = formData.get('url') as string
   const neighborhoodSlug = formData.get('neighborhoodSlug') as string | null
   const isActive = formData.get('isActive') === 'true'
+  const isHidden = formData.get('isHidden') === 'true'
 
   if (!name || !url) {
     return { error: 'Lütfen zorunlu alanları doldurun.' }
@@ -661,7 +662,8 @@ export async function saveWidgetPartnerAction(formData: FormData) {
     name,
     url,
     neighborhoodSlug: neighborhoodSlug || null,
-    isActive
+    isActive,
+    isHidden
   }
 
   try {

app/api/widget/nearby/route.ts

@@ -4,29 +4,33 @@ import { mockDb } from '@/lib/mockDb'
 export async function GET(req: NextRequest) {
   const { searchParams } = new URL(req.url)
   const neighborhoodSlug = searchParams.get('neighborhood')
+  const categorySlug = searchParams.get('category')
 
-  if (!neighborhoodSlug) {
-    return NextResponse.json({ error: 'Neighborhood is required' }, { status: 400 })
-  }
+  const filters: Parameters<typeof mockDb.getListings>[0] = {}
 
-  // Get neighborhood
+  // Neighborhood filtresi (opsiyonel - boşsa tüm Marmaris)
+  if (neighborhoodSlug) {
     const neighborhood = await mockDb.getNeighborhoodBySlug(neighborhoodSlug)
-  if (!neighborhood) {
-    return NextResponse.json({ listings: [] }, {
-      headers: {
-        'Access-Control-Allow-Origin': '*',
-        'Access-Control-Allow-Methods': 'GET, OPTIONS',
+    if (neighborhood) {
+      filters.neighborhoodId = neighborhood.id
     }
-    })
   }
 
-  // Get listings in that neighborhood
-  const listings = await mockDb.getListings({
-    neighborhoodId: neighborhood.id
-  })
+  // Category filtresi (opsiyonel)
+  if (categorySlug) {
+    const categories = await mockDb.getCategories()
+    const cat = categories.find(c => c.slug === categorySlug)
+    if (cat) {
+      filters.categoryId = cat.id
+    }
+  }
 
-  // Format response matching widget needs
-  const formattedListings = listings.map(l => ({
+  const listings = await mockDb.getListings(filters)
+
+  // Shuffle for variety, limit to 5
+  const shuffled = listings.sort(() => 0.5 - Math.random()).slice(0, 5)
+
+  const formattedListings = shuffled.map(l => ({
     id: l.id,
     name: l.nameTr,
     nameEn: l.nameEn,
@@ -36,8 +40,10 @@ export async function GET(req: NextRequest) {
     categoryName: l.category?.nameTr || '',
     neighborhoodName: l.neighborhood?.nameTr || '',
     rating: l.rating,
-    priceSymbols: '₺'.repeat(l.priceRange),
-    coverImage: l.images && l.images.length > 0 ? l.images[0].url : 'https://images.unsplash.com/photo-1555396273-367ea4eb4db5?w=800&auto=format&fit=crop&q=80'
+    priceSymbols: '₺'.repeat(l.priceRange || 1),
+    coverImage: l.images && l.images.length > 0
+      ? l.images[0].url
+      : 'https://images.unsplash.com/photo-1555396273-367ea4eb4db5?w=800&auto=format&fit=crop&q=80'
   }))
 
   return NextResponse.json({ listings: formattedListings }, {

lib/mockDb.ts

@@ -133,6 +133,7 @@ export interface WidgetPartner {
   url: string
   neighborhoodSlug: string | null
   isActive: boolean
+  isHidden: boolean
   createdAt: Date
   updatedAt: Date
 }

prisma/schema.prisma

@@ -270,6 +270,7 @@ model WidgetPartner {
   url              String
   neighborhoodSlug String?
   isActive         Boolean  @default(true)
+  isHidden         Boolean  @default(false)
   createdAt        DateTime @default(now())
   updatedAt        DateTime @updatedAt
 }

public/test-widget.html

@@ -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 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>
 
-    <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>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

@@ -1,224 +1,92 @@
 (function () {
-  const currentScript = document.currentScript;
-  if (!currentScript) return;
+  const API_BASE = 'https://marmarislocal.com';
 
-  const neighborhood = currentScript.getAttribute('data-neighborhood') || '';
-  const theme = currentScript.getAttribute('data-theme') || 'light';
+  // Sayfadaki tüm widget container'larını bul
+  const containers = document.querySelectorAll('[data-marmaris-widget]');
 
-  // Extract base URL of the running script dynamically
-  const scriptUrl = currentScript.src;
-  const baseUrl = new URL(scriptUrl).origin;
+  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';
 
-  if (!neighborhood) {
-    console.error('Marmaris Local Widget: data-neighborhood parameter is missing.');
-    return;
-  }
+    container.innerHTML = '<div style="font-family:sans-serif;padding:16px;opacity:0.4;font-size:13px;">Yükleniyor...</div>';
 
-  // Create widget container element
-  const container = document.createElement('div');
-  container.className = 'marmaris-local-widget-wrapper';
-  currentScript.parentNode.insertBefore(container, currentScript);
+    var params = new URLSearchParams();
+    if (neighborhood) params.set('neighborhood', neighborhood);
+    if (category) params.set('category', category);
 
-  // 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);
-
-  // 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;
-      }
-
-      // 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;
+    fetch(API_BASE + '/api/widget/nearby?' + params)
+      .then(function (res) {
+        if (!res.ok) throw new Error('fetch failed');
+        return res.json();
       })
-    .catch(err => {
-      console.error('Marmaris Local Widget load error:', err);
-      container.style.display = 'none';
+      .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;
+  }
+
+  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;
+
+    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) : '');
+
+      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('');
+
+    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>';
+  }
 })();