/* Add custom Js styles below */ // add about us section after slider document.addEventListener("DOMContentLoaded", function () { const lang = document.documentElement.getAttribute("lang"); // Select main based on language const main = document.querySelector(`html[lang="${lang}"] body.index main#main-content[role="main"]`); if (!main) return; // Arabic: first slider const firstSlider = main.querySelector('salla-slider'); // English: slider with ID main-slider-1 const englishSlider = main.querySelector('salla-slider#main-slider-1'); // Container to insert after let targetSlider = lang === "ar" ? firstSlider : englishSlider; if (!targetSlider) return; // Create new section const newElement = document.createElement('div'); newElement.className = 'after-slider-box'; // Arabic content const arabicHTML = ` `; // English content const englishHTML = ` `; // Set the correct HTML based on language newElement.innerHTML = lang === "ar" ? arabicHTML : englishHTML; // Insert only after the correct slider targetSlider.insertAdjacentElement('afterend', newElement); }); // animation img document.addEventListener("DOMContentLoaded", function () { const elements = document.querySelectorAll('.imgAbb'); const observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { entry.target.classList.add('active'); } }); }, { threshold: 0.2 }); elements.forEach(el => observer.observe(el)); }); // move show all product document.addEventListener("DOMContentLoaded", function () { const observer = new MutationObserver(() => { const sliderWrapper = document.querySelector('salla-products-slider'); if (!sliderWrapper) return; const displayAllLink = sliderWrapper.querySelector('.s-slider-block__display-all'); if (!displayAllLink) return; // Stop observing once found observer.disconnect(); // Detect language from const lang = document.documentElement.getAttribute("lang"); // Set text based on language displayAllLink.textContent = lang === "ar" ? "جميع المنتجات" : "Show All Products"; displayAllLink.classList.add('showAllProd'); const newBox = document.createElement('div'); newBox.className = 'display-all-outside'; newBox.appendChild(displayAllLink); sliderWrapper.insertAdjacentElement('afterend', newBox); }); observer.observe(document.body, { childList: true, subtree: true }); }); //add header html document.addEventListener('DOMContentLoaded', () => { function addBeforeSlider() { const lang = document.documentElement.getAttribute("lang"); // detect language (ar / en) const section = document.querySelector('section.s-block.s-block--best-offers'); if (!section) return false; const sallaSlider = section.querySelector('salla-products-slider'); if (!sallaSlider) return false; // Prevent duplicate insert if (section.querySelector('.secHeaderProd')) return true; // Arabic Header const arabicHTML = `

كل نوع له طعم وحكاية

رحلة عبر المملكة لاكتشاف أجود أنواع العسل الطبيعي

`; // English Header const englishHTML = `

Each Honey Has Its Own Story

A journey across Saudi Arabia to discover the finest natural honey

`; // Insert based on language const insertHTML = lang === "ar" ? arabicHTML : englishHTML; sallaSlider.insertAdjacentHTML('beforebegin', insertHTML); return true; } let attempts = 0; const interval = setInterval(() => { attempts++; if (addBeforeSlider() || attempts > 20) { clearInterval(interval); } }, 300); }); // add img to the special boxes const iconMap = { "sicon-store2": "https://cdn.files.salla.network/homepage/1553057547/bf3c4d1f-c295-4ed0-a16d-e34b987a1517.webp", "sicon-shipping-fast": "https://cdn.files.salla.network/homepage/1553057547/fc916c08-7a3c-4712-ac30-a63e2ec628aa.webp", "sicon-fire": "https://cdn.files.salla.network/homepage/1553057547/abca03e0-b420-4178-814f-036fd2ecaec5.webp" }; document.querySelectorAll('.feature-icon i').forEach(iTag => { const src = iconMap[iTag.className]; if (src) { const img = document.createElement('img'); img.src = src; img.className = "specHon"; iTag.replaceWith(img); } }); //add html before feature box // Select the section const section = document.querySelector('.s-block.s-block--features.container'); // The HTML you want to insert const htmlToInsert = `

لماذا مناحل الرفيدان؟

 لأن كل قطرة عسلٍ من أرضٍ سعوديةٍ أصيلة

`; // Insert the HTML before the section section.insertAdjacentHTML('beforebegin', htmlToInsert); //add logo to footer // Select the h3 inside the footer const footerH3 = document.querySelector('footer.store-footer h3'); if (footerH3) { // Create new img element const img = document.createElement('img'); img.src = "https://cdn.files.salla.network/homepage/1553057547/2304d273-1b76-4096-8d4a-b0bd8209a298.webp"; img.alt = "مناحل الرفيدان"; img.className = "logoFooter"; // Replace h3 with img footerH3.replaceWith(img); } /*add class to div under footer*/ document.addEventListener('DOMContentLoaded', function() { const footerContainer = document.querySelector('.store-footer__inner .container.grid.grid-col-1.lg\\:grid-cols-6.gap-8.lg\\:gap-6'); if (footerContainer) { footerContainer.classList.add('bigPartfsec'); } }); /*add class to the direct children of div with class bigPartfsec*/ document.addEventListener('DOMContentLoaded', function() { const bigPartDiv = document.querySelector('.bigPartfsec'); if (bigPartDiv) { const directChildren = bigPartDiv.querySelectorAll(':scope > div'); directChildren.forEach(child => { child.classList.add('footsecChi'); }); } }); //add class banner in ar & en document.addEventListener("DOMContentLoaded", function () { const bannerRules = [ { src: "https://cdn.files.salla.network/homepage/1553057547/2396189b-39ba-4fe6-8f62-388d860360fc.webp", className: "bannerArBr" }, { src: "https://cdn.files.salla.network/homepage/1553057547/aa0be22b-e835-420a-949c-0f6e2fbedc10.webp", className: "bannerEnbrr" } ]; // Find all candidate sections (so we don't miss ones added later in DOM order) const sections = document.querySelectorAll("section.s-block.s-block--fixed-banner"); for (const rule of bannerRules) { for (const section of sections) { // find any inside this section const imgs = section.querySelectorAll("img"); let matched = false; for (const img of imgs) { const src = img.getAttribute("src") || ""; const dataSrc = img.getAttribute("data-src") || ""; if (src === rule.src || dataSrc === rule.src) { section.classList.add(rule.className); matched = true; break; // stop checking imgs in this section } } if (matched) break; // go to next rule once we've added the class } } }); /*add btn eng -ar beside riyal*/ document.addEventListener("DOMContentLoaded", function () { const mainnav = document.querySelector("#mainnav"); if (!mainnav) return; // Find the target inside mainnav const cartSummary = mainnav.querySelector("salla-cart-summary"); if (!cartSummary) return; // Create the localization HTML block const localizationHTML = `
`; // Insert it **right after** the cart summary component cartSummary.insertAdjacentHTML("afterend", localizationHTML); });