/* * 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...

Trio Ring Triangle Bikini Top

Trio Ring Triangle Bikini Top Guava Glow

Trio Ring Triangle Bikini Top Apple Blossom

Trio Ring Triangle Bikini Top Mystic Moon

Trio Ring Triangle Bikini Top Starry Seas

FILTER

Trending Searches

Need a hand?