/* * ABConvert Variant B: geo welcome popup (KK-T008 / KUL-227) * Paste into: Custom Code > JavaScript. Pair with geo-popup.css in the CSS tab. * Works with either "Run JavaScript" option; it waits for the DOM if needed. * * Port of the theme's sections/geo-popup.liquid + geo-popup-modal.js, so the * home page template no longer has to be duplicated for the test. Differences * from the template version: * - Runs on whatever page the visitor lands on, not just the home page. * - Shows once per visitor (localStorage, cookie fallback), not once per session. * It counts as seen as soon as it opens, so a refresh or Back won't re-show it. * - Skips pages where a popup would get in the way (cart, account, etc.). * - Stays out of the way of the Klaviyo sign-up forms: if one is already open it * waits for the next page view, and while this popup is open the Klaviyo form * and its teaser are hidden (see geo-popup.css). * - Sends ABConvert custom events and dataLayer events for each action. * * Layout follows Figma "Geo Pop Up Edit Work" > FOR BO: pink icon per trust * point, a tilted rating badge beside them, plain close cross. * Testing: add ?kk_geo_reset to any URL to forget that the popup was seen. */ (function () { if (window.__kkGeoPopup) return; window.__kkGeoPopup = true; // Trust point icons from the Figma file (stroke colour comes from the CSS). var ICONS = { truck: '', package: '', tag: '', returns: '' }; var CLOSE_ICON = ''; var STAR_ICON = ''; var CONTENT = { heading: 'You’re shopping in the USA', // icon: a key of ICONS. note: optional smaller grey line under the text. benefits: [ { icon: 'truck', text: 'Same-day dispatch from the US', note: '1–2 day express available' }, { icon: 'package', text: 'Free shipping on $100+' }, { icon: 'tag', text: 'No surprise fees at checkout' }, { icon: 'returns', text: 'Easy, free returns & exchanges' } ], // Tilted pink badge beside the trust points. Set to null to hide it. rating: { score: '4.7', count: '35,000+' }, continueLabel: 'Continue shopping', changeRegionLabel: 'Not in the US? Change region', selectorHeading: 'Select your country', updateLabel: 'Update' }; // Same order and URLs as the theme's region selector (settings.*-site). var REGIONS = [ { value: 'us', label: '🇺🇸 USA', url: 'https://www.kulanikinis.com' }, { value: 'au', label: '🇦🇺 AUS + rest of the world', url: 'https://www.kulanikinis.com.au' }, { value: 'ca', label: '🇨🇦 Canada', url: 'https://kulanikinis.co' }, { value: 'uk', label: '🇬🇧 United Kingdom', url: 'https://kulanikinis.co.uk' }, { value: 'eu', label: '🇪🇺 Europe', url: 'https://kulanikiniseu.com' } ]; // Path prefixes where the popup never opens. The visitor still gets it on // their next eligible page view, since nothing is stored here. var EXCLUDED_PATHS = ['/cart', '/checkout', '/checkouts', '/account', '/orders', '/challenge', '/password', '/apps/']; var STORAGE_KEY = 'kk_geo_popup_seen'; var EVENT_PREFIX = 'geo_popup_'; // Mirrors the region detection in snippets/location-selector.liquid. // ".com.au" and ".co.uk" must be matched before ".co". function detectRegion() { var host = window.location.hostname; if (host.indexOf('kulanikiniseu') > -1 || host.indexOf('kulanikiniseurope') > -1) return 'eu'; if (host.indexOf('kulanikinis.com.au') > -1 || host.indexOf('kulanikini-r2') > -1) return 'au'; if (host.indexOf('kulanikinis.co.uk') > -1 || host.indexOf('kulanikinisuk') > -1) return 'uk'; if (host.indexOf('kulanikiniscanada') > -1 || host === 'kulanikinis.co' || host === 'www.kulanikinis.co') return 'ca'; return 'us'; } // Storage -------------------------------------------------------------------- function wasSeen() { try { if (window.localStorage.getItem(STORAGE_KEY)) return true; } catch (e) {} return document.cookie.indexOf(STORAGE_KEY + '=') > -1; } function markSeen() { try { window.localStorage.setItem(STORAGE_KEY, String(Date.now())); } catch (e) {} document.cookie = STORAGE_KEY + '=1; path=/; max-age=31536000; SameSite=Lax'; } // ?kk_geo_reset forgets the popup was seen, so it can be checked again. function resetIfAsked() { if (window.location.search.indexOf('kk_geo_reset') === -1) return; try { window.localStorage.removeItem(STORAGE_KEY); } catch (e) {} document.cookie = STORAGE_KEY + '=; path=/; max-age=0; SameSite=Lax'; } // Eligibility ---------------------------------------------------------------- function isExcludedPath() { var path = window.location.pathname.toLowerCase(); // Strip a locale prefix such as /en-us so the checks below still match. path = path.replace(/^\/[a-z]{2}(-[a-z]{2})?(?=\/|$)/, '') || '/'; for (var i = 0; i < EXCLUDED_PATHS.length; i++) { var prefix = EXCLUDED_PATHS[i]; if (path === prefix || path.indexOf(prefix.replace(/\/$/, '') + '/') === 0) return true; } return false; } function isVisible(el) { return Boolean(el && (el.offsetWidth || el.offsetHeight || el.getClientRects().length)); } // A Klaviyo popup/flyout that is already open (teasers don't count). function klaviyoFormOpen() { var forms = document.querySelectorAll( 'div[aria-label="POPUP Form"], div[aria-label="FLYOUT Form"], div[aria-label="FULLPAGE Form"]' ); for (var i = 0; i < forms.length; i++) { if (isVisible(forms[i])) return true; } return false; } function shouldShow() { if (window.Shopify && window.Shopify.designMode) return false; if (document.querySelector('.js-geoPopup')) return false; // template version is on the page if (wasSeen()) return false; if (isExcludedPath()) return false; if (klaviyoFormOpen()) return false; return true; } // Tracking ------------------------------------------------------------------- function track(action, props) { var name = EVENT_PREFIX + action; try { if (window.ABConvert && typeof window.ABConvert.track === 'function') { window.ABConvert.track(name, props || {}); } } catch (e) {} try { window.dataLayer = window.dataLayer || []; var payload = { event: name }; if (props) { for (var key in props) payload['geo_popup_' + key] = props[key]; } window.dataLayer.push(payload); } catch (e) {} } // Markup --------------------------------------------------------------------- function escapeHtml(value) { return String(value) .replace(/&/g, '&') .replace(//g, '>') .replace(/"/g, '"'); } function buildBenefits() { var items = ''; for (var b = 0; b < CONTENT.benefits.length; b++) { var benefit = CONTENT.benefits[b]; items += '

' + '' + (ICONS[benefit.icon] || '') + '' + '' + '' + escapeHtml(benefit.text) + '' + (benefit.note ? '' + escapeHtml(benefit.note) + '' : '') + '' + '

'; } return '

' + items + ''; } function buildRating() { var rating = CONTENT.rating; if (!rating) return ''; return ( // The inner wrapper is centred in the badge and left-aligns both lines, // so the star starts where "35,000+ reviews" starts. '

' + '' + '' + STAR_ICON + '' + escapeHtml(rating.score) + ' with' + '' + '' + escapeHtml(rating.count) + ' reviews' + '' + '

' ); } function buildMarkup(currentRegion) { var current = REGIONS[0]; for (var i = 0; i < REGIONS.length; i++) { if (REGIONS[i].value === currentRegion) current = REGIONS[i]; } var options = ''; for (var r = 0; r < REGIONS.length; r++) { var region = REGIONS[r]; options += ''; } return ( '

' + '' ); } // Focus trap ----------------------------------------------------------------- var FOCUSABLE = [ 'a[href]:not([disabled])', 'button:not([disabled])', 'textarea:not([disabled])', 'input:not([disabled])', 'select:not([disabled])', '[tabindex]:not([tabindex="-1"]):not([disabled])' ].join(','); // Keeps Tab / Shift+Tab inside `container`. Returns a function that removes the // trap and restores focus to the previously focused element. function focusTrap(container) { var previousActive = document.activeElement; function onKeydown(event) { if (event.key !== 'Tab') return; var nodes = Array.prototype.filter.call(container.querySelectorAll(FOCUSABLE), isVisible); if (!nodes.length) return; event.preventDefault(); var index = nodes.indexOf(document.activeElement); var next; if (event.shiftKey) { next = index > 0 ? index - 1 : nodes.length - 1; } else { next = index < 0 || index === nodes.length - 1 ? 0 : index + 1; } nodes[next].focus({ preventScroll: true }); } document.addEventListener('keydown', onKeydown); return function release() { document.removeEventListener('keydown', onKeydown); if (previousActive && previousActive.focus && document.contains(previousActive)) { previousActive.focus({ preventScroll: true }); } }; } // Popup ---------------------------------------------------------------------- function GeoPopup() { this.currentRegion = detectRegion(); var root = document.createElement('div'); root.className = 'kk-geo'; root.hidden = true; root.innerHTML = buildMarkup(this.currentRegion); document.body.appendChild(root); this.root = root; this.dialog = root.querySelector('.kk-geo__dialog'); this.screens = Array.prototype.slice.call(root.querySelectorAll('.kk-geo__screen')); this.dropdown = root.querySelector('.kk-geo__dropdown'); this.trigger = root.querySelector('.kk-geo__trigger'); this.list = root.querySelector('.kk-geo__list'); this.valueLabel = root.querySelector('.kk-geo__value'); this.options = Array.prototype.slice.call(root.querySelectorAll('.kk-geo__option')); this.selected = this.find(this.currentRegion) || this.options[0]; this.isOpen = false; this.releaseFocus = null; this.previousBodyOverflow = ''; this.onDocumentKeydown = this.onDocumentKeydown.bind(this); this.onDialogClick = this.onDialogClick.bind(this); this.bind(); } GeoPopup.prototype.find = function (value) { for (var i = 0; i < this.options.length; i++) { if (this.options[i].getAttribute('data-value') === value) return this.options[i]; } return null; }; GeoPopup.prototype.bind = function () { var self = this; Array.prototype.forEach.call(this.root.querySelectorAll('[data-kk-geo-close]'), function (el) { el.addEventListener('click', function () { self.close(el.classList.contains('kk-geo__overlay') ? 'overlay' : 'close_button'); }); }); this.root.querySelector('[data-kk-geo-continue]').addEventListener('click', function () { self.close('continue'); }); this.root.querySelector('[data-kk-geo-change]').addEventListener('click', function () { track('change_region'); self.showScreen('selector'); }); this.root.querySelector('[data-kk-geo-update]').addEventListener('click', function () { self.update(); }); this.trigger.addEventListener('click', function () { self.toggleList(); }); this.trigger.addEventListener('keydown', function (event) { self.onTriggerKeydown(event); }); this.list.addEventListener('keydown', function (event) { self.onListKeydown(event); }); this.options.forEach(function (option) { option.addEventListener('click', function () { self.selectOption(option); self.closeList(); self.trigger.focus(); }); option.addEventListener('mousemove', function () { self.focusOption(option, false); }); }); }; GeoPopup.prototype.open = function () { if (this.isOpen) return; this.isOpen = true; markSeen(); this.showScreen('welcome'); this.root.hidden = false; document.documentElement.classList.add('kk-geo-open'); this.previousBodyOverflow = document.body.style.overflow; document.body.style.overflow = 'hidden'; document.addEventListener('keydown', this.onDocumentKeydown); this.dialog.addEventListener('click', this.onDialogClick); var root = this.root; // Next frame so the transition runs from the hidden state. requestAnimationFrame(function () { requestAnimationFrame(function () { root.classList.add('is-open'); }); }); this.releaseFocus = focusTrap(this.dialog); // Focus the dialog itself: screen readers announce it and Tab lands on the // close button, without painting a focus ring on it. this.dialog.focus({ preventScroll: true }); track('shown', { path: window.location.pathname }); }; GeoPopup.prototype.close = function (reason) { if (!this.isOpen) return; this.isOpen = false; if (reason) track('dismiss', { method: reason }); this.closeList(); this.root.classList.remove('is-open'); document.documentElement.classList.remove('kk-geo-open'); document.body.style.overflow = this.previousBodyOverflow; document.removeEventListener('keydown', this.onDocumentKeydown); this.dialog.removeEventListener('click', this.onDialogClick); if (typeof this.releaseFocus === 'function') { this.releaseFocus(); this.releaseFocus = null; } var root = this.root; var reduceMotion = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches; setTimeout(function () { root.hidden = true; }, reduceMotion ? 0 : 350); }; GeoPopup.prototype.showScreen = function (name) { var active = null; this.screens.forEach(function (screen) { var isActive = screen.getAttribute('data-screen') === name; screen.hidden = !isActive; if (isActive) active = screen; }); var heading = active && active.querySelector('.kk-geo__heading'); if (heading && heading.id) this.dialog.setAttribute('aria-labelledby', heading.id); if (name === 'selector' && this.isOpen) this.trigger.focus({ preventScroll: true }); }; GeoPopup.prototype.onDocumentKeydown = function (event) { if (event.key !== 'Escape' || !this.isOpen) return; if (this.isListOpen()) { event.preventDefault(); this.closeList(); this.trigger.focus(); return; } this.close('escape'); }; GeoPopup.prototype.onDialogClick = function (event) { if (this.isListOpen() && !this.dropdown.contains(event.target)) this.closeList(); }; // Redirect ------------------------------------------------------------------- GeoPopup.prototype.update = function () { var target = this.selected ? this.selected.getAttribute('data-value') : null; var baseUrl = this.selected ? (this.selected.getAttribute('data-url') || '').trim() : ''; if (!target || target === this.currentRegion || !baseUrl) { track('update', { region: target || this.currentRegion, redirected: false }); this.close(); return; } track('update', { region: target, redirected: true }); window.location.assign(baseUrl.replace(/\/+$/, '') + window.location.pathname); }; // Dropdown (listbox) --------------------------------------------------------- GeoPopup.prototype.isListOpen = function () { return !this.list.hidden; }; GeoPopup.prototype.toggleList = function () { if (this.isListOpen()) this.closeList(); else this.openList(); }; GeoPopup.prototype.openList = function () { this.list.hidden = false; this.trigger.setAttribute('aria-expanded', 'true'); this.dropdown.classList.add('is-expanded'); this.focusOption(this.selected || this.options[0], true); }; GeoPopup.prototype.closeList = function () { if (this.list.hidden) return; this.list.hidden = true; this.trigger.setAttribute('aria-expanded', 'false'); this.dropdown.classList.remove('is-expanded'); this.options.forEach(function (option) { option.classList.remove('is-focused'); }); }; GeoPopup.prototype.selectOption = function (option) { if (!option) return; this.selected = option; this.options.forEach(function (item) { item.setAttribute('aria-selected', item === option ? 'true' : 'false'); }); this.valueLabel.textContent = option.textContent.trim(); }; GeoPopup.prototype.focusOption = function (option, moveDomFocus) { if (!option) return; this.options.forEach(function (item) { item.classList.toggle('is-focused', item === option); }); this.list.setAttribute('aria-activedescendant', option.id || ''); if (moveDomFocus) this.list.focus({ preventScroll: true }); }; GeoPopup.prototype.focusedOption = function () { for (var i = 0; i < this.options.length; i++) { if (this.options[i].classList.contains('is-focused')) return this.options[i]; } return this.selected || this.options[0]; }; GeoPopup.prototype.moveFocus = function (delta) { var index = this.options.indexOf(this.focusedOption()); var next = (index + delta + this.options.length) % this.options.length; this.focusOption(this.options[next], true); }; GeoPopup.prototype.onTriggerKeydown = function (event) { if (event.key === 'ArrowDown' || event.key === 'ArrowUp' || event.key === 'Enter' || event.key === ' ') { event.preventDefault(); this.openList(); } }; GeoPopup.prototype.onListKeydown = function (event) { switch (event.key) { case 'ArrowDown': event.preventDefault(); this.moveFocus(1); break; case 'ArrowUp': event.preventDefault(); this.moveFocus(-1); break; case 'Home': event.preventDefault(); this.focusOption(this.options[0], true); break; case 'End': event.preventDefault(); this.focusOption(this.options[this.options.length - 1], true); break; case 'Enter': case ' ': event.preventDefault(); this.selectOption(this.focusedOption()); this.closeList(); this.trigger.focus(); break; case 'Tab': this.closeList(); break; default: break; } }; // Boot ----------------------------------------------------------------------- function init() { resetIfAsked(); if (!shouldShow()) return; new GeoPopup().open(); } if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', init); } else { init(); } })();

' + escapeHtml(CONTENT.heading) + '

' + escapeHtml(CONTENT.selectorHeading) + '

OFFERS

Your paradise pass is waiting...

Brazilian Bikini Bottoms

Mid-Rise Brazilian Bikini Bottom Electric Bloom

Mid-Rise Brazilian Bikini Bottom Barefoot Breeze

Mid-Rise Brazilian Bikini Bottom Neon Sunset

FILTER

Trending Searches