attributes
const host = priceEl?.closest?.('salla-product-price') || priceEl?.querySelector?.('salla-product-price') || priceEl;
const attr = Number(host?.getAttribute?.('sale-price')) || Number(host?.getAttribute?.('price'));
if (attr) return attr;
// 3) DOM text: take the LARGEST non-zero number (Salla prints "0 150 150" / "old new")
const nums = (priceEl?.textContent || '').replace(/,/g,'').match(/\d+(?:\.\d+)?/g) || [];
const vals = nums.map(Number).filter((n) => n > 0);
return vals.length ? Math.max(...vals) : null;
}
function injectPdpEditorialMeta(info,title) {
if (!info || !title) return;
const meta = getMeta(title.textContent || '');
if (!meta) return;
title.textContent = (title.textContent || '').trim();
if (!info.querySelector('.kv-pdp-meta-head')) {
const head = document.createElement('div');
head.className = 'kv-pdp-meta-head';
head.innerHTML = `Products→${meta.category}
${meta.skin}
`;
title.parentElement?.insertBefore(head,title);
}
if (!info.querySelector('.kv-pdp-category-line')) {
const volume = extractDescriptionField('Volume');
const line = document.createElement('div');
line.className = 'kv-pdp-category-line';
line.textContent = volume ? `${meta.category} · ${volume}` : meta.category;
title.insertAdjacentElement('afterend',line);
}
const price = info.querySelector('[data-testid="store-product-price"],.s-product-price,salla-product-price,.product-price');
if (price && !info.querySelector('.kv-pdp-price-block')) {
const base = readPdpPrice(price);
const block = document.createElement('div');
block.className = 'kv-pdp-price-block';
block.innerHTML = base
? `SAR ${base.toFixed(2)} EXCL. VAT
SAR ${(base*1.15).toFixed(2)} including 15% VAT`
: `${(price.textContent||'').trim()} EXCL. VAT
`;
price.insertAdjacentElement('beforebegin', block);
}
hideNativePriceDisplays(info);
if (!info.querySelector('.kv-pdp-stock-concern')) {
const block = document.createElement('div');
block.className = 'kv-pdp-stock-concern';
block.innerHTML = ` IN STOCK${meta.concern}`;
const editorial = info.querySelector('.kv-pdp-editorial');
if (editorial) info.insertBefore(block,editorial); else title.insertAdjacentElement('afterend',block);
}
}
function enforceBuyRow(info) {
const row = info?.querySelector('.kv-pdp-buy-row');
if (!row) return;
const imp = (el, props) => { if (el) Object.entries(props).forEach(([k, v]) => el.style.setProperty(k, v, 'important')); };
const H = '52px';
const allNodes = (root) => {
const out = [];
const walk = (node) => {
out.push(node);
if (node.shadowRoot) Array.from(node.shadowRoot.children).forEach(walk);
Array.from(node.children || []).forEach(walk);
};
walk(root);
return out;
};
imp(row, { display: 'flex', 'align-items': 'center', gap: '12px', width: '100%' });
/* ---- stepper: − 1 + , all 52px, centred ---- */
const qty = row.querySelector('salla-quantity-input,[data-testid="store-product-quantity"],.s-quantity-input');
if (qty) {
imp(qty, { display: 'inline-flex', 'flex-direction': 'row-reverse', 'align-items': 'center', height: H, 'min-height': H, padding: '0', margin: '0', border: '1px solid rgba(35,31,32,.35)', 'border-radius': '999px', background: '#fff', overflow: 'hidden', direction: 'ltr' });
allNodes(qty).forEach((el) => {
if (el === qty) return;
const tag = el.tagName;
if (tag === 'BUTTON' || el.getAttribute?.('role') === 'button') {
imp(el, { display: 'flex', 'align-items': 'center', 'justify-content': 'center', width: '40px', height: H, 'min-height': '0', padding: '0', margin: '0', border: '0', background: 'transparent', color: '#231F20', 'line-height': '1' });
} else if (tag === 'INPUT') {
imp(el, { display: 'block', width: '40px', height: H, padding: '0', margin: '0', border: '0', background: 'transparent', 'text-align': 'center', font: "700 13px/" + H + " 'Montserrat', Arial, sans-serif", color: '#231F20', '-moz-appearance': 'textfield' });
} else if (tag === 'DIV' || tag === 'SPAN') {
imp(el, { display: 'flex', 'flex-direction': 'row-reverse', 'align-items': 'center', height: H, 'min-height': '0', padding: '0', margin: '0', border: '0', background: 'transparent', 'box-shadow': 'none' });
}
});
}
/* ---- add-to-cart: one black 52px pill, nothing else visible ---- */
const host = row.querySelector('[data-testid="store-product-add-to-cart"],salla-add-product-button');
if (host) {
imp(host, { flex: '1 1 auto', display: 'flex', height: H, 'min-height': H, width: 'auto', margin: '0' });
let mainBtn = null;
allNodes(host).forEach((el) => {
if (el === host) return;
const text = (el.textContent || '').replace(/\s+/g, ' ').trim().toLowerCase();
const isBtn = el.tagName === 'BUTTON' || el.tagName === 'SALLA-BUTTON' || el.tagName === 'A';
if (isBtn && !mainBtn && /add to cart|أضف/.test(text)) {
mainBtn = el;
const pill = { display: 'flex', 'align-items': 'center', 'justify-content': 'center', width: '100%', height: H, 'min-height': H, padding: '0 28px', margin: '0', border: '0', 'border-radius': '999px', background: '#231F20', color: '#fff', font: "700 11px/1 'Montserrat', Arial, sans-serif", 'letter-spacing': '.12em', 'text-transform': 'uppercase', 'box-shadow': 'none', cursor: 'pointer' };
imp(el, pill);
allNodes(el).forEach((inner) => {
if (inner === el) return;
const t = inner.tagName;
if (t === 'BUTTON' || t === 'A' || t === 'SALLA-BUTTON') imp(inner, pill);
else if (t === 'DIV' || t === 'SPAN') imp(inner, { display: 'flex', 'align-items': 'center', 'justify-content': 'center', width: '100%', height: H, 'min-height': '0', padding: '0', margin: '0', background: 'transparent', color: '#fff', border: '0' });
else if (t === 'SVG' || t === 'I') imp(inner, { display: 'none' });
});
return;
}
if (isBtn && mainBtn && el !== mainBtn && !el.contains(mainBtn) && !mainBtn.contains(el)) {
imp(el, { display: 'none' });
return;
}
if (/^(buy now|buy with|اشتر الآن|شراء سريع)/.test(text) && el.children.length <= 3 && !el.contains(mainBtn)) {
imp(el, { display: 'none' });
return;
}
if (!isBtn && (el.tagName === 'DIV' || el.tagName === 'SPAN') && el.contains(mainBtn)) {
imp(el, { display: 'flex', width: '100%', height: H, 'min-height': '0', padding: '0', margin: '0', gap: '0' });
}
});
}
/* anything else that slipped into the row after the host */
Array.from(row.children).forEach((child) => {
if (child !== qty && child !== host) imp(child, { display: 'none' });
});
}
function simplifyPdpPurchaseArea(info) {
if (!info) return;
const form = info.querySelector('[data-testid="store-product-form"]');
const add = info.querySelector('[data-testid="store-product-add-to-cart"],salla-add-product-button');
const qty = info.querySelector('salla-quantity-input,[data-testid="store-product-quantity"],.s-quantity-input');
if (form) form.classList.add('kv-pdp-form');
// Hide Salla's native purchase controls; we render our own row below.
[add, qty].forEach((el) => el && el.classList.add('kv-pdp-hide'));
info.querySelectorAll('salla-quick-order,salla-apple-pay,salla-quick-buy,apple-pay-button,[data-testid="store-product-quick-buy"],.s-quick-order,.s-apple-pay,.s-add-product-button-quick-buy,[class*="quick-buy"],.quick-buy')
.forEach((el) => el.classList.add('kv-pdp-hide'));
hideNativePriceDisplays(info);
if (!info.querySelector('.kv-buy-row')) {
const anchor = form || add;
if (!anchor) return;
const productId = currentProductId();
anchor.insertAdjacentHTML('afterend', `
Build Your Routine
Cash on delivery available.
⚕Doctor Approved · KOTIVA StandardFormulated with clinically proven active ingredients
`);
bindBuyRow(info.querySelector('.kv-buy-row'));
}
}
function bindBuyRow(row) {
if (!row || row.dataset.kvBound === '1') return;
row.dataset.kvBound = '1';
const input = row.querySelector('.kv-qty-input');
const getQty = () => Math.max(1, parseInt(input.value, 10) || 1);
const setQty = (n) => { input.value = String(Math.max(1, n)); };
input.addEventListener('change', () => setQty(getQty()));
row.querySelectorAll('[data-kv-qty]').forEach((btn) =>
btn.addEventListener('click', () => setQty(getQty() + Number(btn.dataset.kvQty))));
const id = Number(row.dataset.productId || 0);
const busy = (on) => row.querySelectorAll('.kv-btn').forEach((b) => { b.disabled = on; b.classList.toggle('is-busy', on); });
const addToCart = async () => {
if (!id || !window.salla?.cart?.addItem) throw new Error('Salla cart API unavailable');
return window.salla.cart.addItem({ id, quantity: getQty() });
};
row.querySelector('[data-kv-action="add"]').addEventListener('click', async () => {
busy(true);
try { await addToCart(); }
catch (e) { console.error('KOTIVA add to cart failed', e); window.salla?.notify?.error?.('Could not add to cart'); }
finally { busy(false); }
});
row.querySelector('[data-kv-action="buy"]').addEventListener('click', async () => {
busy(true);
try { await addToCart(); window.location.assign(`${window.location.origin}/cart`); }
catch (e) { console.error('KOTIVA buy now failed', e); busy(false); }
});
}
function hidePdpExtras() {
document.querySelectorAll('[data-testid="store-product-social-share"],[data-testid="store-product-wishlist-btn"],.product-sku-wrapper')
.forEach((el) => el.classList.add('kv-pdp-hide'));
document.querySelectorAll('div,section').forEach((el) => {
const text = (el.textContent || '').trim();
if (text.includes('Secure payment') && text.includes('Fast shipping') && text.includes('Quality guarantee')) el.classList.add('kv-pdp-trust-strip');
});
}
function currentProductId() {
const pathMatch = location.pathname.match(/(?:-|\/)p(\d+)(?=\/|$)/i);
const fromPath = Number(pathMatch?.[1] || 0);
if (fromPath) return fromPath;
const configValue = Number(window.salla?.config?.get?.('page.id') || 0);
return configValue || null;
}
function hideAllNativeProductSliders() {
document.querySelectorAll('salla-products-slider').forEach((slider) => {
if (slider.closest('#kv-similar-products-v6')) return;
const wrapper = slider.closest('section') || slider.closest('.container') || slider.parentElement || slider;
wrapper.classList.add('kv-native-pdp-slider-hidden');
});
document.querySelectorAll('[data-testid="store-product-related"]').forEach((node) => {
const wrapper = node.closest('section') || node.closest('.container') || node;
wrapper.classList.add('kv-native-pdp-slider-hidden');
});
// Hide Enaya recommendation headings/wrappers that can remain after its slider is hidden.
document.querySelectorAll('section,div').forEach((node) => {
if (node.closest('#kv-similar-products-v6')) return;
const text = (node.textContent || '').replace(/\s+/g, ' ').trim().toLowerCase();
if ((text === 'complete your routine' || text === 'similar products' || text === 'you may also like') && node.querySelector('salla-products-slider')) {
node.classList.add('kv-native-pdp-slider-hidden');
}
});
}
function removeExistingCustomSimilar() {
document.getElementById('kv-similar-products-v6')?.remove();
document.getElementById('kv-similar-products')?.remove();
}
async function buildSameCategorySimilarProducts() {
hideAllNativeProductSliders();
removeExistingCustomSimilar();
const title = document.querySelector('[data-testid="store-product-title"]');
const currentMeta = getMeta(title?.textContent || '');
if (!currentMeta) return;
const catalog = await getCatalog(false);
if (!catalog.length) return;
const currentId = currentProductId();
const currentName = normalize(title?.textContent || '');
const siblings = catalog.filter((product) => {
const meta = getMeta(product?.name || '');
if (!meta || meta.relatedCategory !== currentMeta.relatedCategory) return false;
if (currentId && Number(product?.id) === Number(currentId)) return false;
if (normalize(product?.name) === currentName) return false;
return true;
});
// No siblings means absolutely no section and no reserved whitespace.
if (!siblings.length) return;
const section = document.createElement('section');
section.id = 'kv-similar-products-v6';
section.innerHTML = `
${siblings.slice(0, 4).map((product) => catalogCardHtml(product)).join('')}
`;
const footer = document.getElementById('kotiva-salla-footer') || document.querySelector('footer');
if (footer?.parentElement) footer.parentElement.insertBefore(section, footer);
else document.body.appendChild(section);
section.querySelectorAll('salla-add-product-button').forEach((button) => styleNativeAddButton(button));
}
let pdpInitialized=false;
let pdpObserver=null;
function initPdp() {
if (!isProductPage()) return false;
const {title,form,gallery,info,row} = findPdpParts();
if (!title || !gallery || !info) return false;
document.documentElement.classList.add('kv-pdp');
document.body.classList.add('kv-pdp-body');
document.querySelectorAll('#kv-shop-hero,#kv-shop-controls,#kv-empty-filter,#kv-load-more-v5').forEach((el) => el.remove());
gallery.classList.add('kv-pdp-gallery');
info.classList.add('kv-pdp-info');
row?.classList.add('kv-pdp-main-row');
moveDescriptionIntoInfo(info,form);
injectPdpEditorialMeta(info,title);
simplifyPdpPurchaseArea(info);
hideStrayDescriptions(info);
hidePdpExtras();
hideAllNativeProductSliders();
collapseEmptyPdpSections();
if (!pdpObserver) {
let pending = null;
pdpObserver = new MutationObserver(() => {
if (pending) return;
pending = setTimeout(() => {
pending = null;
simplifyPdpPurchaseArea(info);
hideStrayDescriptions(info);
hideNativePriceDisplays(info);
hideAllNativeProductSliders();
collapseEmptyPdpSections();
}, 120);
});
pdpObserver.observe(info, { childList:true, subtree:true });
}
if (!pdpInitialized) {
pdpInitialized=true;
buildSameCategorySimilarProducts();
setTimeout(hideAllNativeProductSliders,900);
setTimeout(hideAllNativeProductSliders,1800);
}
return true;
}
function start() {
if (isProductPage()) {
let tries=0;
const timer=setInterval(() => {
tries += 1;
if (initPdp() || tries >= 20) clearInterval(timer);
},150);
return;
}
if (cleanPath() === ROOT_PATH) {
let tries=0;
const timer=setInterval(() => {
tries += 1;
const list=findMasterProductList();
if (list) { clearInterval(timer); initListing(); }
else if (tries >= 30) clearInterval(timer);
},150);
}
}
if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded',start,{once:true});
else start();
window.addEventListener('load',() => {
if (isProductPage()) initPdp();
else if (cleanPath() === ROOT_PATH && !listingReady) initListing();
},{once:true});
})();