V.AISTUDIO

Running

App Files Files Community

bep40 commited on Apr 28

Commit

23f66f1

verified ·

1 Parent(s): e161223

Add deep linking & share button: product URLs, hash routing fix, copy shareable link

Browse files

Files changed (1) hide show

index.html +93 -4

index.html CHANGED Viewed

@@ -313,6 +313,13 @@ textarea.form-input{height:120px;resize:vertical}
 .cart-drawer{width:100%;max-width:100%}
 }
 </style>
 </head>
 <body>
@@ -464,6 +471,9 @@ textarea.form-input{height:120px;resize:vertical}
 </div>
 </div>
 <footer class="footer"><div class="container">
 <div class="footer-grid">
 <div class="footer-brand"><div class="logo-name" style="color:#fff;font-size:1.1rem">MALL<span style="color:var(--a)">OCA</span> & EURO<span style="color:var(--a)">GOLD</span> & GR<span style="color:var(--a)">OB</span></div><p>1979 sản phẩm với dữ liệu chi tiết đầy đủ — hình ảnh, thông số kỹ thuật, mô tả, tính năng — tích hợp từ malloca.com, eurogold.vn & catalogue Grob.</p>
@@ -493,7 +503,7 @@ if(p.specs){Object.entries(p.specs).forEach(([k,v])=>{parts.push(k);parts.push(S
 return nVN(parts.join(' '));
 }
-function init(){buildCats();buildPrices();buildBrands();render()}
 function buildCats(){
 let cats={};D.forEach(p=>{if(!cats[p.catSlug])cats[p.catSlug]={n:p.cat,i:p.catIcon,c:0};cats[p.catSlug].c++});
@@ -558,6 +568,8 @@ document.getElementById('pag').innerHTML=h;
 // ===== DETAIL VIEW =====
 function showDetail(idx){
 let p=D[idx];
 document.getElementById('listView').style.display='none';
 document.querySelector('.hero').style.display='none';
 let dv=document.getElementById('detailView');
@@ -627,6 +639,7 @@ ${p.summary?`<div class="detail-summary">${p.summary}</div>`:''}
 <div style="display:flex;gap:10px;flex-wrap:wrap">
 <button class="add-cart-btn" onclick="event.stopPropagation();addToCart(${idx})"><i class="fas fa-cart-plus"></i> Thêm vào giỏ</button>
 <a href="${p.link}" target="_blank" class="detail-btn detail-btn-outline"><i class="fas fa-external-link-alt"></i> ${p.brand==='Eurogold'?'eurogold.vn':p.brand==='Grob'?'grob.vn':'malloca.com'}</a>
 </div>
 </div>
 </div>
@@ -644,6 +657,8 @@ document.getElementById('detailView').classList.remove('show');
 document.getElementById('detailView').innerHTML='';
 document.getElementById('listView').style.display='';
 document.querySelector('.hero').style.display='';
 }
 function goHome(){
@@ -927,6 +942,17 @@ function parseUrlParams(){
 let hash=location.hash.replace(/^#/,'');
 let params=new URLSearchParams(hash);
 // Check for page navigation first
 let pageParam=params.get('page');
 if(pageParam&&pageParam!=='products'){
@@ -941,9 +967,9 @@ S.q=q;
 S.pg=1;
 }
 let cat=params.get('cat');
-if(cat){S.cat=cat;}
 let brand=params.get('brand');
-if(brand){S.brand=brand;}
 let pgNum=params.get('pg');
 if(pgNum){S.pg=parseInt(pgNum)||1;}
 let sort=params.get('sort');
@@ -974,22 +1000,85 @@ location.hash='page='+page;
 window.addEventListener('hashchange',()=>{
 let hash=location.hash.replace(/^#/,'');
 let params=new URLSearchParams(hash);
 let pageParam=params.get('page');
 if(pageParam&&pageParam!=='products'){
 showPage(pageParam);
 return;
 }
 parseUrlParams();
 render();
 });
 // Init on load
 document.addEventListener('DOMContentLoaded',()=>{
-parseUrlParams();
 initCatalogue();
 updateCartBadge();
 });
 </script>
 </body>
 </html>

 .cart-drawer{width:100%;max-width:100%}
 }
+/* SHARE BUTTON */
+.share-btn{position:fixed;bottom:24px;right:24px;z-index:90;display:flex;align-items:center;gap:8px;padding:12px 20px;background:var(--p);color:#fff;border:none;border-radius:14px;font-weight:700;font-size:.82rem;cursor:pointer;font-family:inherit;box-shadow:0 4px 16px rgba(0,63,98,.35);transition:var(--t)}
+.share-btn:hover{background:var(--pl);transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,63,98,.4)}
+.share-btn i{font-size:.9rem}
+.share-toast{position:fixed;bottom:80px;right:24px;z-index:91;background:#28a745;color:#fff;padding:10px 18px;border-radius:10px;font-size:.82rem;font-weight:600;box-shadow:0 4px 12px rgba(0,0,0,.2);animation:fadeUp .3s ease;pointer-events:none}
+@media(max-width:768px){.share-btn{bottom:16px;right:16px;padding:10px 16px;font-size:.78rem}.share-toast{bottom:70px;right:16px}}
 </style>
 </head>
 <body>
 </div>
 </div>
+<!-- SHARE BUTTON -->
+<button class="share-btn" onclick="copyShareLink()" title="Sao chép link chia sẻ trang hiện tại"><i class="fas fa-share-alt"></i> Chia sẻ trang này</button>
 <footer class="footer"><div class="container">
 <div class="footer-grid">
 <div class="footer-brand"><div class="logo-name" style="color:#fff;font-size:1.1rem">MALL<span style="color:var(--a)">OCA</span> & EURO<span style="color:var(--a)">GOLD</span> & GR<span style="color:var(--a)">OB</span></div><p>1979 sản phẩm với dữ liệu chi tiết đầy đủ — hình ảnh, thông số kỹ thuật, mô tả, tính năng — tích hợp từ malloca.com, eurogold.vn & catalogue Grob.</p>
 return nVN(parts.join(' '));
 }
+function init(){buildCats();buildPrices();buildBrands();render();parseUrlParams();render()}
 function buildCats(){
 let cats={};D.forEach(p=>{if(!cats[p.catSlug])cats[p.catSlug]={n:p.cat,i:p.catIcon,c:0};cats[p.catSlug].c++});
 // ===== DETAIL VIEW =====
 function showDetail(idx){
 let p=D[idx];
+// Update hash with product index for deep linking
+location.hash='product='+idx;
 document.getElementById('listView').style.display='none';
 document.querySelector('.hero').style.display='none';
 let dv=document.getElementById('detailView');
 <div style="display:flex;gap:10px;flex-wrap:wrap">
 <button class="add-cart-btn" onclick="event.stopPropagation();addToCart(${idx})"><i class="fas fa-cart-plus"></i> Thêm vào giỏ</button>
 <a href="${p.link}" target="_blank" class="detail-btn detail-btn-outline"><i class="fas fa-external-link-alt"></i> ${p.brand==='Eurogold'?'eurogold.vn':p.brand==='Grob'?'grob.vn':'malloca.com'}</a>
+<button class="detail-btn detail-btn-outline" onclick="event.stopPropagation();copyShareLink()" title="Sao chép link sản phẩm"><i class="fas fa-share-alt"></i> Chia sẻ</button>
 </div>
 </div>
 </div>
 document.getElementById('detailView').innerHTML='';
 document.getElementById('listView').style.display='';
 document.querySelector('.hero').style.display='';
+// Remove product hash, restore list hash
+updateHash();
 }
 function goHome(){
 let hash=location.hash.replace(/^#/,'');
 let params=new URLSearchParams(hash);
+// Check for product detail deep link
+let productIdx=params.get('product');
+if(productIdx!==null){
+let idx=parseInt(productIdx);
+if(!isNaN(idx)&&idx>=0&&idx<D.length){
+showPage('products');
+showDetail(idx);
+return;
+}
+}
 // Check for page navigation first
 let pageParam=params.get('page');
 if(pageParam&&pageParam!=='products'){
 S.pg=1;
 }
 let cat=params.get('cat');
+if(cat){S.cat=cat;updActive('.cat-item','data-s',cat);}
 let brand=params.get('brand');
+if(brand){S.brand=brand;document.querySelectorAll('[data-b]').forEach(e=>e.classList.toggle('active',e.getAttribute('data-b')===brand));}
 let pgNum=params.get('pg');
 if(pgNum){S.pg=parseInt(pgNum)||1;}
 let sort=params.get('sort');
 window.addEventListener('hashchange',()=>{
 let hash=location.hash.replace(/^#/,'');
 let params=new URLSearchParams(hash);
+// Handle product detail deep link
+let productIdx=params.get('product');
+if(productIdx!==null){
+let idx=parseInt(productIdx);
+if(!isNaN(idx)&&idx>=0&&idx<D.length){
+showPage('products');
+// Only re-render detail if not already showing this product
+let dv=document.getElementById('detailView');
+if(!dv.classList.contains('show')){
+showDetail(idx);
+}
+return;
+}
+}
 let pageParam=params.get('page');
 if(pageParam&&pageParam!=='products'){
 showPage(pageParam);
 return;
 }
+// If hash is empty or products page, go back to list
+if(!hash||pageParam==='products'){
+goBackToList();
+showPage('products');
+}
 parseUrlParams();
 render();
 });
 // Init on load
 document.addEventListener('DOMContentLoaded',()=>{
+// parseUrlParams is called from init() after data loads
 initCatalogue();
 updateCartBadge();
 });
+// ===== SHARE LINK =====
+function getShareableUrl(){
+// Build the direct .hf.space URL with current hash — this URL works when shared
+let base=window.location.origin+window.location.pathname;
+let hash=window.location.hash;
+return base+(hash||'');
+}
+function copyShareLink(){
+let url=getShareableUrl();
+if(navigator.clipboard&&navigator.clipboard.writeText){
+navigator.clipboard.writeText(url).then(()=>showShareToast('Đã sao chép link!')).catch(()=>fallbackCopy(url));
+}else{fallbackCopy(url)}
+}
+function fallbackCopy(text){
+let ta=document.createElement('textarea');
+ta.value=text;ta.style.cssText='position:fixed;top:-9999px';
+document.body.appendChild(ta);ta.select();
+try{document.execCommand('copy');showShareToast('Đã sao chép link!')}catch(e){showShareToast('Không thể sao chép. URL: '+text)}
+document.body.removeChild(ta);
+}
+function showShareToast(msg){
+let old=document.querySelector('.share-toast');if(old)old.remove();
+let t=document.createElement('div');t.className='share-toast';
+t.innerHTML='<i class="fas fa-check-circle" style="margin-right:6px"></i>'+msg;
+document.body.appendChild(t);
+setTimeout(()=>{t.style.opacity='0';t.style.transition='opacity .3s';setTimeout(()=>t.remove(),300)},2500);
+}
+// ===== SYNC HASH TO PARENT (forward-compatible) =====
+function syncHashToParent(){
+try{
+if(window.parent!==window){
+window.parent.postMessage({type:'hashchange',hash:location.hash,url:getShareableUrl()},'*');
+}
+}catch(e){}
+}
+// Sync on every hash change
+window.addEventListener('hashchange',syncHashToParent);
 </script>
 </body>
 </html>