document.addEventListener('DOMContentLoaded', function() {
// دالة واحدة لتنفيذ جميع التعديلات بشكل متكرر حتى تنجح
const applyCustomizations = () => {
// ===================================================
// المهمة 1: استبدال قائمة أيقونات الدفع
// ===================================================
const oldPaymentList = document.querySelector('ul.flex.justify-center.items-stretch.flex-wrap.rtl\\:space-x-reverse.gap-2:not([data-modified])');
if (oldPaymentList) {
const newPaymentListHTML = `
`;
oldPaymentList.outerHTML = newPaymentListHTML;
console.log('تم تعديل أيقونات الدفع بنجاح.');
}
// ===================================================
// المهمة 2: استبدال روابط قسم "تواصل معنا"
// ===================================================
const contactSectionContainer = document.querySelector('.footer-contact:not([data-modified])');
if (contactSectionContainer) {
const oldContactLinksDiv = contactSectionContainer.querySelector('div.flex.flex-wrap.w-full.justify-center');
if (oldContactLinksDiv) {
const newContactLinksHTML = `
`;
oldContactLinksDiv.outerHTML = newContactLinksHTML;
contactSectionContainer.setAttribute('data-modified', 'true');
console.log('تم تعديل روابط "تواصل معنا" بنجاح.');
}
}
// ===================================================
// المهمة 3: استبدال وتصميم أيقونات التواصل الاجتماعي
// ===================================================
const oldSocialListAnchor = document.querySelector('a[href*="instagram.com/yoofksa"]:not(.social-icon-link)');
if (oldSocialListAnchor) {
const socialListContainer = oldSocialListAnchor.closest('ul');
if (socialListContainer && !socialListContainer.classList.contains('new-social-icons')) {
const newSocialIconsHTML = `
`;
socialListContainer.outerHTML = newSocialIconsHTML;
if (!document.getElementById('custom-social-styles')) {
const customCSS = `
.new-social-icons { display: flex; gap: 10px; list-style: none; padding: 0; margin: 0; }
.new-social-icons .social-icon-link { display: flex; justify-content: center; align-items: center; width: 44px; height: 44px; background-color: #4A543E; border-radius: 12px; transition: transform 0.2s ease; }
.new-social-icons .social-icon-link i { color: #FFFFFF; font-size: 22px; }
.new-social-icons .social-icon-link:hover { transform: scale(1.1); }
`;
const styleElement = document.createElement('style');
styleElement.id = 'custom-social-styles';
styleElement.textContent = customCSS;
document.head.appendChild(styleElement);
}
console.log('تم تعديل أيقونات التواصل الاجتماعي بنجاح.');
}
}
// ===================================================
// المهمة 4: تحويل **جميع** قوائم "الكمية" المنسدلة إلى أزرار (عام ولكل المنتجات)
// ===================================================
// نبحث عن كل حاويات الخيارات التي لم تتم معالجتها بعد
const optionContainers = document.querySelectorAll('.s-product-options-option:not([data-buttons-converted])');
optionContainers.forEach(container => {
const label = container.querySelector('.s-product-options-option-label');
const selectElement = container.querySelector('select[name^="options["]');
// نتأكد أن هذا هو خيار "الكمية" تحديدًا وأنه يحتوي على قائمة منسدلة
if (label && label.textContent.includes('الكمية') && selectElement) {
// نضع علامة على الحاوية لمنع إعادة تحويلها
container.setAttribute('data-buttons-converted', 'true');
selectElement.style.display = 'none';
const buttonContainer = document.createElement('div');
buttonContainer.className = 'custom-options-buttons';
const options = selectElement.querySelectorAll('option');
options.forEach(option => {
if (option.value === '') return;
const button = document.createElement('button');
button.type = 'button';
button.className = 'custom-option-btn';
button.textContent = option.textContent.replace(' - نفدت الكمية', '').trim();
button.dataset.value = option.value;
if (option.textContent.includes('نفدت الكمية')) {
button.disabled = true;
}
// تحديد الخيار الافتراضي (يمكنك تغيير "250GM" إذا أردت)
if (option.textContent.includes('250GM') && !button.disabled) {
button.classList.add('active');
selectElement.value = option.value;
}
buttonContainer.appendChild(button);
});
// إضافة الأزرار بعد القائمة المنسدلة
selectElement.closest('.s-product-options-option-content div').appendChild(buttonContainer);
// إضافة حدث النقر على حاوية الأزرار
buttonContainer.addEventListener('click', (event) => {
const clickedButton = event.target.closest('.custom-option-btn');
if (!clickedButton || clickedButton.disabled) return;
buttonContainer.querySelectorAll('.custom-option-btn').forEach(btn => btn.classList.remove('active'));
clickedButton.classList.add('active');
selectElement.value = clickedButton.dataset.value;
// إطلاق حدث "change" وهو ضروري جداً لتحديث السعر في سلة
const changeEvent = new Event('change', { bubbles: true });
selectElement.dispatchEvent(changeEvent);
});
console.log(`تم تحويل قائمة "الكمية" للمنتج إلى أزرار.`);
}
});
};
// حاول تنفيذ التعديلات عدة مرات لضمان ظهور جميع العناصر الديناميكية
const interval = setInterval(applyCustomizations, 250);
// إيقاف المحاولات بعد 5 ثوانٍ
setTimeout(() => {
clearInterval(interval);
}, 5000);
});
document.addEventListener('DOMContentLoaded', function() {
// نحدد عنصر الرابط باستخدام خاصية aria-label أو أي محدد آخر فريد
// في هذه الحالة، aria-label="banner link" هو محدد جيد
const bannerLink = document.querySelector('a[aria-label="banner link"]');
// نتأكد أن العنصر موجود قبل محاولة تعديله
if (bannerLink) {
// نقوم بإزالة السمة 'href' من عنصر الرابط
// هذا سيجعل الرابط غير قابل للنقر (non-clickable) ولن يفتح أي صفحة
bannerLink.removeAttribute('href');
// اختياري: إذا كنت تريد التأكد تمامًا من عدم وجود أي سلوك افتراضي
// يمكنك إضافة مستمع حدث للنقر يقوم بمنع السلوك الافتراضي،
// على الرغم من أن إزالة href عادةً ما تكون كافية.
// bannerLink.addEventListener('click', function(event) {
// event.preventDefault();
// event.stopPropagation(); // لمنع انتشار الحدث لأي عناصر آباء
// });
}
});
