Kelola Landing Page

Simpan lokal = tersimpan di browser (aman saat refresh). Export = HTML standalone siap tempel di VKios.

Tambah Produk ke Landing

Tips: badge CPU/RAM/Storage otomatis ditebak dari Nama/Spek. Bisa diketik jelas (mis. “16GB 512GB SSD”).

Daftar Produk Diposting

Drag ikon ⇅ untuk mengurutkan.

Preview Landing (live)

function render(){ const box = $('#list'); box.innerHTML=''; if(PRODUCTS.length===0){ const p=document.createElement('div'); p.className='muted'; p.textContent='Belum ada produk.'; box.appendChild(p); return; } PRODUCTS.forEach((p,idx)=>{ const el=document.createElement('div'); el.className='item'; el.draggable=true; el.innerHTML = `

⇅

${p.sku||'-'} ${p.label?`${p.label}`:''}

${p.name||''}

${p.spec||''}

${p.price||''}

`; box.appendChild(el); // drag & drop reorder el.addEventListener('dragstart', e=>{ e.dataTransfer.setData('text/plain', idx); }); el.addEventListener('dragover', e=>{ e.preventDefault(); el.style.outline='2px dashed #2b3b59'; }); el.addEventListener('dragleave', ()=>{ el.style.outline=''; }); el.addEventListener('drop', e=>{ e.preventDefault(); el.style.outline=''; const from = parseInt(e.dataTransfer.getData('text/plain'),10); const to = idx; if(!isNaN(from) && from!==to){ const [row] = PRODUCTS.splice(from,1); PRODUCTS.splice(to,0,row); render(); saveLocal(); } }); }); // bind hapus / edit box.querySelectorAll('[data-del]').forEach(b=>{ b.onclick=()=>{ const i=parseInt(b.dataset.del,10); PRODUCTS.splice(i,1); saveLocal(); render(); }; }); box.querySelectorAll('[data-edit]').forEach(b=>{ b.onclick=()=>{ const i=parseInt(b.dataset.edit,10); editItem(i); }; }); } function editItem(i){ const p=PRODUCTS[i]; if(!p) return; $('#sku').value=p.sku||''; $('#name').value=p.name||''; $('#spec').value=p.spec||''; $('#price').value=p.price||''; $('#image').value=p.image||''; $('#url').value=p.url||''; $('#labelTag').value=p.label||''; $('#name').focus(); } // tambah $('#btnAdd').onclick=()=>{ const obj={ sku: $('#sku').value.trim(), name: $('#name').value.trim(), spec: $('#spec').value.trim(), price: $('#price').value.trim(), image: $('#image').value.trim(), url: $('#url').value.trim(), label: $('#labelTag').value.trim() }; if(!obj.sku || !obj.name){ alert('SKU & Nama wajib.'); return; } PRODUCTS.push(obj); ['sku','name','spec','price','image','url','labelTag'].forEach(id=>$('#'+id).value=''); saveLocal(); render(); }; $('#btnClear').onclick=()=>{ if(!confirm('Kosongkan semua produk?')) return; PRODUCTS.splice(0); saveLocal(); render(); }; $('#btnSave').onclick=()=>{ saveLocal(); alert('Disimpan di browser.'); }; // Preview $('#btnPreview').onclick=()=>{ const html = makeLandingHTML(PRODUCTS); const blob = new Blob([html], {type:'text/html'}); const url = URL.createObjectURL(blob); $('#prevFrame').src = url; $('#prev').style.display='block'; }; $('#closePrev').onclick=()=>{ $('#prev').style.display='none'; $('#prevFrame').src='about:blank'; }; // Export $('#btnExport').onclick=()=>{ if(PRODUCTS.length===0){ alert('Belum ada produk.'); return; } const html = makeLandingHTML(PRODUCTS); const a=document.createElement('a'); a.href=URL.createObjectURL(new Blob([html],{type:'text/html'})); a.download='landing_export.html'; document.body.appendChild(a); a.click(); a.remove(); }; /** ======================= EXPORT TEMPLATE ======================= * Hasil export sinkron dengan landing.html (hero + banner + widgets + grid) * Data dipasang pada * =============================================================*/ function makeLandingHTML(items){ // heuristik badge const mapItem=(p)=>{ const out={ id:p.sku||'', brand:'', kategori:'', cpu:'', ram:'', storage:'', gpu:'', name:p.name||'', price:0, img:p.image||'', url:p.url||'', label:p.label||'' }; const txt=[p.name||'', p.spec||''].join(' ').toLowerCase(); // brand const first=(p.name||'').trim().split(/\s+/)[0]; if(first) out.brand=first; // cpu const mCpu=txt.match(/(i[3579]-?\d{3,5}h?|ryzen\s?[3579]\s?\d?|ryzen\s?\d{3,4}h?)/i); if(mCpu) out.cpu=mCpu[1].toUpperCase(); // ram const mRam=txt.match(/(\d{1,2})\s?(?:g?b)\b/i); if(mRam && parseInt(mRam[1],10)>=4) out.ram=`${parseInt(mRam[1],10)}GB`; // storage const mSto=txt.match(/(1\s?tb|\d{3,4})\s?(?:gb)?\s?(ssd|hdd)?/i); if(mSto){ out.storage= /tb/i.test(mSto[1]) ? '1TB' : `${parseInt(mSto[1],10)}GB`; if(/ssd/i.test(mSto[2]||txt)) out.storage+=' SSD'; } // gpu const mGpu=txt.match(/(rtx|gtx|iris|radeon|uhd|xe)\s?[a-z0-9]*/i); if(mGpu) out.gpu=mGpu[0].toUpperCase(); // price number const num=String(p.price||'').replace(/[^\d]/g,''); out.price = num? parseInt(num,10):0; return out; }; const products = items.map(mapItem); // === HTML lengkap (inline CSS/JS) === return ` JVSLaptop — Best Deals

Koleksi Terbaru JVSLaptop

Cek varian RAM/SSD & harga terbaik

`; } // init render(); })();