/* Add custom JS code below */
/**(function () {
var POPUP_IMAGE_URL = 'https://i.postimg.cc/MX2rkL11/IMG-20260816-WA0009.jpg';
var TARGET_LINK = 'https://ouj-sa.com/%D8%AA%D8%BA%D9%84%D9%8A%D9%81-%D8%B4%D9%85%D9%88%D8%B9-%D9%81%D8%A7%D8%AE%D8%B1/c1670432704';
function buildPopup() {
if (document.getElementById('custom-cart-popup-overlay')) return;
var style = document.createElement('style');
style.textContent =
'#custom-cart-popup-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);display:none;align-items:center;justify-content:center;z-index:99999;padding:16px;}' +
'#custom-cart-popup-overlay.active{display:flex;}' +
'#custom-cart-popup-box{position:relative;max-width:420px;width:100%;background:#fff;border-radius:12px;overflow:hidden;animation:customCartPopupIn .25s ease-out;}' +
'@keyframes customCartPopupIn{from{opacity:0;transform:scale(.92);}to{opacity:1;transform:scale(1);}}' +
'#custom-cart-popup-box a{display:block;line-height:0;}' +
'#custom-cart-popup-box img{width:100%;height:auto;display:block;cursor:pointer;}' +
'#custom-cart-popup-close{position:absolute;top:8px;left:8px;width:32px;height:32px;border-radius:50%;background:#fff;border:none;display:flex;align-items:center;justify-content:center;font-size:18px;line-height:1;cursor:pointer;z-index:2;box-shadow:0 2px 6px rgba(0,0,0,.2);}';
document.head.appendChild(style);
var overlay = document.createElement('div');
overlay.id = 'custom-cart-popup-overlay';
overlay.innerHTML =
'';
document.body.appendChild(overlay);
overlay.addEventListener('click', function (e) {
if (e.target === overlay) closePopup();
});
document.getElementById('custom-cart-popup-close').addEventListener('click', closePopup);
document.addEventListener('keydown', function (e) {
if (e.key === 'Escape') closePopup();
});
}
function openPopup() {
buildPopup();
document.getElementById('custom-cart-popup-overlay').classList.add('active');
}
function closePopup() {
var overlay = document.getElementById('custom-cart-popup-overlay');
if (overlay) overlay.classList.remove('active');
}
function init() {
if (typeof salla === 'undefined' || !salla.cart || !salla.cart.event) {
setTimeout(init, 300);
return;
}
salla.cart.event.onItemAdded(function () {
openPopup();
});
}
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', init);
} else {
init();
}
})();**/
(function () {
const FEATURED_PRODUCT_IDS = [304585143, 1841057403, 507322004];
function buildCardHTML(product) {
const price = product.price ?? product.starting_price ?? 0;
const img = product.image?.url || product.images?.[0]?.url || '';
return `
${product.brand?.name || ''}
`;
}
function renderBlock(products) {
if (!products.length) return;
const anchor = document.querySelector('.social__salla');
if (!anchor || !anchor.parentNode) return;
const wrapper = document.createElement('div');
wrapper.className = 'featured-3-products-wrapper';
wrapper.setAttribute('dir', 'rtl');
wrapper.innerHTML = `
${products.map(buildCardHTML).join('')}
`;
anchor.parentNode.insertBefore(wrapper, anchor);
// ==== Slider behavior ====
const track = wrapper.querySelector('.featured-3-track');
const dotsWrap = wrapper.querySelector('.featured-3-dots');
const navBtn = wrapper.querySelector('.featured-3-nav');
const slides = Array.from(track.children);
slides.forEach((_, i) => {
const dot = document.createElement('span');
dot.className = 'featured-3-dot' + (i === 0 ? ' active' : '');
dot.addEventListener('click', () => {
goToSlide(i);
resetAutoplay();
});
dotsWrap.appendChild(dot);
});
const dots = Array.from(dotsWrap.children);
// بنحسب الإندكس الحالي بناءً على سكرول الـ track نفسه بس (مش سكرول الصفحة)
function getCurrentIndex() {
if (!slides.length) return 0;
const slideWidth = slides[0].getBoundingClientRect().width || 1;
// RTL: القيمة بتبقى سالبة أو صفر مع تحرك السلايدر
const idx = Math.round(Math.abs(track.scrollLeft) / slideWidth);
return Math.min(Math.max(idx, 0), slides.length - 1);
}
function updateActiveDot() {
const idx = getCurrentIndex();
dots.forEach((d, i) => d.classList.toggle('active', i === idx));
}
// goToSlide بيحرك الـ track نفسه فقط، مش الصفحة كلها (بدل scrollIntoView)
function goToSlide(idx) {
if (!slides.length) return;
const slideWidth = slides[0].getBoundingClientRect().width || 0;
track.scrollTo({
left: -idx * slideWidth, // RTL
behavior: 'smooth'
});
}
track.addEventListener('scroll', () => {
clearTimeout(track._t);
track._t = setTimeout(updateActiveDot, 100);
});
navBtn.addEventListener('click', () => {
const nextIdx = (getCurrentIndex() + 1) % slides.length;
goToSlide(nextIdx);
resetAutoplay();
});
// ==== Autoplay ====
const AUTOPLAY_DELAY = 4000; // 4 ثواني
let autoplayTimer = null;
function startAutoplay() {
stopAutoplay();
autoplayTimer = setInterval(() => {
const nextIdx = (getCurrentIndex() + 1) % slides.length;
goToSlide(nextIdx);
}, AUTOPLAY_DELAY);
}
function stopAutoplay() {
if (autoplayTimer) clearInterval(autoplayTimer);
autoplayTimer = null;
}
function resetAutoplay() {
stopAutoplay();
// استئناف بعد فترة راحة قصيرة لو المستخدم تفاعل يدويًا
clearTimeout(track._resumeT);
track._resumeT = setTimeout(startAutoplay, AUTOPLAY_DELAY);
}
// إيقاف الأوتوبلاي أثناء لمس/سحب المستخدم، واستئنافه بعدها
track.addEventListener('touchstart', stopAutoplay, { passive: true });
track.addEventListener('mousedown', stopAutoplay);
track.addEventListener('touchend', resetAutoplay, { passive: true });
track.addEventListener('mouseup', resetAutoplay);
wrapper.addEventListener('mouseenter', stopAutoplay);
wrapper.addEventListener('mouseleave', startAutoplay);
// إيقاف مؤقت لو التبويب/الصفحة مش ظاهرة (توفير أداء)
document.addEventListener('visibilitychange', () => {
if (document.hidden) stopAutoplay();
else startAutoplay();
});
if (slides.length > 1) startAutoplay();
}
async function init() {
if (!window.salla || !salla.url.is_page('product.single')) return;
const currentId = Number(salla.config.get('page')?.id);
if (FEATURED_PRODUCT_IDS.includes(currentId)) return;
try {
const results = await Promise.all(
FEATURED_PRODUCT_IDS.map(id =>
salla.api.product.getDetails(id).then(r => r.data).catch(() => null)
)
);
renderBlock(results.filter(Boolean));
} catch (e) {
console.error('featured-3-products error:', e);
}
}
salla.onReady(init);
})();