`;
document.body.appendChild(backToTopButton);
const style = `
#backToTop {
position: fixed;
bottom: 20px;
right: 20px;
width: 60px;
height: 60px;
display: none;
z-index: 1000;
}
#backToTop .icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
color: var(--second-color);
}
.circular-chart {
width: 100%;
height: 100%;
transform: rotate(-90deg);
}
.circle-bg {
fill: none;
stroke: transparent;
stroke-width: 3.8;
}
.circle {
fill: none;
stroke: var(--second-color);
stroke-width: 3.8;
stroke-dasharray: 100, 100;
stroke-linecap: round;
transition: stroke-dasharray 0.1s linear;
}
#backToTop:hover .icon {
color: var(--main-color);
}
`;
const styleSheet = document.createElement("style");
styleSheet.type = "text/css";
styleSheet.textContent = style;
document.head.appendChild(styleSheet);
window.addEventListener("scroll", () => {
const scrollTop = window.scrollY;
const docHeight = document.documentElement.scrollHeight - window.innerHeight;
const scrollPercent = (scrollTop / docHeight) * 100;
if (scrollPercent > 1) {
backToTopButton.style.display = "block";
} else {
backToTopButton.style.display = "none";
}
const circle = document.querySelector(".circle");
const offset = 100 - scrollPercent;
circle.style.strokeDasharray = `${scrollPercent}, 100`;
});
backToTopButton.addEventListener("click", () => {
window.scrollTo({
top: 0,
behavior: "smooth",
});
});
// Additional code block
// ======== ⚠️ EMPTY LINKS PREVENT DEFAULT==========
document.querySelectorAll('a[href=""], a[href="#"]').forEach(link => {
link.addEventListener('click', event => {
event.preventDefault();
});
});
// Select the salla-product-options element
// ============= 📢 PRODUCT OPTION ALERT ===========
const sallaProductOptions = document.querySelector('salla-product-options');
// Ensure the element exists before proceeding
if (sallaProductOptions) {
// Create the alert message
const alertMessage = document.createElement('p');
alertMessage.textContent = "الرجاء اختيار أحد هذا الاختيارات للتمكن من اتمام الشراء";
// Apply styles directly to the element
alertMessage.style.backgroundColor = '#ffdddd';
alertMessage.style.color = '#a94442';
alertMessage.style.padding = '15px';
alertMessage.style.border = '1px solid #a94442';
alertMessage.style.borderRadius = '5px';
alertMessage.style.marginBottom = '10px';
alertMessage.style.fontWeight = 'bold';
alertMessage.style.textAlign = 'center';
// Insert the alert message at the beginning of the salla-product-options element
sallaProductOptions.insertBefore(alertMessage, sallaProductOptions.firstChild);
} else {
console.error("The 'salla-product-options' element was not found on the page.");
}
// Apply styles directly to the element
// Insert the banner swap (now called banSwiper)
const banSwiperHTML = `
خدمة عملاء ممتازة
توصيل سريع
منتجات عالية الجودة
دفع آمن
دعم 24/7
أسعار تنافسية
خدمة عملاء ممتازة
توصيل سريع
منتجات عالية الجودة
دفع آمن
دعم 24/7
أسعار تنافسية
`;
// Insert the banSwiper as the first element in the body
document.body.insertAdjacentHTML('afterbegin', banSwiperHTML);
// Create the loader div element
// ==================== 🖼️ SCROLL EFFECT FOR BANNERS ====================
function handleScroll() {
const elements = document.querySelectorAll('.banner--fixed img');
elements.forEach(element => {
const rect = element.getBoundingClientRect();
// إذا العنصر ظهر في نافذة المتصفح
if (rect.top <= window.innerHeight && rect.bottom >= 0) {
// هنضيف الكلاس visible لتشغيل تأثير الـ Bounce و Zoom
if (!element.classList.contains('visible')) {
element.classList.add('visible');
}
} else {
// لو العنصر مش ظاهر، نشيل الكلاس visible علشان التأثير يتكرر لما يظهر تاني
if (element.classList.contains('visible')) {
element.classList.remove('visible');
}
}
});
}
window.addEventListener('scroll', handleScroll);
handleScroll(); // لتنفيذ التأثير أول مرة عند تحميل الصفحة
// ==================== 🖼️ SCROLL EFFECT FOR PHOTOS SLIDER ====================
function handleScroll2() {
const elements = document.querySelectorAll('salla-slider.photos-slider');
elements.forEach(element => {
const rect = element.getBoundingClientRect();
// إذا العنصر ظهر في نافذة المتصفح (مرة واحدة فقط)
if (rect.top <= window.innerHeight && rect.bottom >= 0) {
if (!element.classList.contains('visible')) {
element.classList.add('visible'); // إضافة الكلاس ليحصل التأثير
}
}
});
}
window.addEventListener('scroll', handleScroll2);
handleScroll2(); // لتنفيذ التأثير عند تحميل الصفحة
// ======== 🖼️ SCROLL EFFECT FOR BACKGROUND =========
function handleScroll3() {
const elements = document.querySelectorAll('.lazy__bg');
elements.forEach(element => {
const rect = element.getBoundingClientRect();
// إذا العنصر ظهر في نافذة المتصفح
if (rect.top <= window.innerHeight && rect.bottom >= 0) {
// هنضيف الكلاس visible لتشغيل تأثير الـ Bounce و Zoom
if (!element.classList.contains('visible')) {
element.classList.add('visible');
}
} else {
// لو العنصر مش ظاهر، نشيل الكلاس visible علشان التأثير يتكرر لما يظهر تاني
if (element.classList.contains('visible')) {
element.classList.remove('visible');
}
}
});
}
window.addEventListener('scroll', handleScroll3);
handleScroll3(); // لتنفيذ التأثير أول مرة عند تحميل الصفحة
// ======== 🛍️ BLUR EFFECT ON PRODUCT CARDS ==========
function handleScrollBlur() {
const elements = document.querySelectorAll('.s-product-card-vertical');
elements.forEach(element => {
const rect = element.getBoundingClientRect();
// التحقق إذا كان العنصر داخل نافذة العرض
if (rect.top <= window.innerHeight && rect.bottom >= 0) {
element.classList.add('visible'); // إضافة كلاس التفعيل
} else {
element.classList.remove('visible'); // إزالة كلاس التفعيل
}
});
}
// تنفيذ الكود عند التمرير
window.addEventListener('scroll', handleScrollBlur);
// استدعاء الوظيفة عند تحميل الصفحة
handleScrollBlur();
// Create scrolling text dynamically
//hero
//start loading
const loader = document.createElement('div');
loader.className = 'custom-loader';
loader.innerHTML = `
`;
document.body.appendChild(loader);
window.addEventListener("load", () => {
// بعد نص ثانية خلي الخلفية تتحول رمادي شفاف
setTimeout(() => {
loader.classList.add('gray-phase');
}, 500);
// بعد 2.5 ثانية اخفي اللودر كله
setTimeout(() => {
loader.classList.add('hide-loader');
}, 2500);
});
//end loading
`;
document.body.appendChild(loader);
window.addEventListener("load", () => {
// بعد نص ثانية خلي الخلفية تتحول رمادي شفاف
setTimeout(() => {
loader.classList.add('gray-phase');
}, 500);
// بعد 2.5 ثانية اخفي اللودر كله
setTimeout(() => {
loader.classList.add('hide-loader');
}, 2500);
});
//end loading