/* * 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. */ (function () { if (window.__kkGeoPopup) return; window.__kkGeoPopup = true; var CONTENT = { heading: 'You’re shopping in the USA 🇺🇸', benefits: [ 'Same-Day Dispatch From Our US Warehouse', 'Free Shipping On Orders Over $100', '1-2 Day Express Shipping Option Available', 'Duties & Taxes Included', '★ 4.7 Rating From Over 35,000 reviews', 'Free Returns & Exchanges' ], continueLabel: 'Continue shopping', changeRegionLabel: 'Choose shopping 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'; } // 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 buildMarkup(currentRegion) { var current = REGIONS[0]; for (var i = 0; i < REGIONS.length; i++) { if (REGIONS[i].value === currentRegion) current = REGIONS[i]; } var benefits = ''; for (var b = 0; b < CONTENT.benefits.length; b++) { benefits += '

' + escapeHtml(CONTENT.benefits[b]) + '

'; } 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() { 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...

RE-KINI

Double Bind Triangle Bikini Top Sunkissed Stripe

Double Bind Crop Halter Bikini Top Sunkissed Stripe

Double Bind Twin Strap Bikini Bottom Sunkissed Stripe

Double Bind Cheeky Tie Bikini Bottom Sunkissed Stripe

Scrunchie Electric Bloom

RE-KINI

Introducing RE-KINI: Our Sustainable Swimwear Collection

FILTER

Trending Searches