{"id":8646,"date":"2026-06-09T18:13:57","date_gmt":"2026-06-09T18:13:57","guid":{"rendered":"https:\/\/mono-perfumes.com\/?post_type=porto_builder&p=8646"},"modified":"2026-07-15T14:19:09","modified_gmt":"2026-07-15T14:19:09","slug":"new-single-prod","status":"publish","type":"porto_builder","link":"https:\/\/mono-perfumes.com\/ar\/?porto_builder=new-single-prod","title":{"rendered":"new single prod"},"content":{"rendered":"\t\t
\n\t\t\t\t
\r\n\t\t
\r\n\t\t\t\t<\/div>\n\t\t
\r\n\t\t\t\t
\n\t\t\t\t\t\t\t
<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\tSize Guide<\/span><\/a>\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t
<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n
\n \n <\/svg>\n <\/span>\n Premium French Oils<\/span>\n <\/div>\n
\n \n <\/svg>\n <\/span>\n Hand-Filled, Small-Batch Bottles<\/span>\n <\/div>\n
\n \n <\/svg>\n <\/span>\n Discreet, Secure Packaging<\/span>\n <\/div>\n
\n \n <\/svg>\n <\/span>\n Fast Shipping Across Egypt<\/span>\n <\/div>\n
\n \n <\/svg>\n <\/span>\n Trusted by Thousands of Customers<\/span>\n <\/div>\n <\/div>\n <\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n
\n <\/svg>\n French Oils<\/span>\n <\/div>\n
\n <\/svg>\n Long-Lasting<\/span>\n <\/div>\n
\n <\/svg>\n Best Price<\/span>\n <\/div>\n
\n <\/svg>\n Fast Shipping<\/span>\n <\/div>\n
\n <\/svg>\n Trusted<\/span>\n <\/div>\n <\/div>\n <\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t

Overview
<\/span>
<\/div><\/h2>\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t
\n
\n
\n
\n\t\t\t\t<\/div>\n
\n
\n
<\/div><\/div>\n
\n\t\t\t\t\tSize Guide<\/span><\/a>\t\t\t\t<\/div>\n
\n
<\/div><\/div>\n
\n
\n
\n
\n
\n
\n <\/span>
\n Premium French Oils<\/span>\n <\/div>\n
\n
\n
\n <\/span>
\n Hand-Filled, Small-Batch Bottles<\/span>\n <\/div>\n
\n
\n
\n <\/span>
\n Discreet, Secure Packaging<\/span>\n <\/div>\n
\n
\n
\n <\/span>
\n Fast Shipping Across Egypt<\/span>\n <\/div>\n
\n
\n
\n <\/span>
\n Trusted by Thousands of Customers<\/span>\n <\/div><\/div><\/div><\/div>\n
\n
\n
\n
\n
\n French Oils<\/span>\n <\/div>\n
\n
\n Long-Lasting<\/span>\n <\/div>\n
\n
\n Best Price<\/span>\n <\/div>\n
\n
\n Fast Shipping<\/span>\n <\/div>\n
\n
\n Trusted<\/span>\n <\/div><\/div><\/div><\/div>\n
\n

Overview\n
<\/span><\/div>\n<\/h2><\/div><\/div><\/div>\n
\n
\n
\n
\n\t\t\t
\n\t\t\t\t\t\t<\/span>\n\t\t<\/div><\/div>\n
\n
<\/div><\/div>\n
\n
\n\t\t\t
\n\t\t\t\t\t\t<\/span>\n\t\t<\/div><\/div><\/div><\/div>\n
\n
\n

Related Products<\/h2>\n<\/div><\/div>\n
\n
\n
\n\t\t\t\t\tdocument.addEventListener('DOMContentLoaded', function() {\n

\/\/ 1. Tab Switching\n const tabBtns = document.querySelectorAll('.mono-tab-btn');\n const tabPanels = document.querySelectorAll('.mono-tab-panel');<\/p>\n

tabBtns.forEach(btn => {\n btn.addEventListener('click', () => {\n tabBtns.forEach(b => b.classList.remove('active'));\n tabPanels.forEach(p => p.classList.remove('active'));\n btn.classList.add('active');\n const targetId = btn.getAttribute('data-target');\n const targetPanel = document.getElementById(targetId);\n if(targetPanel) targetPanel.classList.add('active');\n });\n });<\/p>\n

\/\/ 2. Drawer Logic\n const drawer = document.getElementById('mono-review-drawer');\n const openBtn = document.getElementById('mono-open-review-drawer');\n const closeBtn = document.getElementById('mono-close-review-drawer');\n const overlay = document.querySelector('.mono-drawer-overlay');<\/p>\n

function openDrawer() {\n if(drawer) {\n drawer.classList.add('is-open');\n document.body.style.overflow = 'hidden';\n }\n }\n function closeDrawer() {\n if(drawer) {\n drawer.classList.remove('is-open');\n document.body.style.overflow = '';\n }\n }<\/p>\n

if (openBtn) openBtn.addEventListener('click', openDrawer);\n if (closeBtn) closeBtn.addEventListener('click', closeDrawer);\n if (overlay) overlay.addEventListener('click', closeDrawer);<\/p>\n

document.addEventListener('keydown', function(e) {\n if (e.key === 'Escape' && drawer && drawer.classList.contains('is-open')) closeDrawer();\n });<\/p>\n

\/\/ 3. AJAX Form Submission\n const reviewForm = document.querySelector('.mono-drawer-body form');\n if (reviewForm) {\n reviewForm.addEventListener('submit', function(e) {\n e.preventDefault();\n const submitBtn = reviewForm.querySelector('input[type=\"submit\"], button[type=\"submit\"]');\n if(submitBtn) {\n submitBtn.disabled = true;\n submitBtn.value = 'Submitting...';\n }<\/p>\n

const formData = new FormData(reviewForm);<\/p>\n

\/\/ Submitting directly to wp-comments-post.php ensures all woo\/cusrev hooks run!\n fetch(reviewForm.action, {\n method: 'POST',\n body: formData,\n }).then(async response => {\n const text = await response.text();<\/p>\n

\/\/ Parse standard WordPress error pages\n if (text.includes('id=\"error-page\"') || text.includes('wp-die-message')) {\n const parser = new DOMParser();\n const doc = parser.parseFromString(text, 'text\/html');\n const errorEl = doc.querySelector('.wp-die-message, p');\n const errorMsg = errorEl ? errorEl.innerText.trim() : 'Error submitting review. Please make sure all fields are filled.';\n throw new Error(errorMsg);\n }<\/p>\n

\/\/ Parse WooCommerce error notices\n if (text.includes('woocommerce-error')) {\n const parser = new DOMParser();\n const doc = parser.parseFromString(text, 'text\/html');\n const errorEl = doc.querySelector('.woocommerce-error');\n const errorMsg = errorEl ? errorEl.innerText.trim() : 'Invalid form data.';\n throw new Error(errorMsg);\n }<\/p>\n

\/\/ Success message\n const bodyDiv = document.querySelector('.mono-drawer-body');\n bodyDiv.innerHTML = '<\/p>\n

\n

Thank you!<\/h3>\n

Your review was submitted successfully.<\/p>\n<\/div>\n

';\n setTimeout(() => {\n closeDrawer();\n location.reload(); \/\/ Reload to show the new review safely\n }, 2500);\n }).catch(err => {\n if(submitBtn) {\n submitBtn.disabled = false;\n submitBtn.value = 'Submit Review';\n }\n alert(err.message);\n });\n });\n }<\/p>\n

\/\/ 4. AJAX Numbered Pagination\n const wrapper = document.getElementById('mono-custom-reviews-wrapper');\n const productId = wrapper ? wrapper.getAttribute('data-product-id') : 0;<\/p>\n

document.querySelectorAll('.mono-pagination').forEach(pagination => {\n pagination.addEventListener('click', function(e) {\n if (e.target.classList.contains('mono-page-btn')) {\n const btn = e.target;\n if (btn.classList.contains('active')) return;<\/p>\n

const type = pagination.getAttribute('data-type');\n const page = parseInt(btn.getAttribute('data-page'));\n const listId = type === 'product' ? 'mono-list-product' : 'mono-list-all';\n const listEl = document.getElementById(listId);<\/p>\n

\/\/ Update active state\n pagination.querySelectorAll('.mono-page-btn').forEach(b => b.classList.remove('active'));\n btn.classList.add('active');<\/p>\n

\/\/ Visual loading state\n listEl.style.opacity = '0.5';<\/p>\n

const formData = new FormData();\n formData.append('action', 'mono_load_reviews');\n formData.append('type', type);\n formData.append('page', page);\n formData.append('product_id', productId);<\/p>\n

fetch(mono_ajax.url, {\n method: 'POST',\n body: formData\n })\n .then(res => res.text())\n .then(html => {\n listEl.innerHTML = html;\n listEl.style.opacity = '1';\n bindLightboxes(); \/\/ Rebind lightboxes for new images<\/p>\n

\/\/ Smooth scroll to top of wrapper\n wrapper.scrollIntoView({behavior: 'smooth', block: 'start'});\n })\n .catch(() => {\n listEl.style.opacity = '1';\n alert('Error loading reviews.');\n });\n }\n });\n });<\/p>\n

\/\/ 5. Image Carousel Logic\n let galleryItems = [];\n let currentIndex = 0;<\/p>\n

const lightbox = document.getElementById('mono-lightbox');\n const lightboxImg = document.querySelector('.mono-lightbox-img');\n const lightboxStars = document.querySelector('.mono-lightbox-stars');\n const lightboxAuthor = document.querySelector('.mono-lightbox-author');\n const lightboxText = document.querySelector('.mono-lightbox-text');\n const prevBtn = document.querySelector('.mono-lightbox-prev');\n const nextBtn = document.querySelector('.mono-lightbox-next');<\/p>\n

function updateLightboxContent(index) {\n if (!galleryItems[index]) return;\n const data = galleryItems[index];\n lightboxImg.src = data.full;\n lightboxAuthor.textContent = data.author;\n lightboxText.textContent = data.text;<\/p>\n

let starsHtml = '';\n const rating = parseInt(data.rating) || 0;\n for (let i = 1; i <= 5; i++) {\n starsHtml += i <= rating ? '\u2605' : '\u2606';\n }\n lightboxStars.innerHTML = `${starsHtml}<\/span>`;<\/p>\n

\/\/ Update arrow visibility\n if (prevBtn) prevBtn.style.opacity = index === 0 ? '0.2' : '1';\n if (nextBtn) nextBtn.style.opacity = index === galleryItems.length - 1 ? '0.2' : '1';\n }<\/p>\n

function openLightbox(index) {\n currentIndex = index;\n updateLightboxContent(currentIndex);\n if (lightbox) lightbox.classList.add('is-active');\n document.body.style.overflow = 'hidden';\n }<\/p>\n

function closeLightbox() {\n if (lightbox) lightbox.classList.remove('is-active');\n document.body.style.overflow = '';\n }<\/p>\n

function bindLightboxes() {\n \/\/ Collect all images from the active DOM\n galleryItems = [];\n const items = document.querySelectorAll('.mono-gallery-item');<\/p>\n

items.forEach((item, index) => {\n \/\/ Build data array\n galleryItems.push({\n full: item.getAttribute('data-full'),\n author: item.getAttribute('data-author'),\n rating: item.getAttribute('data-rating'),\n text: item.getAttribute('data-text')\n });<\/p>\n

\/\/ Rebind click safely\n const newItem = item.cloneNode(true);\n item.parentNode.replaceChild(newItem, item);\n newItem.addEventListener('click', () => openLightbox(index));\n });\n }<\/p>\n

if (nextBtn) {\n nextBtn.addEventListener('click', () => {\n if (currentIndex {\n if (currentIndex > 0) updateLightboxContent(--currentIndex);\n });\n }<\/p>\n

const lightboxClose = document.querySelector('.mono-lightbox-close');\n const lightboxOverlay = document.querySelector('.mono-lightbox-overlay');\n if (lightboxClose) lightboxClose.addEventListener('click', closeLightbox);\n if (lightboxOverlay) lightboxOverlay.addEventListener('click', closeLightbox);<\/p>\n

\/\/ Bind initially\n bindLightboxes();\n});\n<\/p>\t\t\t\t<\/div><\/div><\/div><\/div>\n<\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t

\r\n\t\t\t\t\t
\r\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t
<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t
\r\n\t\t\t\t
\n\t\t\t\t\t

Related Products<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t
\r\n\t\t\t\t\t
\r\n\t\t\t\t
\n\t\t\t\t\t