> ## Documentation Index
> Fetch the complete documentation index at: https://docs.mention-me.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Referrer Tag – SAP Commerce Cloud
> Deploy the Mention Me referrer tag on your SAP Commerce Cloud order confirmation page
export const SignInNotice = ({message = "To see code snippets pre-filled with your partner code"}) => {
return ;
};
export const MerchantContext = () => {
const PARTNER_STORAGE_KEY = "mm-docs-partner";
const escapeHtml = str => str.replace(/&/g, "&").replace(//g, ">").replace(/"/g, """);
const getStoredPartner = () => {
try {
const raw = localStorage.getItem(PARTNER_STORAGE_KEY);
if (!raw) return null;
const data = JSON.parse(raw);
if (data && data.partnerCode) return data;
} catch (e) {}
return null;
};
const setStoredPartner = data => {
try {
localStorage.setItem(PARTNER_STORAGE_KEY, JSON.stringify(data));
} catch (e) {}
};
const clearStoredPartner = () => {
try {
localStorage.removeItem(PARTNER_STORAGE_KEY);
} catch (e) {}
};
const captureQueryParams = () => {
const params = new URLSearchParams(window.location.search);
const partner = params.get("partner");
const name = params.get("name");
if (partner) {
const data = {
partnerCode: partner
};
if (name) data.displayName = name;
setStoredPartner(data);
params.delete("partner");
params.delete("name");
const qs = params.toString();
const clean = window.location.pathname + (qs ? "?" + qs : "") + window.location.hash;
window.history.replaceState(null, "", clean);
return data;
}
return getStoredPartner();
};
const isLocal = typeof window !== "undefined" && window.location.hostname === "localhost";
const API_BASE = isLocal ? "http://localhost:3001" : "https://app.mention-me.com";
const SIGN_IN_BASE = isLocal ? "http://localhost:3001/sign-in" : "https://app.mention-me.com/sign-in";
const MERCHANT_WINDOW_KEY = "__mmMerchantContext";
const publishMerchant = data => {
window[MERCHANT_WINDOW_KEY] = data;
window.dispatchEvent(new CustomEvent("mm-merchant-ready", {
detail: data
}));
};
const clearMerchant = () => {
delete window[MERCHANT_WINDOW_KEY];
};
const BADGE_ID = "mm-partner-badge";
const showPartnerBadge = (partnerData, source) => {
if (document.getElementById(BADGE_ID)) return;
const nav = document.getElementById("navigation-items");
if (!nav || !nav.parentNode) return;
const badge = document.createElement("div");
badge.id = BADGE_ID;
badge.className = "mm-partner-badge";
const hasName = partnerData.displayName && partnerData.displayName !== partnerData.partnerCode;
const heading = hasName ? escapeHtml(partnerData.displayName) : escapeHtml(partnerData.partnerCode);
const code = hasName ? escapeHtml(partnerData.partnerCode) : "";
const codeStr = code ? ' ' + code + ' ' : '';
const resetTitle = source === "clerk" ? "Sign out and switch account" : "Clear personalisation";
badge.innerHTML = '' + '' + 'Personalised for ' + '' + heading + ' ' + codeStr + ' ' + '× ' + '
';
nav.parentNode.insertBefore(badge, nav);
badge.querySelector(".mm-partner-badge-reset").addEventListener("click", e => {
e.preventDefault();
e.stopPropagation();
if (source === "clerk" && window.Clerk && window.Clerk.signOut) {
clearMerchant();
const redirect = SIGN_IN_BASE + "?redirect_url=" + encodeURIComponent(window.location.href);
window.Clerk.signOut().then(() => {
window.location.href = redirect;
}).catch(() => {
window.location.reload();
});
return;
}
clearStoredPartner();
window.location.reload();
});
};
const removePartnerBadge = () => {
const el = document.getElementById(BADGE_ID);
if (el) el.remove();
};
const showNotices = () => {
document.querySelectorAll("[data-mm-sign-in]").forEach(el => {
el.style.display = "";
});
const redirect = SIGN_IN_BASE + "?redirect_url=" + encodeURIComponent(window.location.href);
document.querySelectorAll("[data-mm-sign-in-link]").forEach(a => {
a.href = redirect;
});
};
const hideNotices = () => {
document.querySelectorAll("[data-mm-sign-in]").forEach(el => {
el.style.display = "none";
});
};
const walkCodeBlocks = replacements => {
document.querySelectorAll("pre code").forEach(codeEl => {
let html = codeEl.innerHTML;
if (replacements) {
for (const [from, to] of replacements) {
html = html.split(from).join(escapeHtml(to));
}
}
const paramStyle = "color:inherit;filter:brightness(110%);font-weight:bold;text-decoration:underline;cursor:pointer";
html = html.replace(/(\?|&)([a-z_]+)=/g, (match, prefix, name) => {
const slug = name.replace(/_/g, "-");
const target = document.getElementById("param-" + slug);
if (!target) return match;
return prefix + '' + name + " =";
});
codeEl.innerHTML = html;
});
};
const observeTabSwitches = callback => {
let processing = false;
const observer = new MutationObserver(() => {
if (processing) return;
processing = true;
setTimeout(() => {
callback();
processing = false;
}, 50);
});
setTimeout(() => {
const tabs = document.querySelector("[role='tablist']");
if (tabs && tabs.parentElement) {
observer.observe(tabs.parentElement, {
attributes: true,
subtree: true,
childList: true
});
}
}, 500);
};
const pollForClerk = (onReady, onTimeout) => {
let n = 0;
const tick = () => {
if (window.Clerk && window.Clerk.loaded) {
return onReady(window.Clerk);
}
if (++n < 40) {
setTimeout(tick, 250);
} else {
onTimeout();
}
};
setTimeout(tick, 100);
};
const fetchMerchantFromAPI = () => {
return fetch(API_BASE + "/api/docs/context", {
credentials: "include",
cache: "no-store"
}).then(res => res.ok ? res.json() : null);
};
useEffect(() => {
let cancelled = false;
const urlPartner = captureQueryParams();
const onPersonalised = (merchant, source) => {
if (cancelled) return;
const replacements = [["YOUR_PARTNER_CODE", merchant.partnerCode]];
if (merchant.displayName) {
replacements.push(["YOUR_TRADING_NAME", merchant.displayName]);
}
hideNotices();
showPartnerBadge(merchant, source);
walkCodeBlocks(replacements);
observeTabSwitches(() => walkCodeBlocks(replacements));
};
const onUnauth = () => {
if (cancelled) return;
clearMerchant();
removePartnerBadge();
showNotices();
walkCodeBlocks(null);
observeTabSwitches(() => walkCodeBlocks(null));
};
const tryUrlFallback = () => {
if (cancelled) return;
if (urlPartner) {
onPersonalised(urlPartner, "url");
} else {
onUnauth();
}
};
if (!document.cookie.includes("__client_uat")) {
tryUrlFallback();
return;
}
pollForClerk(clerk => {
if (cancelled) return;
if (!clerk.session) {
tryUrlFallback();
return;
}
fetchMerchantFromAPI().then(data => {
if (data) {
publishMerchant(data);
onPersonalised(data, "clerk");
} else {
tryUrlFallback();
}
}).catch(() => tryUrlFallback());
}, () => {
if (!cancelled) tryUrlFallback();
});
return () => {
cancelled = true;
};
}, []);
return null;
};
In a Spartacus storefront the order confirmation page is rendered by the `OrderConfirmationModule` (typically `order-confirmation-thank-you-message.component.ts` / its CMS-mapped component). If you've customised checkout, confirm which component renders the confirmation route in your app.
Extend or override the confirmation component's template to include:
```html theme={null}
```
In the component's TypeScript, once the `Order` object resolves (from `OrderFacade`/`CheckoutService`), dynamically inject the script tag with the order details populated:
```html Demo theme={null}
```
```html Live theme={null}
```
Map `` placeholders to fields on the resolved `Order` (e.g. `order.deliveryAddress.firstName`, `order.code`, `order.totalPrice.value`, `order.totalPrice.currencyIso`), URL-encoding each value.
In the Accelerator (b2c-acceleratorstorefront) architecture, order confirmation is rendered from `orderConfirmationPage.jsp` (or your custom addon's equivalent under `web/webroot/WEB-INF/tags/...`).
Add the placeholder div and the JavaScript snippet directly into the JSP, using EL/JSTL to populate the order fields from the `orderData` model attribute:
```jsp theme={null}
```
Always URL-encode dynamic values and test against `tag-demo.mention-me.com` before switching to the live `tag.mention-me.com` host.
Full mandatory and optional parameter reference is on the [Referrer tag](/developer-docs/integration/entry-points/referrer) page.
## Troubleshooting
In Spartacus, ensure you're subscribing to the resolved `Order` observable rather than reading a snapshot before checkout completes. In Accelerator, confirm `orderData` is populated in the model before the JSP renders (check your controller/facade).