document.addEventListener("DOMContentLoaded", function () {
/* =========================================================
SETTINGS
========================================================= */
const LOGO_URL =
"https://cdn.files.salla.network/theme/639118069/f3e04ae3-1f25-4b52-b500-9e721a2d1469.webp";
const WHATSAPP_URL =
"https://wa.me/966532208169";
/* =========================================================
CREATE MOBILE BOTTOM NAV
========================================================= */
if (!document.querySelector(".custom-mobile-bottom-nav")) {
const bottomNav = document.createElement("nav");
bottomNav.className = "custom-mobile-bottom-nav";
bottomNav.setAttribute("aria-label", "القائمة السفلية");
bottomNav.innerHTML = `
الرئيسية
سلة التسوق
`;
document.body.appendChild(bottomNav);
/* =====================================================
CATEGORIES
===================================================== */
const categoriesButton =
document.getElementById("custom-open-menu");
if (categoriesButton) {
categoriesButton.addEventListener("click", function (e) {
e.preventDefault();
const originalMenuButton =
document.getElementById("storemenu-panel-trigger");
if (originalMenuButton) {
originalMenuButton.click();
} else {
console.warn(
"[Bottom Nav] Original menu button not found."
);
}
});
}
/* =====================================================
ACCOUNT ELEMENTS
===================================================== */
const accountButton =
document.getElementById("custom-account-button");
const accountIcon =
accountButton.querySelector(".custom-account-icon");
/* =====================================================
SYNC ACCOUNT AVATAR
===================================================== */
function syncAccountButton() {
const userMenu =
document.querySelector("salla-user-menu");
const avatar =
userMenu?.querySelector(
".s-user-menu-trigger-avatar"
);
/* Logged in */
if (userMenu && avatar && avatar.src) {
accountButton.classList.add("is-logged-in");
const currentAvatar =
accountIcon.querySelector(
".bottom-nav-user-avatar"
);
if (
currentAvatar &&
currentAvatar.src === avatar.src
) {
return;
}
accountIcon.innerHTML = `
`;
return;
}
/* Guest */
accountButton.classList.remove("is-logged-in");
if (
accountIcon.querySelector(
".bottom-nav-user-avatar"
)
) {
accountIcon.innerHTML = `
`;
}
}
syncAccountButton();
setTimeout(syncAccountButton, 500);
setTimeout(syncAccountButton, 1500);
setTimeout(syncAccountButton, 3000);
/* =====================================================
WATCH USER STATE
===================================================== */
let userTimer = null;
const userObserver =
new MutationObserver(function () {
clearTimeout(userTimer);
userTimer = setTimeout(
syncAccountButton,
150
);
});
const header =
document.querySelector("header") ||
document.body;
userObserver.observe(header, {
childList: true,
subtree: true
});
/* =====================================================
ACCOUNT CLICK
===================================================== */
accountButton.addEventListener("click", function (e) {
/*
* Prevent this bottom-nav click from reaching
* Salla's document/outside-click handlers.
*/
e.preventDefault();
e.stopPropagation();
e.stopImmediatePropagation();
/* =============================================
LOGGED IN
============================================= */
const originalUserTrigger =
document.querySelector(
"salla-user-menu #trigger-slot"
);
if (originalUserTrigger) {
/*
* Run AFTER the current bottom-nav click
* has completely finished.
*/
setTimeout(function () {
originalUserTrigger.click();
}, 0);
return;
}
/* =============================================
GUEST
============================================= */
const originalLoginButton =
document.querySelector(
'.header-rounded-btn[onclick*="login::open"]'
);
if (originalLoginButton) {
setTimeout(function () {
originalLoginButton.click();
}, 0);
return;
}
/* =============================================
FALLBACK
============================================= */
if (
window.salla &&
salla.event &&
typeof salla.event.dispatch === "function"
) {
setTimeout(function () {
salla.event.dispatch("login::open");
}, 0);
}
});
/* =====================================================
ACTIVE ITEM
===================================================== */
const currentPath =
window.location.pathname
.replace(/\/+$/, "");
if (
currentPath === "" ||
currentPath === "/"
) {
bottomNav
.querySelector(".nav-home")
?.classList.add("active");
}
if (
currentPath.includes("/cart")
) {
bottomNav
.querySelector(".nav-cart")
?.classList.add("active");
}
/* =====================================================
CART COUNT
===================================================== */
const customCartCount =
bottomNav.querySelector(
".custom-cart-count"
);
let lastCartCount = null;
function updateCartCount() {
if (!customCartCount) {
return;
}
const selectors = [
"salla-cart-summary .s-cart-summary-count",
"salla-cart-summary [data-cart-count]",
".s-cart-summary-count",
"[data-cart-count]"
];
let count = 0;
for (const selector of selectors) {
const elements =
document.querySelectorAll(selector);
for (const element of elements) {
if (
element.closest(
".custom-mobile-bottom-nav"
)
) {
continue;
}
const value =
parseInt(
element.textContent.trim(),
10
);
if (!isNaN(value)) {
count = value;
break;
}
}
if (count > 0) {
break;
}
}
if (count === lastCartCount) {
return;
}
lastCartCount = count;
if (count > 0) {
customCartCount.textContent = count;
customCartCount.classList.add(
"show"
);
} else {
customCartCount.textContent = "";
customCartCount.classList.remove(
"show"
);
}
}
updateCartCount();
setTimeout(updateCartCount, 500);
setTimeout(updateCartCount, 1500);
setTimeout(updateCartCount, 3000);
/* =====================================================
SALLA CART EVENT
===================================================== */
try {
if (
window.salla &&
salla.cart &&
salla.cart.event &&
typeof salla.cart.event.onUpdated === "function"
) {
salla.cart.event.onUpdated(function () {
lastCartCount = null;
setTimeout(
updateCartCount,
100
);
});
}
} catch (error) {
console.warn(
"[Bottom Nav] Cart event error:",
error
);
}
/* =====================================================
WATCH CART CHANGES
===================================================== */
let cartTimer = null;
const cartObserver =
new MutationObserver(function () {
clearTimeout(cartTimer);
cartTimer = setTimeout(
updateCartCount,
150
);
});
cartObserver.observe(document.body, {
childList: true,
subtree: true,
characterData: true
});
}
/* =========================================================
WHATSAPP BUTTON
========================================================= */
if (!document.querySelector(".custom-whatsapp")) {
const whatsapp =
document.createElement("a");
whatsapp.href =
WHATSAPP_URL;
whatsapp.target =
"_blank";
whatsapp.rel =
"noopener noreferrer";
whatsapp.className =
"custom-whatsapp";
whatsapp.setAttribute(
"aria-label",
"تواصل معنا عبر واتساب"
);
whatsapp.innerHTML = `
`;
document.body.appendChild(whatsapp);
}
});
document.addEventListener("DOMContentLoaded", function () {
const observer = new MutationObserver((mutations, obs) => {
const select = document.querySelector('section.product-options-section select, .s-product-options-wrapper select');
if (select && !select.dataset.converted) {
select.dataset.converted = "true";
const container = document.createElement('div');
container.className = 'custom-options-container';
select.parentNode.insertBefore(container, select.nextSibling);
Array.from(select.options).forEach(option => {
if (!option.value) return;
const btn = document.createElement('button');
btn.type = 'button';
btn.className = 'custom-option-btn';
btn.innerText = option.text;
btn.dataset.value = option.value;
if (option.selected) {
btn.classList.add('active');
}
btn.addEventListener('click', function () {
container.querySelectorAll('.custom-option-btn').forEach(b => b.classList.remove('active'));
btn.classList.add('active');
select.value = btn.dataset.value;
select.dispatchEvent(new Event('change', { bubbles: true }));
select.dispatchEvent(new Event('input', { bubbles: true }));
});
container.appendChild(btn);
});
select.addEventListener('change', function() {
const activeBtn = container.querySelector(`[data-value="${select.value}"]`);
if (activeBtn) {
container.querySelectorAll('.custom-option-btn').forEach(b => b.classList.remove('active'));
activeBtn.classList.add('active');
}
});
}
});
observer.observe(document.body, {
childList: true,
subtree: true
});
});
document.addEventListener("DOMContentLoaded", function() {
// تأخير زمني بسيط لضمان اكتمال تحميل مكون salla-slider وتهيئة Swiper
setTimeout(function() {
// تحديد حاوية السلايدر
const swiperContainer = document.querySelector('.s-block--main-slider-2 .swiper');
// التأكد من وجود العنصر واكتمال حقن كائن swiper داخله
if (swiperContainer && swiperContainer.swiper) {
// 1. سرعة حركة التقليب (الأنيميشن) بالملي ثانية
// قلل الرقم لزيادة السرعة (مثلاً 250 أو 300)
swiperContainer.swiper.params.speed = 250;
// 2. مدة بقاء الصورة قبل الانتقال التلقائي (بالملي ثانية)
if (swiperContainer.swiper.params.autoplay) {
// 3000 تعني 3 ثوانٍ
swiperContainer.swiper.params.autoplay.delay = 2000;
}
// تحديث السلايدر لتطبيق القيم الجديدة فوراً
swiperContainer.swiper.update();
}
}, 1500);
});