document.addEventListener("DOMContentLoaded", function() { // Target the specific section const wrapper = document.querySelector('.special-product--3'); if (!wrapper) return; const card = wrapper.querySelector('custom-salla-product-card'); if (!card) return; // 1. Extract Data const productData = JSON.parse(card.getAttribute('product')); const addToCartBtn = card.querySelector('salla-add-product-button'); // 2. Define static content const customTags = ['يقلل التساقط', 'خفيف علي الشعر', 'ترطيب الشعر', 'يقوي الشعر']; const soldCount = "155"; const reviewCount = "150"; const shortDesc = "بخاخ علاجي بتركيبة طبيعية خفيفة، سريعة الامتصاص؛ تعالج تساقط الشعر من الجذور وتقوّي البصيلات من دون ملمس دهني.. نتيجة تلاحظها من الأسبوع الأول."; const warrantyUrl = "https://haaircare.com/%D8%B6%D9%85%D8%A7%D9%86-%D9%87%D9%8A%D8%B1-%D8%A7%D9%84%D8%B0%D9%87%D8%A8%D9%8A/page-9909881"; // 3. Build Gallery & Tags let thumbnailsHTML = ''; if (productData.images && productData.images.length > 0) { productData.images.forEach((img, index) => { thumbnailsHTML += `
`; }); } let tagsHTML = customTags.map(tag => `${tag}`).join(''); // 4. Create Structure (Placeholder for Widget added) const newLayout = document.createElement('div'); newLayout.className = 'custom-product-layout'; newLayout.innerHTML = `
${reviewCount} اراء العملاء ★

${productData.name}

🔥 تم شراءه ${soldCount} مره
${tagsHTML}

${shortDesc}

${productData.price} ${productData.currency} ${productData.regular_price > productData.price ? `${productData.regular_price} ${productData.currency}` : ''}
وفر ${productData.regular_price - productData.price} ${productData.currency}
جاري تحميل العروض...
ضمان هير الذهبي ←
${productData.name}
${thumbnailsHTML}
`; // 5. Inject Layout card.innerHTML = ''; card.appendChild(newLayout); // 6. Re-inject Salla Button const btnWrapper = newLayout.querySelector('#original-cart-btn-wrapper'); if(addToCartBtn) { btnWrapper.appendChild(addToCartBtn); } // ============================================================ // 7. AUTOMATIC LOGIC: Fetch Widget from Product Page // ============================================================ const gomlaWrapper = newLayout.querySelector('#dynamic-gomla-wrapper'); fetch(productData.url) .then(response => response.text()) .then(html => { // Parse the HTML from the product page const parser = new DOMParser(); const doc = parser.parseFromString(html, 'text/html'); // Find the specific Gomla container const widget = doc.querySelector('#gomla__volume-discount-container'); if (widget) { gomlaWrapper.innerHTML = ''; // Clear loader gomlaWrapper.appendChild(widget); // Clean up styles that might conflict (optional) widget.style.margin = "15px 0"; // Initialize Interaction Logic (Make radio buttons work) initializeGomlaInteraction(widget); } else { // No widget found on product page, hide container gomlaWrapper.style.display = 'none'; } }) .catch(err => { console.error("Failed to fetch Gomla widget", err); gomlaWrapper.style.display = 'none'; }); }); // --- HELPER FUNCTIONS --- // 1. Logic to make the copied widget interactive function initializeGomlaInteraction(container) { const radios = container.querySelectorAll('input[type="radio"]'); const labels = container.querySelectorAll('.gomla__offer'); const qtyInput = document.getElementById('custom-qty'); // Function to handle selection function selectOffer(radio) { // Update Visuals labels.forEach(l => l.classList.remove('selected')); const label = container.querySelector(`label[for="${radio.id}"]`); if(label) label.classList.add('selected'); // Update Quantity Logic const quantity = label ? label.getAttribute('data-offer-quantity') : 1; if(qtyInput) { qtyInput.value = quantity; // Trigger change event just in case Salla listens to it qtyInput.dispatchEvent(new Event('change')); } } radios.forEach(radio => { radio.addEventListener('change', (e) => selectOffer(e.target)); // Initialize if checked by default if(radio.checked) selectOffer(radio); }); } // 2. Image Switcher function changeCustomImage(el, src) { document.getElementById('main-display-img').src = src; document.querySelectorAll('.thumb-item').forEach(i => i.classList.remove('active')); el.classList.add('active'); } // 3. Qty Updater (Modified to handle manual clicks vs Bundle clicks) function updateQty(change) { const input = document.getElementById('custom-qty'); let val = parseInt(input.value); val += change; if (val < 1) val = 1; input.value = val; // Note: If user manually changes quantity, we might want to uncheck bundles // But for simplicity, we keep it as is. } // PRODUCT PAGE document.addEventListener("DOMContentLoaded", function() { var productTitle = document.querySelector('.product-single__info h1'); if (productTitle) { var customContent = `
تم شراءه 155 مره
بخاخ علاجي بتركيبة طبيعية خفيفة، سريعة الامتصاص؛ تعالج تساقط الشعر من الجذور وتقوّي البصيلات من دون ملمس دهني.. نتيجة تلاحظها من الأسبوع الأول.
`; productTitle.insertAdjacentHTML('afterend', customContent); } });