/* Template Script : all pages| jsembed:name:home | jsembed/home.js */ (function () { document.addEventListener("DOMContentLoaded", function () { console.log('site-script running'); //Prompt an anonymous visitor to sign in on the home and product pages. A guest counts //as not signed in, the same test the psp uses. /products is the catalogue and ///product/ the display page, so one includes() covers both; home is the default //route, reachable as / or /home. const path = location.pathname.toLowerCase().replace(/\/+$/, ''); const notSignedIn = (app.permission == '' || app.permission == 'guest'); const promptPage = (path == '' || path == '/home' || path.includes('/product')); const homePage = (path == '' || path == '/home'); //there is a single shared toast element, so a controller message on this page load //(a failed sign in, a registration error) has to keep it rather than be overwritten. if (notSignedIn && promptPage && app.lastResponse == '') { toast.toast('Please sign in to view products', 'Attention'); } //Hide the shop location picker. The nav renders client side, so a style rule //covers elements that do not exist yet; hiding the collapse alone would leave //the Location button toggling nothing, so the button that controls it goes too. const hideLocation = document.createElement('style'); hideLocation.textContent = '#menu-location,' + '.menu-location,' + '[data-bs-target="#menu-location"],' + '[aria-controls="menu-location"]' + '{ display: none !important; }'; document.head.appendChild(hideLocation); //Account link, duplicated out of the dropdown so the signed-in account is //readable without opening the menu. It sits immediately before the account //dropdown, so it reads to the left of it on desktop; under 1200px //(navbar-expand-xl) the whole navbar-nav is in the offcanvas, so it appears //there beside the account item like every other nav entry. // //.account-name and .trans-currency are filled by appUI.setUserInfo via //querySelectorAll, so this copy is populated and kept in sync for free - //nothing here needs to know the account details or listen for a sign in. const accountCurrency = document.querySelector('.ki-cms-nav .navbar-nav .dropdown-toggle .trans-currency'); const accountItem = accountCurrency ? accountCurrency.closest('.nav-item') : null; if (accountItem && !document.querySelector('.ki-account-quick')) { const quick = document.createElement('li'); quick.className = 'nav-item ki-account-quick'; //a straight clone of the cart / favourites / bookmarks links - same classes, //inline-block btn, icon span with pt-1, small with ps-1 pt-1. navbar-nav is //a flex row with align-items:normal, so every link top-aligns and its own //height decides where its text lands; laying this one out differently (an //inline-flex with align-items-center, say) puts it ~10px off the row. quick.innerHTML = '' + // 'login' + 'login Sign In / Register' + //Caption under the account name, signed in only. It is a SIBLING of //.account-name, not inside it: appUI.setUserInfo replaces that //element's innerHTML on load and again on every POS customer switch, //so anything written inside is wiped - which is what happens to the //"Sign In / Register" text above once a visitor signs in. // //Empty here; the ki:account:changed listener below fills it. The //d-none keeps it out of the row until there is something to show. '' + ''; accountItem.before(quick); //rounded-0 is the square-theme marker, not a style choice: appUI.Theme //strips it from .themeclass elements when the site theme is rounded. That //pass has already run by the time this is injected, so re-run it or this //link stays square while the rest of the nav is rounded. //appUI is script scoped, not a window property - test it bare, the way //this file already reaches app and toast. window.appUI is undefined. if (typeof appUI !== 'undefined' && appUI.Theme) { appUI.Theme(); } } //Text labels on the icon-only nav buttons. A row of eight glyphs is a //guessing game for the practice staff who use this site, so each button //says what it is. The platform already renders a count in every //one of them (#ki-cart-no and friends), so the label goes immediately //before that span: icon, label, count, and a badge still reads "Cart 3". // //Anchored on those count ids rather than on position or icon name - the //nav's order is the CMS's to change, but a button with a count has a //purpose, and that is what names it. Cart is the exception: it is two //

s, one shown when empty and one when full, and only the full one //carries an id, so the empty one is matched by its class instead. const NAV_LABELS = [ ['#ki-notifications-no', 'Messages'], ['.cart-empty > a > small', 'Cart'], ['#ki-cart-no', 'Cart'], ['#ki-quote-no', 'Quote'], ['#ki-favorites-no', 'Favourites'], ['#ki-bookmarks-no', 'Bookmarks'], ['#ki-oos-no', 'Lead Time'] ]; NAV_LABELS.forEach(function (entry) { const count = document.querySelector('.ki-cms-nav ' + entry[0]); if (!count) return; const link = count.closest('a'); if (!link || link.querySelector('.ki-nav-label')) return; //pe-1 because the count span it sits against has no leading space of //its own on every button; pt-1 to sit on the same line as the icon, //the way the existing nav s do. const label = document.createElement('small'); label.className = 'ps-1 pe-1 pt-1 ki-nav-label'; label.textContent = entry[1]; count.before(label); }); //A dedicated Account button, last in the row, as the previous storefront //has it. The account name link above also goes to /account, but it reads //as a name rather than a place; this one is the familiar "Account" button. //Same markup as Bookmarks / Favourites so it sits on their line; site.css //orders it after Messages. const navList = accountItem ? accountItem.parentElement : null; if (navList && !navList.querySelector('.ki-account-nav')) { const accountNav = document.createElement('li'); accountNav.className = 'nav-item ki-account-nav'; accountNav.innerHTML = '' + 'person' + 'Account' + ''; navList.append(accountNav); } //Sign Out, after the account name and before Cart, as the previous //storefront has it (site.css orders it). /account/switch is the platform's //own sign out (the account menu's Sign Out links there): it resets the //authorisation and shows the signed-out page. // //Always added, hidden until the ki:account:changed listener below marks //the nav .ki-signed-in (site.css). That event carries the permission the //platform itself uses to switch its Sign In / Sign Out menu entries, and //fires on every stamp of the account - a one-off app.permission read here //at load showed the button to a guest. if (navList && !navList.querySelector('.ki-signout-nav')) { const signOutNav = document.createElement('li'); signOutNav.className = 'nav-item ki-signout-nav'; signOutNav.innerHTML = '' + 'logout' + 'Sign Out' + ''; navList.append(signOutNav); } //Fill the account caption from the account data. koala-impala fires //ki:account:changed at the end of appUI.setUserInfo, which is the one //place both paths that change the account end up: the page load, and the //POS customer switch. It fires after the name has been stamped, so what //is written here is not overwritten. // //detail carries identity, account and permission, so nothing here has to //reach for the script-scoped app object. permission 0 is a guest - the //caption stays hidden and the "Sign In / Register" placeholder stands. // //This is the piece to edit: build whatever the caption should say from //detail.account / detail.identity. Keep it short, it shares the nav row //and a long caption costs the search box its width first. document.addEventListener('ki:account:changed', function (e) { //app is fully populated by the time this fires - that is the point of //the event. Logging it here shows what is actually available to build //the caption from; at the markup above it is still half empty. const detail = e.detail || {}; const signedIn = detail.permission && detail.permission != 'guest'; //Sign Out shows only while signed in - site.css keys it on this class. if (navList) navList.classList.toggle('ki-signed-in', !!signedIn); const note = document.querySelector('.ki-cms-nav .ki-account-quick .ki-account-note'); if (!note) return; //The account's discount, for everyone signed in. The company needs no //caption: setUserInfo writes it into .account-name itself, on the line //under the name. The caption is held to one line (navLabelFit below), //so the title carries the full text when it is cut off. const text = signedIn ? app.account.discountDescription || '' : ''; note.textContent = text; note.title = text; note.classList.toggle('d-none', text == ''); }); //The left panel (the menu_open button at the end of the row) is a staff //tool - admin, salesperson, designer and the other back-office roles. //Customers and visitors have the shop menu for the same navigation, so //for a guest, a signed-out visitor or a plain account user the button is //taken off the row. Same style-rule approach as above, for the same reason. const customerOnly = notSignedIn || app.permission == 'account'; if (customerOnly) { const hidePanelLeft = document.createElement('style'); hidePanelLeft.textContent = '.ki-cms-nav .navbar-nav > li:has(#panel-left-btn) { display: none !important; }'; document.head.appendChild(hidePanelLeft); } //Two rules that keep the labelled row inside the band. The band is fixed //and .main-body reserves exactly its height, so anything that makes the //row taller slides the page underneath it. // //nowrap, because a label that breaks in two makes its button two lines //tall, and the tallest button is what sets the band height. // //The clamp, because the account name is .text-wrap with nothing capping //it: on a tight row "name + company" takes a third line and the band //grows to 125px. Two lines is what this nav was built to hold - site.css //says so where it sets the height - so cap it there and let a longer name //ellipsis. Every width, not a strip: a long enough name does this at any //size. Signed in, site.css replaces the clamp with one line each for name //and company, the icon in a column beside them. // //Nothing else is needed. The search gives up width on its own now that //koala-impala lets it shrink from xl up instead of holding a 400px floor. //Re-measured with Quote back (signed in as staff, panel button showing): //band 96px, no overflow at 1200 / 1280 / 1536, search 152px at its //tightest (1200) - the width Quote was hidden to save, now given up. //Before that, with Lead Time back, the Account button added and site.css's //larger nav type: band 96px, no overflow at 1200 / 1279 / 1707, search //253px at its tightest (1200). //Originally measured //at 1200, 1240 and 1279 with a long account name signed in: no overflow, //band exactly 96px, search still 278px at its tightest. const navLabelFit = document.createElement('style'); navLabelFit.textContent = '.ki-nav-label { white-space: nowrap; }' + '.ki-cms-nav .ki-account-quick .account-name {' + 'display: -webkit-box;' + '-webkit-line-clamp: 2;' + '-webkit-box-orient: vertical;' + 'overflow: hidden;' + '}' + //the caption under it: one line, cut with an ellipsis, so the slot //stays name + one line however long the company or discount is '.ki-cms-nav .ki-account-quick .ki-account-note {' + 'display: block;' + 'max-width: 14rem;' + 'margin: 0 auto;' + 'white-space: nowrap;' + 'overflow: hidden;' + 'text-overflow: ellipsis;' + '}'; document.head.appendChild(navLabelFit); //Show the left menu on a timer, then close it again. The audience is older //B2B buyers and the panel-left button reads as just another icon in a row of //icons, so the menu introduces itself rather than waiting to be found. // //Home only, and once per load. On the product and cart pages the visitor is //already somewhere deliberate, and this stacks on the sign-in toast and the //recent-activity toast - three things moving at once is noise, not guidance. // //If the visitor reaches for the menu while it is open the auto-close is //cancelled - a menu that shuts as you move onto it is worse than one that //never opened. Same reason it does not re-show if they got there first. // const PEEK_DELAY = 1200; //let the page paint before anything moves // const PEEK_HOLD = 4000; //long enough to read, short enough not to block // const panelLeft = document.getElementById('panel-left'); // if (homePage && panelLeft && window.bootstrap && bootstrap.Offcanvas) { // const peek = bootstrap.Offcanvas.getOrCreateInstance(panelLeft); // let hold; // setTimeout(function () { // if (panelLeft.classList.contains('show')) { // return; // } // peek.show(); // hold = setTimeout(function () { peek.hide(); }, PEEK_HOLD); // }, PEEK_DELAY); // //the visitor is using it - stop the timer closing it under them // panelLeft.addEventListener('pointerdown', function () { clearTimeout(hold); }); // } //Nav links that apply an attribute filter instead of navigating. //attributeId / attributeValueId come from kicAttributeApi. const FILTERS = { '/products/promotions': { name: 'Promotion', value: 'On Promotion', id: '12', valueId: '557' }, '/products/clearance': { name: 'Clearance', value: 'Clearance Stock', id: '8', valueId: '7' } }; //delegated: the nav renders client side, so the links may not exist yet document.addEventListener('click', function (e) { const link = e.target.closest('a[href]'); if (!link) return; let path; try { path = new URL(link.href, location.origin).pathname.toLowerCase().replace(/\/+$/, ''); } catch (err) { return; } const f = FILTERS[path]; if (!f) return; e.preventDefault(); //a nav link means "show me only this", so replace rather than accumulate app.setCache('attributefilter', f.name); app.setCache('attributeidfilter', f.id); app.setCache('attributevaluefilter', f.value); app.setCache('attributevalueidfilter', f.valueId); window.location.href = '/products'; }); //The same two shortcuts as rows in the shop menu block, between the //Filters section and Clear Filters. // //No click handler of their own: they are plain anchors pointing at the //two paths in FILTERS above, and the delegated listener already catches //any a[href] whose pathname matches. So the rows inherit the filter //behaviour, and adding a third shortcut means adding it to FILTERS and //to this list, nothing else. // //Inserted around the menu's OWN Clear Filters - hence ':scope >'. There //are three elements with that name in the block; the other two live //inside the attributes panel and only appear when it is expanded. const MENU_SHORTCUTS = [ ['/products/promotions', 'sell', 'Filter Promotions'], ['/products/clearance', 'percent', 'Filter Clearance'] ]; //And below Clear Filters, the two CMS pages. Ordinary page links, not //filters: neither path is in FILTERS, so the listener above leaves them //alone and they navigate straight there. They sit below the rule because //they leave the catalogue rather than narrow it. const MENU_PAGES = [ ['/home/catalogue', 'menu_book', 'Catalogue'], ['/home/promotions', 'campaign', 'Promotions'] ]; function addShopMenuShortcuts() { document.querySelectorAll('.ki-shop-menu').forEach(function (menu) { if (menu.querySelector('.ki-shop-shortcut')) return; const clear = menu.querySelector(':scope > [name="search-atribute-remove"]'); if (!clear) return; //same classes as the menu's Cart / Shop All rows, so these sit in the //type scale and row height koala-impala sets for the block function shortcutRow(entry) { const row = document.createElement('a'); row.className = 'btn text-start w-100 ki-shop-menu-btn commerce ki-shop-shortcut'; row.href = entry[0]; row.innerHTML = '' + entry[1] + '' + ''; return row; } MENU_SHORTCUTS.forEach(function (entry) { clear.before(shortcutRow(entry)); }); //after() puts each row directly under Clear Filters, so inserting //straight from the list would come out reversed. Walk the anchor //forward instead: the row just added becomes the anchor for the next. let anchor = clear; MENU_PAGES.forEach(function (entry) { const row = shortcutRow(entry); anchor.after(row); anchor = row; }); }); } //The block renders client side, after this script has run, and re-renders //when a filter changes - so a one-shot call would miss it or lose the rows //later. The observer re-adds them whenever a menu turns up without them; //the guard above is what keeps it cheap, since it exits on the first //element for any menu already done. addShopMenuShortcuts(); new MutationObserver(addShopMenuShortcuts) .observe(document.body, { childList: true, subtree: true }); //Favourite / bookmark / rating buttons on the product cards. The platform //shows a selected one only by swapping the glyph (favorite -> heart_check, //bookmark -> book, a rated star star -> star_half), writing a new span each //time. Tag the selected glyph so site.css can style it; deselecting writes //a fresh, untagged span. const SELECTED_GLYPHS = { favorite: 'heart_check', bookmark: 'book', rate: 'star_half' }; function markSelectedIcons() { document.querySelectorAll('.btn[data-action="favorite"] > .material-symbols-sharp, .btn[data-action="bookmark"] > .material-symbols-sharp, .btn[data-action="rate"] > .material-symbols-sharp').forEach(function (icon) { const selected = SELECTED_GLYPHS[icon.parentElement.dataset.action]; icon.classList.toggle('kic-icon-selected', icon.textContent.trim() === selected); }); } markSelectedIcons(); new MutationObserver(markSelectedIcons) .observe(document.body, { childList: true, subtree: true }); //One-step checkout. The cart and invoice payment forms post to ///payment/PayNow, which only stores the choice and redirects here, where //koala-impala-psp.js builds the same form again with the same option ticked //and waits for a second Confirm Order | Pay Now - the same step twice. When //we have just arrived from that post, press it for the buyer. // //paynow is the layout's TempData object (Views/Shared/Scripts.cshtml): it //carries a reference and the ticked option only on the load straight after ///payment/PayNow, never on a Track visit or a reload, which is what keeps //this to a fresh checkout (TempData is read once, so a reload or Back cannot //submit it twice). A payment already recorded as successful stops it. // //Only an Active order cart, a quote the buyer has accepted, or a posted //invoice paid through an online PSP is completed for them. An unrequested or //requested quote and Confirmed - Account/Paid keep the manual button - //CartConfirmed patches the order to Confirmed - Account whatever its status, //so an automatic press there could confirm it twice. An invoice ticked On //Account (eft) keeps it too: it is already on account, and CartConfirmed //patches a sales header, not an invoice. A posted invoice already Confirmed - //Paid is never pressed: its "Payment Successful" line loads after the form, //so the success check below can come too late for it. const AUTOPAY_SETTLE = 1500; //the form is rebuilt as the header views render const AUTOPAY_GIVE_UP = 30000; const AUTOPAY_ALLOWED = ['order:active', 'quote:quote accepted']; if (typeof paynow !== 'undefined' && paynow.pspselected && paynow.pspselected != 'eft') AUTOPAY_ALLOWED.push('invoice'); //'documentType:cartStatus' of the header shown on the page, 'invoice' for a //posted invoice, '' until it renders. Views rename data-name to //data-name_ (koala-impala-view.js), so match on the attribute value. function autopayDocument() { const views = document.querySelectorAll('#paymentpage [id^="view-salesheader_"], #paymentpage [id^="view-salesinvheader_"]'); const field = function (view, name) { for (const el of view.querySelectorAll('span, div')) { const named = [...el.attributes].some(a => a.name.startsWith('data-name') && a.value == name); const text = named ? el.textContent.trim() : ''; if (text) return text.toLowerCase(); } return ''; }; for (const view of views) { const status = field(view, 'cartStatus'); if (status && view.id.startsWith('view-salesinvheader_')) return status == 'confirmed - paid' ? 'invoice:paid' : 'invoice'; const type = field(view, 'documentType'); if (type && status) return type + ':' + status; } return ''; } if (path.startsWith('/payment/') && typeof paynow !== 'undefined' && paynow.reference && paynow.pspselected) { const autopayStart = Date.now(); let readyForm = null; let readySince = 0; const autopay = setInterval(function () { if (Date.now() - autopayStart > AUTOPAY_GIVE_UP) { clearInterval(autopay); return; } const doc = autopayDocument(); if (doc && !AUTOPAY_ALLOWED.includes(doc)) { clearInterval(autopay); return; } const form = document.querySelector('#paymentpage .psp .ki-psp-form'); const option = form && form[paynow.pspselected]; if (!doc || !form || !option || !option.checked || !form.submit || form.submit.disabled) { readyForm = null; return; } if (form != readyForm) { readyForm = form; readySince = Date.now(); return; } if (Date.now() - readySince < AUTOPAY_SETTLE) return; clearInterval(autopay); const responses = document.getElementById('response_' + form.id); if (responses && responses.querySelector('.alert-success')) return; toast.toast('Completing your checkout…', 'Checkout', true); form.submit.click(); }, 250); } //Messages stay up for 10s instead of the layout's 5s - "added to cart" and //"no products found" were gone before an older buyer found them. Bootstrap //reads data-bs-delay each time the toast is built, so this holds for every //message; hovering still pauses it. site.css moves it on screen. const MESSAGE_DELAY = 10000; const toastEl = document.getElementById('toastEl'); if (toastEl) { toastEl.setAttribute('data-bs-delay', MESSAGE_DELAY); } //A way to clear the Messages list. Toast.Notification rewrites the whole //#ki-notifications dropdown from the cached list on every message, so the //control is re-added after each rewrite by wrapping it, not added once. //window.Toast is the layout's class; toast is its script-scoped instance, //reached bare the way this file reaches app. function addClearMessages() { const list = document.getElementById('ki-notifications'); if (!list || list.querySelector('.ki-clear-messages')) return; const item = document.createElement('li'); item.className = 'p-1 text-center ki-clear-messages'; if (list.querySelector('li')) { item.innerHTML = '' + 'clear_allClear all messages' + ''; item.querySelector('a').addEventListener('click', function (e) { e.preventDefault(); e.stopPropagation(); app.removeCache('notifications'); app.removeCache('notificationsNo'); toast.Notification(); }); list.prepend(item); } else { item.innerHTML = 'No messages'; list.append(item); } } if (window.Toast && Toast.prototype.Notification && !Toast.prototype.kicClearWrapped) { const notification = Toast.prototype.Notification; Toast.prototype.Notification = function (html, time) { notification.call(this, html, time); addClearMessages(); }; Toast.prototype.kicClearWrapped = true; } addClearMessages(); }); }());

Henry Schein Online

FINISHING DRILL 3

Product

Navigation

Contact Information

Info

Connect with us