Dynamic Tunnel CMS

Toko Terbaru

Semua Toko

Tambah Toko Baru

Isi data toko. Meta title & description akan otomatis di-generate dari template yang sudah dikonfigurasi.

Nama Toko

/toko/toko123

Kategori

Custom Meta Title (opsional, override template)

Jika dikosongkan, title akan pakai template dari Pengaturan

Custom Meta Description (opsional, override template)

Jika dikosongkan, deskripsi akan di-generate dari template di Pengaturan

Status

Live Preview

Preview Google SERP akan muncul secara real-time saat kamu mengetik nama toko.

Pilih Toko

Google Desktop

Pilih toko untuk melihat preview

Meta Tags yang Di-inject

Pilih toko terlebih dahulu

Pilih Toko

Pilih toko terlebih dahulu

https://domainsaya.com/toko/...

Pilih toko untuk melihat halaman preview

Belum ada toko yang ditambahkan

Daftar URL

Semua Meta Tags — Siap Deploy

Belum ada toko yang ditambahkan

Domain Utama

Domain yang akan digunakan di semua meta tags dan sitemap.

Tanpa https:// — cukup nama domain saja

Template Meta Title

Gunakan variabel di bawah untuk membuat template dinamis. Variabel akan di-replace dengan data toko.

Template Title

{nama_toko} {kategori} {domain}

Template Meta Description

Template untuk meta description yang unik per toko.

Template Description

{nama_toko} {kategori} {domain}

Pengaturan Tambahan

Konfigurasi perilaku index dan routing.

Path Prefix

Contoh: toko akan menghasilkan URL /toko/toko123

Default Priority Sitemap

Danger Zone

Hapus semua data toko. Tindakan ini tidak bisa dibatalkan.

`); }); return blocks.join('\n\n'); } function renderExportAll() { document.getElementById('allMetaTagsCode').textContent = generateAllMetaHtml(); } function copyAllMetaTags() { const code = document.getElementById('allMetaTagsCode').textContent; if (!code || code === 'Belum ada toko yang ditambahkan' || code === 'Tidak ada toko dengan status Aktif') { showToast('Tidak ada meta tags untuk disalin', 'info'); return; } copyToClipboard(code, `${getStores().filter(s => s.status === 'active').length} meta tags berhasil disalin`); } function downloadAllMetaTags() { const code = document.getElementById('allMetaTagsCode').textContent; if (!code || code === 'Belum ada toko yang ditambahkan' || code === 'Tidak ada toko dengan status Aktif') { showToast('Tidak ada meta tags untuk didownload', 'info'); return; } const blob = new Blob([code], { type: 'text/html' }); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = 'meta-tags.html'; a.click(); URL.revokeObjectURL(url); showToast('meta-tags.html berhasil didownload', 'success'); } function copyNginxRules() { const stores = getStores(); const settings = getSettings(); const activeStores = stores.filter(s => s.status === 'active'); if (activeStores.length === 0) { showToast('Tidak ada toko aktif untuk generate rules', 'info'); return; } let rules = []; activeStores.forEach(s => { rules.push(`# ${s.name} → ${getStoreUrl(s, settings)}`); rules.push(`location = /${settings.pathPrefix}/${s.slug} {`); rules.push(` # Meta tags diinject oleh backend berdasarkan slug`); rules.push(` include /etc/nginx/meta-templates.conf;`); rules.push(`}`); }); copyToClipboard(rules.join('\n'), 'Nginx rules berhasil disalin'); } // ============================ function insertVar(inputId, variable) { const input = document.getElementById(inputId); const start = input.selectionStart; const end = input.selectionEnd; const value = input.value; input.value = value.substring(0, start) + variable + value.substring(end); input.focus(); input.setSelectionRange(start + variable.length, start + variable.length); saveSettings(); renderSerpPreviewFromSettings(); } function clearAllData() { if (getStores().length === 0) { showToast('Tidak ada data untuk dihapus', 'info'); return; } const btn = event.target.closest('button'); if (btn.dataset.confirming === 'true') return; // already in countdown btn.dataset.confirming = 'true'; const origText = btn.innerHTML; let count = 3; btn.innerHTML = ` Hapus dalam ${count}...`; showToast('Klik sekali lagi untuk mengonfirmasi', 'error'); const interval = setInterval(() => { count--; if (count <= 0) { clearInterval(interval); btn.innerHTML = origText; btn.dataset.confirming = 'false'; } else { btn.innerHTML = ` Hapus dalam ${count}...`; } }, 1000); btn._confirmHandler = async function() { clearInterval(interval); try { await apiCall('DELETE', '/stores'); showToast('Semua data toko berhasil dihapus', 'success'); await refreshStores(); // refresh } catch(err) { showToast(err.message || 'Gagal menghapus', 'error'); } btn.innerHTML = origText; btn.dataset.confirming = 'false'; renderDashboard(); btn.removeEventListener('click', btn._confirmHandler); }; btn.addEventListener('click', btn._confirmHandler, { once: true }); } // ============================ // UTILITAS // ============================ function escapeHtml(str) { const div = document.createElement('div'); div.textContent = str; return div.innerHTML; } function truncate(str, len) { if (str.length <= len) return str; return str.substring(0, len) + '...'; } function copyToClipboard(text, message) { navigator.clipboard.writeText(text).then(() => { showToast(message || 'Berhasil disalin', 'success'); }).catch(() => { // Fallback const ta = document.createElement('textarea'); ta.value = text; document.body.appendChild(ta); ta.select(); document.execCommand('copy'); document.body.removeChild(ta); showToast(message || 'Berhasil disalin', 'success'); }); } function showToast(message, type = 'info') { const container = document.getElementById('toastContainer'); const icons = { success: 'fa-check-circle', error: 'fa-exclamation-circle', info: 'fa-info-circle' }; const toast = document.createElement('div'); toast.className = `toast ${type}`; toast.innerHTML = ` ${message}`; container.appendChild(toast); setTimeout(() => { toast.classList.add('removing'); setTimeout(() => toast.remove(), 300); }, 3000); } // ============================ // INIT // ============================ async function init() { // Load from API await refreshStores(); await fetchSettings(); loadSettingsToForm(); renderDashboard(); document.getElementById('storeCount').textContent = _storesCache.length; } init();