/* Add custom Js styles below */
// ========== Google Fonts ==========
document.addEventListener('DOMContentLoaded', function () {
// Create the Google Fonts link
const fontLink = document.createElement('link');
fontLink.rel = 'stylesheet';
fontLink.href =
'https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@100;200;300;400;500;600;700&display=swap';
// Append it to
document.head.appendChild(fontLink);
});
// ========== how-to ==========
document.addEventListener('DOMContentLoaded', function () {
const video = document.querySelector('.howto video');
if (!video) return;
// إعدادات الفيديو (إيقاف التشغيل التلقائي)
video.autoplay = false;
video.muted = false;
video.loop = false;
video.controls = false;
video.pause();
// إنشاء غلاف للفيديو
const wrapper = document.createElement('div');
wrapper.classList.add('video-wrapper');
video.parentNode.insertBefore(wrapper, video);
wrapper.appendChild(video);
// إضافة صورة البوستر
const poster = document.createElement('img');
poster.src = 'https://k.top4top.io/p_3526uvssk1.jpg'; // ضع رابط الصورة هنا
poster.classList.add('video-poster');
wrapper.appendChild(poster);
// إضافة زر التشغيل
const playBtn = document.createElement('button');
playBtn.innerHTML = '▶';
playBtn.classList.add('play-btn');
wrapper.appendChild(playBtn);
// تشغيل الفيديو عند الضغط
function playVideo() {
poster.style.display = 'none';
playBtn.style.display = 'none';
video.controls = true;
video.play();
}
poster.addEventListener('click', playVideo);
playBtn.addEventListener('click', playVideo);
});
if (document.body.classList.contains('index')) {
// ========== marquee ==========
document.addEventListener('DOMContentLoaded', function () {
const SPEED_PX_PER_SEC = 80;
const GAP_PX = 60;
const ICON_H = 30;
const TARGET_SELECTOR = '.abo';
const ICONS = [
'https://a.top4top.io/p_3517yismx1.png?v=2.0.5',
'https://i.top4top.io/p_35178e7v81.png?v=2.0.5',
'https://k.top4top.io/p_35175te271.png?v=2.0.5',
'https://b.top4top.io/p_3517d98tw1.png?v=2.0.5',
'https://d.top4top.io/p_3517w8jw61.png?v=2.0.5',
];
const wrapper = document.createElement('div');
wrapper.style.cssText = `
overflow:hidden;
width:100%;
background:#222;
padding:25px 0;
position:relative;
direction:ltr;
`;
const track = document.createElement('div');
track.style.cssText = `
display:flex;
flex-wrap:nowrap;
align-items:center;
will-change:transform;
`;
wrapper.appendChild(track);
function makeSegment() {
const seg = document.createElement('div');
seg.style.cssText = `
display:inline-flex;
flex-shrink:0;
align-items:center;
gap:${GAP_PX}px;
margin-right:${GAP_PX}px;
`;
ICONS.forEach((src) => {
const img = document.createElement('img');
img.src = src;
img.alt = '';
img.style.cssText = `
height:${ICON_H}px;
object-fit:contain;
display:block;
`;
seg.appendChild(img);
});
return seg;
}
const target = document.querySelector(TARGET_SELECTOR);
if (target && target.parentNode) {
target.parentNode.insertBefore(wrapper, target);
} else {
document.body.insertBefore(wrapper, document.body.firstChild);
}
function imagesLoaded(container) {
const imgs = Array.from(container.querySelectorAll('img'));
if (imgs.length === 0) return Promise.resolve();
return Promise.all(
imgs.map((img) => {
if (img.complete && img.naturalWidth) return Promise.resolve();
return new Promise((res) => {
img.addEventListener('load', res, { once: true });
img.addEventListener('error', res, { once: true });
});
})
);
}
let segWidth = 0;
let x = 0;
let lastTime = performance.now();
let rafId = null;
function buildEnoughSegments() {
track.innerHTML = '';
const first = makeSegment();
track.appendChild(first);
segWidth = first.scrollWidth;
const need = Math.ceil((wrapper.clientWidth * 2) / segWidth) + 2;
for (let i = 1; i < need; i++) {
track.appendChild(makeSegment());
}
}
function loop(now) {
const dt = (now - lastTime) / 1000;
lastTime = now;
x -= SPEED_PX_PER_SEC * dt;
while (x <= -segWidth) {
x += segWidth;
}
track.style.transform = `translateX(${x}px)`;
rafId = requestAnimationFrame(loop);
}
function start() {
cancelAnimationFrame(rafId);
x = 0;
lastTime = performance.now();
rafId = requestAnimationFrame(loop);
}
function rebuildAndStart() {
buildEnoughSegments();
const firstSeg = track.firstElementChild;
segWidth = firstSeg ? firstSeg.scrollWidth : 0;
start();
}
function safeRebuild() {
if (safeRebuild._tid) clearTimeout(safeRebuild._tid);
safeRebuild._tid = setTimeout(rebuildAndStart, 150);
}
imagesLoaded(wrapper).then(() => {
rebuildAndStart();
window.addEventListener('resize', safeRebuild);
});
});
}
//عدد مرات الشراء
document.addEventListener("DOMContentLoaded", function() {
// بيانات المنتجات مع الرقم اللي عايز تعرضه
const products = {
"product-293866788": 5283, // غير الرقم هنا
"product-908913688": 9723, // وغير هنا
"product-156879621": 7066 // وغير هنا
};
Object.keys(products).forEach(id => {
const productEl = document.querySelector(`.${id} #variant-inventory`);
if (productEl) {
// إنشاء العنصر الجديد
const div = document.createElement("div");
div.className = "custom-product-count flex text-[#f11e1e] flex-grow shrink-0";
div.innerHTML = `
تم شراءه ${products[id]} مرة
`;
// إضافة العنصر بعد "متوفر"
productEl.insertAdjacentElement("afterend", div);
}
});
});
// card