<!doctype html>
<html lang="en">
<head >
<meta charset="utf-8"/>
<meta name="title" content="Shopping Cart"/>
<meta name="description" content="This is a demo store for the Hyvä Checkout product"/>
<meta name="robots" content="NOINDEX,NOFOLLOW"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>Shopping Cart</title>
<link rel="stylesheet" type="text/css" media="all" href="https://checkout-demo.hyva.io/static/version1741272610/frontend/Hyva/Checkout/en_US/css/styles.css" />
<link rel="icon" type="image/x-icon" href="https://checkout-demo.hyva.io/static/version1741272610/frontend/Hyva/Checkout/en_US/Magento_Theme/favicon.ico" />
<link rel="shortcut icon" type="image/x-icon" href="https://checkout-demo.hyva.io/static/version1741272610/frontend/Hyva/Checkout/en_US/Magento_Theme/favicon.ico" />
<script>
var BASE_URL = 'https://checkout-demo.hyva.io/onestep/';
var THEME_PATH = 'https://checkout-demo.hyva.io/static/version1741272610/frontend/Hyva/Checkout/en_US';
var COOKIE_CONFIG = {
"expires": null,
"path": "\u002F",
"domain": ".checkout\u002Ddemo.hyva.io",
"secure": false,
"lifetime": "3600",
"cookie_restriction_enabled": false };
var CURRENT_STORE_CODE = 'onestep';
var CURRENT_WEBSITE_ID = '1';
window.hyva = window.hyva || {}
window.cookie_consent_groups = window.cookie_consent_groups || {}
window.cookie_consent_groups['necessary'] = true;
window.cookie_consent_config = window.cookie_consent_config || {};
window.cookie_consent_config['necessary'] = [].concat(
window.cookie_consent_config['necessary'] || [],
[
'user_allowed_save_cookie',
'form_key',
'mage-messages',
'private_content_version',
'mage-cache-sessid',
'last_visited_store',
'section_data_ids'
]
);
</script>
<script>
'use strict';
(function( hyva, undefined ) {
function lifetimeToExpires(options, defaults) {
const lifetime = options.lifetime || defaults.lifetime;
if (lifetime) {
const date = new Date;
date.setTime(date.getTime() + lifetime * 1000);
return date;
}
return null;
}
function generateRandomString() {
const allowedCharacters = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ',
length = 16;
let formKey = '',
charactersLength = allowedCharacters.length;
for (let i = 0; i < length; i++) {
formKey += allowedCharacters[Math.round(Math.random() * (charactersLength - 1))]
}
return formKey;
}
const sessionCookieMarker = {noLifetime: true}
const cookieTempStorage = {};
const internalCookie = {
get(name) {
const v = document.cookie.match('(^|;) ?' + name + '=([^;]*)(;|$)');
return v ? v[2] : null;
},
set(name, value, days, skipSetDomain) {
let expires,
path,
domain,
secure,
samesite;
const defaultCookieConfig = {
expires: null,
path: '/',
domain: null,
secure: false,
lifetime: null,
samesite: 'lax'
};
const cookieConfig = window.COOKIE_CONFIG || {};
expires = days && days !== sessionCookieMarker
? lifetimeToExpires({lifetime: 24 * 60 * 60 * days, expires: null}, defaultCookieConfig)
: lifetimeToExpires(window.COOKIE_CONFIG, defaultCookieConfig) || defaultCookieConfig.expires;
path = cookieConfig.path || defaultCookieConfig.path;
domain = !skipSetDomain && (cookieConfig.domain || defaultCookieConfig.domain);
secure = cookieConfig.secure || defaultCookieConfig.secure;
samesite = cookieConfig.samesite || defaultCookieConfig.samesite;
document.cookie = name + "=" + encodeURIComponent(value) +
(expires && days !== sessionCookieMarker ? '; expires=' + expires.toGMTString() : '') +
(path ? '; path=' + path : '') +
(domain ? '; domain=' + domain : '') +
(secure ? '; secure' : '') +
(samesite ? '; samesite=' + samesite : 'lax');
},
isWebsiteAllowedToSaveCookie() {
const allowedCookies = this.get('user_allowed_save_cookie');
if (allowedCookies) {
const allowedWebsites = JSON.parse(unescape(allowedCookies));
return allowedWebsites[CURRENT_WEBSITE_ID] === 1;
}
return false;
},
getGroupByCookieName(name) {
const cookieConsentConfig = window.cookie_consent_config || {};
let group = null;
for (let prop in cookieConsentConfig) {
if (!cookieConsentConfig.hasOwnProperty(prop)) continue;
if (cookieConsentConfig[prop].includes(name)) {
group = prop;
break;
}
}
return group;
},
isCookieAllowed(name) {
const cookieGroup = this.getGroupByCookieName(name);
return cookieGroup
? window.cookie_consent_groups[cookieGroup]
: this.isWebsiteAllowedToSaveCookie();
},
saveTempStorageCookies() {
for (const [name, data] of Object.entries(cookieTempStorage)) {
if (this.isCookieAllowed(name)) {
this.set(name, data['value'], data['days'], data['skipSetDomain']);
delete cookieTempStorage[name];
}
}
}
};
hyva.getCookie = (name) => {
const cookieConfig = window.COOKIE_CONFIG || {};
if (cookieConfig.cookie_restriction_enabled && ! internalCookie.isCookieAllowed(name)) {
return cookieTempStorage[name] ? cookieTempStorage[name]['value'] : null;
}
return internalCookie.get(name);
}
hyva.setCookie = (name, value, days, skipSetDomain) => {
const cookieConfig = window.COOKIE_CONFIG || {};
if (cookieConfig.cookie_restriction_enabled && ! internalCookie.isCookieAllowed(name)) {
cookieTempStorage[name] = {value, days, skipSetDomain};
return;
}
return internalCookie.set(name, value, days, skipSetDomain);
}
hyva.setSessionCookie = (name, value, skipSetDomain) => {
return hyva.setCookie(name, value, sessionCookieMarker, skipSetDomain)
}
hyva.getBrowserStorage = () => {
const browserStorage = window.localStorage || window.sessionStorage;
if (!browserStorage) {
console.warn('Browser Storage is unavailable');
return false;
}
try {
browserStorage.setItem('storage_test', '1');
browserStorage.removeItem('storage_test');
} catch (error) {
console.warn('Browser Storage is not accessible', error);
return false;
}
return browserStorage;
}
hyva.postForm = (postParams) => {
const form = document.createElement("form");
let data = postParams.data;
if (! postParams.skipUenc && ! data.uenc) {
data.uenc = btoa(window.location.href);
}
form.method = "POST";
form.action = postParams.action;
Object.keys(postParams.data).map(key => {
const field = document.createElement("input");
field.type = 'hidden'
field.value = postParams.data[key];
field.name = key;
form.appendChild(field);
});
const form_key = document.createElement("input");
form_key.type = 'hidden';
form_key.value = hyva.getFormKey();
form_key.name="form_key";
form.appendChild(form_key);
document.body.appendChild(form);
form.submit();
}
hyva.getFormKey = function () {
let formKey = hyva.getCookie('form_key');
if (!formKey) {
formKey = generateRandomString();
hyva.setCookie('form_key', formKey);
}
return formKey;
}
hyva.formatPrice = (value, showSign, options = {}) => {
const groupSeparator = options.groupSeparator;
const decimalSeparator = options.decimalSeparator
delete options.groupSeparator;
delete options.decimalSeparator;
const formatter = new Intl.NumberFormat(
'en\u002DUS',
Object.assign({
style: 'currency',
currency: 'EUR',
signDisplay: showSign ? 'always' : 'auto'
}, options)
);
return (typeof Intl.NumberFormat.prototype.formatToParts === 'function') ?
formatter.formatToParts(value).map(({type, value}) => {
switch (type) {
case 'currency':
return '\u20AC' || value;
case 'minusSign':
return '- ';
case 'plusSign':
return '+ ';
case 'group':
return groupSeparator !== undefined ? groupSeparator : value;
case 'decimal':
return decimalSeparator !== undefined ? decimalSeparator : value;
default :
return value;
}
}).reduce((string, part) => string + part) :
formatter.format(value);
}
const formatStr = function (str, nStart) {
const args = Array.from(arguments).slice(2);
return str.replace(/(%+)([0-9]+)/g, (m, p, n) => {
const idx = parseInt(n) - nStart;
if (args[idx] === null || args[idx] === void 0) {
return m;
}
return p.length % 2
? p.slice(0, -1).replace('%%', '%') + args[idx]
: p.replace('%%', '%') + n;
})
}
hyva.str = function (string) {
const args = Array.from(arguments);
args.splice(1, 0, 1);
return formatStr.apply(undefined, args);
}
hyva.strf = function () {
const args = Array.from(arguments);
args.splice(1, 0, 0);
return formatStr.apply(undefined, args);
}
/**
* Take a html string as `content` parameter and
* extract an element from the DOM to replace in
* the current page under the same selector,
* defined by `targetSelector`
*/
hyva.replaceDomElement = (targetSelector, content) => {
// Parse the content and extract the DOM node using the `targetSelector`
const parser = new DOMParser();
const doc = parser.parseFromString(content, 'text/html');
const contentNode = doc.querySelector(targetSelector);
// Bail if content can't be found
if (!contentNode) {
return;
}
hyva.activateScripts(contentNode)
// Replace the old DOM node with the new content
document.querySelector(targetSelector).replaceWith(contentNode);
// Reload customerSectionData and display cookie-messages if present
window.dispatchEvent(new CustomEvent("reload-customer-section-data"));
hyva.initMessages();
}
hyva.activateScripts = (contentNode) => {
// Extract all the script tags from the content.
// Script tags won't execute when inserted into a dom-element directly,
// therefore we need to inject them to the head of the document.
const tmpScripts = contentNode.getElementsByTagName('script');
if (tmpScripts.length > 0) {
// Push all script tags into an array
// (to prevent dom manipulation while iterating over dom nodes)
const scripts = [];
for (let i = 0; i < tmpScripts.length; i++) {
scripts.push(tmpScripts[i]);
}
// Iterate over all script tags and duplicate+inject each into the head
for (let i = 0; i < scripts.length; i++) {
let script = document.createElement('script');
script.innerHTML = scripts[i].innerHTML;
document.head.appendChild(script);
// Remove the original (non-executing) node from the content
scripts[i].parentNode.removeChild(scripts[i]);
}
}
return contentNode;
}
const replace = {['+']: '-', ['/']: '_', ['=']: ','};
hyva.getUenc = () => btoa(window.location.href).replace(/[+/=]/g, match => replace[match]);
let currentTrap;
const focusableElements = (rootElement) => {
const selector = 'button, [href], input, select, textarea, details, [tabindex]:not([tabindex="-1"]';
return Array.from(rootElement.querySelectorAll(selector))
.filter(el => {
return el.style.display !== 'none'
&& !el.disabled
&& el.tabIndex !== -1
&& (el.offsetWidth || el.offsetHeight || el.getClientRects().length)
})
}
const focusTrap = (e) => {
const isTabPressed = e.key === 'Tab' || e.keyCode === 9;
if (!isTabPressed) return;
const focusable = focusableElements(currentTrap)
const firstFocusableElement = focusable[0]
const lastFocusableElement = focusable[focusable.length - 1]
e.shiftKey
? document.activeElement === firstFocusableElement && (lastFocusableElement.focus(), e.preventDefault())
: document.activeElement === lastFocusableElement && (firstFocusableElement.focus(), e.preventDefault())
};
hyva.releaseFocus = (rootElement) => {
if (currentTrap && (!rootElement || rootElement === currentTrap)) {
currentTrap.removeEventListener('keydown', focusTrap)
currentTrap = null
}
}
hyva.trapFocus = (rootElement) => {
if (!rootElement) return;
hyva.releaseFocus()
currentTrap = rootElement
rootElement.addEventListener('keydown', focusTrap)
const firstElement = focusableElements(rootElement)[0]
firstElement && firstElement.focus()
}
hyva.alpineInitialized = (fn) => window.addEventListener('alpine:initialized', fn, {once: true})
window.addEventListener('user-allowed-save-cookie', () => internalCookie.saveTempStorageCookies())
}( window.hyva = window.hyva || {} ));
</script>
<script>
if (!window.IntersectionObserver) {
window.IntersectionObserver = function (callback) {
this.observe = el => el && callback(this.takeRecords());
this.takeRecords = () => [{isIntersecting: true, intersectionRatio: 1}];
this.disconnect = () => {};
this.unobserve = () => {};
}
}
</script>
</head>
<body id="html-body" class="checkout-cart-index page-layout-1column">
<input name="form_key" type="hidden" value="niMfAeAzjpeI3di3" />
<noscript>
<section class="message global noscript border-b-2 border-blue-500 bg-blue-50 shadow-none m-0 px-0 rounded-none font-normal">
<div class="container text-center">
<p>
<strong>JavaScript seems to be disabled in your browser.</strong>
<span>
For the best experience on our site, be sure to turn on Javascript in your browser. </span>
</p>
</div>
</section>
</noscript>
<script>
document.body.addEventListener('touchstart', () => {}, {passive: true})
</script>
<div class="page-wrapper"><header class="page-header"><a class="action skip sr-only focus:not-sr-only focus:absolute focus:z-40 focus:bg-white
contentarea"
href="#contentarea">
<span>
Skip to Content </span>
</a>
<script>
function initHeader () {
return {
searchOpen: false,
cart: {},
isCartOpen: false,
getData(data) {
if (data.cart) { this.cart = data.cart }
},
isCartEmpty() {
return !this.cart.summary_count
},
toggleCart(event) {
if (event.detail && event.detail.isOpen !== undefined) {
this.isCartOpen = event.detail.isOpen
if (!this.isCartOpen && this.$refs && this.$refs.cartButton) {
this.$refs.cartButton.focus()
}
} else {
this.isCartOpen = true
}
}
}
}
function initCompareHeader() {
return {
compareProducts: null,
itemCount: 0,
receiveCompareData(data) {
if (data['compare-products']) {
this.compareProducts = data['compare-products'];
this.itemCount = this.compareProducts.count;
}
}
}
}
</script>
<div id="header"
class="relative z-30 w-full border-b shadow bg-container-lighter border-container-lighter"
x-data="initHeader()"
@private-content-loaded.window="getData(event.detail.data)"
>
<div class="container flex flex-wrap lg:flex-nowrap items-center justify-between w-full px-6 py-3 mx-auto mt-0">
<!--Logo-->
<div class="order-1 sm:order-2 lg:order-1 w-full pb-2 sm:w-auto sm:pb-0">
<a
class="flex items-center justify-center text-xl font-medium tracking-wide text-gray-800
no-underline hover:no-underline font-title"
href="https://checkout-demo.hyva.io/onestep/"
aria-label="Go to Home page"
>
<img
src="https://checkout-demo.hyva.io/static/version1741272610/frontend/Hyva/Checkout/en_US/images/logo.svg"
alt="Store logo"
width="189" height="64" loading="eager"
/>
</a>
</div>
<!--Main Navigation-->
<nav
x-data="initMenuMobile_67d7d70ac012c()"
@load.window="setActiveMenu($root)"
@keydown.window.escape="closeMenu()"
class="z-20 order-2 sm:order-1 lg:order-2 navigation lg:hidden w-12 h-12"
aria-label="Site navigation"
role="navigation"
>
<!-- mobile -->
<button
x-ref="mobileMenuTrigger"
@click="openMenu()"
:class="{'overflow-x-hidden overflow-y-auto fixed top-0 left-0 w-full' : open}"
type="button"
aria-label="Open menu"
aria-haspopup="menu"
:aria-expanded="open"
:hidden="open"
>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="p-3" width="48" height="48" :class="{ 'hidden' : open, 'block': !open }" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16"/>
</svg>
</button>
<div
x-ref="mobileMenuNavLinks"
class="
fixed top-0 right-0 w-full h-full p-1 hidden
flex-col border-t border-container bg-container-lighter
overflow-y-auto overflow-x-hidden
"
:class="{ 'flex': open, 'hidden': !open }"
:aria-hidden="open ? 'false' : 'true'"
role="dialog"
aria-modal="true"
>
<ul
class="border-t flex flex-col gap-y-1 mt-16"
aria-label="Site navigation links"
>
<li
data-child-id="category-node-20-main"
class="level-0"
>
<div
class="flex items-center transition-transform duration-150 ease-in-out transform"
:class="{
'-translate-x-full' : mobilePanelActiveId,
'translate-x-0' : !mobilePanelActiveId
}"
>
<a
class="flex items-center w-full px-8 py-4 border-b cursor-pointer
bg-container-lighter border-container level-0
"
href="https://checkout-demo.hyva.io/onestep/women.html"
title="Women"
>
Women </a>
<button
@click="openSubcategory('category-node-20')"
class="absolute right-0 flex items-center justify-center w-11 h-11 mr-8 cursor-pointer
bg-container-lighter border-container"
aria-label="Open Women subcategories"
aria-haspopup="true"
:aria-expanded="mobilePanelActiveId === 'category-node-20'"
>
<div class="w-8 h-8 border rounded">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-full h-full p-1" width="24" height="24" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"/>
</svg>
</div>
</button>
</div>
<div
data-child-id="category-node-20"
class="absolute top-0 right-0 z-10 flex flex-col gap-1 w-full h-full p-1 bg-container-lighter"
:class="{
'hidden': mobilePanelActiveId !== 'category-node-20'
}"
>
<ul
class="mt-16 transition-transform duration-200 ease-in-out translate-x-full transform"
:class="{
'translate-x-full' : mobilePanelActiveId !== 'category-node-20',
'translate-x-0' : mobilePanelActiveId === 'category-node-20',
}"
aria-label="Subcategories"
>
<li>
<button
type="button"
class="flex items-center px-8 py-4 border-b cursor-pointer bg-container border-container w-full border-t"
@click="backToMainCategories('category-node-20-main')"
aria-label="Back to main categories"
>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" width="24" height="24" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7"/>
</svg>
<span class="ml-4">
Women </span>
</button>
</li>
<li>
<a
href="https://checkout-demo.hyva.io/onestep/women.html"
title="Women"
class="flex items-center w-full px-8 py-4 border-b cursor-pointer
bg-container-lighter border-container
"
>
<span class="ml-10">
View All </span>
</a>
</li>
<li>
<a
href="https://checkout-demo.hyva.io/onestep/women/tops-women.html"
title="Tops"
class="flex items-center w-full px-8 py-4 border-b cursor-pointer
bg-container-lighter border-container
"
>
<span class="ml-10 text-base text-gray-700">
Tops </span>
</a>
</li>
<li>
<a
href="https://checkout-demo.hyva.io/onestep/women/bottoms-women.html"
title="Bottoms"
class="flex items-center w-full px-8 py-4 border-b cursor-pointer
bg-container-lighter border-container
"
>
<span class="ml-10 text-base text-gray-700">
Bottoms </span>
</a>
</li>
</ul>
<button
@click="closeMenu()"
class="absolute flex justify-end w-16 self-end mb-1 transition-none"
aria-label="Close menu"
>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="hidden p-4" width="64" height="64" :class="{ 'hidden' : !open, 'block': open }" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/>
</svg>
</button>
</div>
</li>
<li
data-child-id="category-node-11-main"
class="level-0"
>
<div
class="flex items-center transition-transform duration-150 ease-in-out transform"
:class="{
'-translate-x-full' : mobilePanelActiveId,
'translate-x-0' : !mobilePanelActiveId
}"
>
<a
class="flex items-center w-full px-8 py-4 border-b cursor-pointer
bg-container-lighter border-container level-0
"
href="https://checkout-demo.hyva.io/onestep/men.html"
title="Men"
>
Men </a>
<button
@click="openSubcategory('category-node-11')"
class="absolute right-0 flex items-center justify-center w-11 h-11 mr-8 cursor-pointer
bg-container-lighter border-container"
aria-label="Open Men subcategories"
aria-haspopup="true"
:aria-expanded="mobilePanelActiveId === 'category-node-11'"
>
<div class="w-8 h-8 border rounded">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-full h-full p-1" width="24" height="24" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"/>
</svg>
</div>
</button>
</div>
<div
data-child-id="category-node-11"
class="absolute top-0 right-0 z-10 flex flex-col gap-1 w-full h-full p-1 bg-container-lighter"
:class="{
'hidden': mobilePanelActiveId !== 'category-node-11'
}"
>
<ul
class="mt-16 transition-transform duration-200 ease-in-out translate-x-full transform"
:class="{
'translate-x-full' : mobilePanelActiveId !== 'category-node-11',
'translate-x-0' : mobilePanelActiveId === 'category-node-11',
}"
aria-label="Subcategories"
>
<li>
<button
type="button"
class="flex items-center px-8 py-4 border-b cursor-pointer bg-container border-container w-full border-t"
@click="backToMainCategories('category-node-11-main')"
aria-label="Back to main categories"
>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" width="24" height="24" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7"/>
</svg>
<span class="ml-4">
Men </span>
</button>
</li>
<li>
<a
href="https://checkout-demo.hyva.io/onestep/men.html"
title="Men"
class="flex items-center w-full px-8 py-4 border-b cursor-pointer
bg-container-lighter border-container
"
>
<span class="ml-10">
View All </span>
</a>
</li>
<li>
<a
href="https://checkout-demo.hyva.io/onestep/men/tops-men.html"
title="Tops"
class="flex items-center w-full px-8 py-4 border-b cursor-pointer
bg-container-lighter border-container
"
>
<span class="ml-10 text-base text-gray-700">
Tops </span>
</a>
</li>
<li>
<a
href="https://checkout-demo.hyva.io/onestep/men/bottoms-men.html"
title="Bottoms"
class="flex items-center w-full px-8 py-4 border-b cursor-pointer
bg-container-lighter border-container
"
>
<span class="ml-10 text-base text-gray-700">
Bottoms </span>
</a>
</li>
</ul>
<button
@click="closeMenu()"
class="absolute flex justify-end w-16 self-end mb-1 transition-none"
aria-label="Close menu"
>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="hidden p-4" width="64" height="64" :class="{ 'hidden' : !open, 'block': open }" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/>
</svg>
</button>
</div>
</li>
<li
data-child-id="category-node-3-main"
class="level-0"
>
<div
class="flex items-center transition-transform duration-150 ease-in-out transform"
:class="{
'-translate-x-full' : mobilePanelActiveId,
'translate-x-0' : !mobilePanelActiveId
}"
>
<a
class="flex items-center w-full px-8 py-4 border-b cursor-pointer
bg-container-lighter border-container level-0
"
href="https://checkout-demo.hyva.io/onestep/gear.html"
title="Gear"
>
Gear </a>
<button
@click="openSubcategory('category-node-3')"
class="absolute right-0 flex items-center justify-center w-11 h-11 mr-8 cursor-pointer
bg-container-lighter border-container"
aria-label="Open Gear subcategories"
aria-haspopup="true"
:aria-expanded="mobilePanelActiveId === 'category-node-3'"
>
<div class="w-8 h-8 border rounded">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-full h-full p-1" width="24" height="24" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"/>
</svg>
</div>
</button>
</div>
<div
data-child-id="category-node-3"
class="absolute top-0 right-0 z-10 flex flex-col gap-1 w-full h-full p-1 bg-container-lighter"
:class="{
'hidden': mobilePanelActiveId !== 'category-node-3'
}"
>
<ul
class="mt-16 transition-transform duration-200 ease-in-out translate-x-full transform"
:class="{
'translate-x-full' : mobilePanelActiveId !== 'category-node-3',
'translate-x-0' : mobilePanelActiveId === 'category-node-3',
}"
aria-label="Subcategories"
>
<li>
<button
type="button"
class="flex items-center px-8 py-4 border-b cursor-pointer bg-container border-container w-full border-t"
@click="backToMainCategories('category-node-3-main')"
aria-label="Back to main categories"
>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" width="24" height="24" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7"/>
</svg>
<span class="ml-4">
Gear </span>
</button>
</li>
<li>
<a
href="https://checkout-demo.hyva.io/onestep/gear.html"
title="Gear"
class="flex items-center w-full px-8 py-4 border-b cursor-pointer
bg-container-lighter border-container
"
>
<span class="ml-10">
View All </span>
</a>
</li>
<li>
<a
href="https://checkout-demo.hyva.io/onestep/gear/bags.html"
title="Bags"
class="flex items-center w-full px-8 py-4 border-b cursor-pointer
bg-container-lighter border-container
"
>
<span class="ml-10 text-base text-gray-700">
Bags </span>
</a>
</li>
<li>
<a
href="https://checkout-demo.hyva.io/onestep/gear/fitness-equipment.html"
title="Fitness Equipment"
class="flex items-center w-full px-8 py-4 border-b cursor-pointer
bg-container-lighter border-container
"
>
<span class="ml-10 text-base text-gray-700">
Fitness Equipment </span>
</a>
</li>
<li>
<a
href="https://checkout-demo.hyva.io/onestep/gear/watches.html"
title="Watches"
class="flex items-center w-full px-8 py-4 border-b cursor-pointer
bg-container-lighter border-container
"
>
<span class="ml-10 text-base text-gray-700">
Watches </span>
</a>
</li>
</ul>
<button
@click="closeMenu()"
class="absolute flex justify-end w-16 self-end mb-1 transition-none"
aria-label="Close menu"
>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="hidden p-4" width="64" height="64" :class="{ 'hidden' : !open, 'block': open }" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/>
</svg>
</button>
</div>
</li>
<li
data-child-id="category-node-9-main"
class="level-0"
>
<div
class="flex items-center transition-transform duration-150 ease-in-out transform"
:class="{
'-translate-x-full' : mobilePanelActiveId,
'translate-x-0' : !mobilePanelActiveId
}"
>
<a
class="flex items-center w-full px-8 py-4 border-b cursor-pointer
bg-container-lighter border-container level-0
"
href="https://checkout-demo.hyva.io/onestep/training.html"
title="Training"
>
Training </a>
<button
@click="openSubcategory('category-node-9')"
class="absolute right-0 flex items-center justify-center w-11 h-11 mr-8 cursor-pointer
bg-container-lighter border-container"
aria-label="Open Training subcategories"
aria-haspopup="true"
:aria-expanded="mobilePanelActiveId === 'category-node-9'"
>
<div class="w-8 h-8 border rounded">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-full h-full p-1" width="24" height="24" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"/>
</svg>
</div>
</button>
</div>
<div
data-child-id="category-node-9"
class="absolute top-0 right-0 z-10 flex flex-col gap-1 w-full h-full p-1 bg-container-lighter"
:class="{
'hidden': mobilePanelActiveId !== 'category-node-9'
}"
>
<ul
class="mt-16 transition-transform duration-200 ease-in-out translate-x-full transform"
:class="{
'translate-x-full' : mobilePanelActiveId !== 'category-node-9',
'translate-x-0' : mobilePanelActiveId === 'category-node-9',
}"
aria-label="Subcategories"
>
<li>
<button
type="button"
class="flex items-center px-8 py-4 border-b cursor-pointer bg-container border-container w-full border-t"
@click="backToMainCategories('category-node-9-main')"
aria-label="Back to main categories"
>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" width="24" height="24" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7"/>
</svg>
<span class="ml-4">
Training </span>
</button>
</li>
<li>
<a
href="https://checkout-demo.hyva.io/onestep/training.html"
title="Training"
class="flex items-center w-full px-8 py-4 border-b cursor-pointer
bg-container-lighter border-container
"
>
<span class="ml-10">
View All </span>
</a>
</li>
<li>
<a
href="https://checkout-demo.hyva.io/onestep/training/training-video.html"
title="Video Download"
class="flex items-center w-full px-8 py-4 border-b cursor-pointer
bg-container-lighter border-container
"
>
<span class="ml-10 text-base text-gray-700">
Video Download </span>
</a>
</li>
</ul>
<button
@click="closeMenu()"
class="absolute flex justify-end w-16 self-end mb-1 transition-none"
aria-label="Close menu"
>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="hidden p-4" width="64" height="64" :class="{ 'hidden' : !open, 'block': open }" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/>
</svg>
</button>
</div>
</li>
</ul>
<button
@click="closeMenu()"
class="absolute flex justify-end w-16 self-end mb-1"
aria-label="Close menu"
type="button"
>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="hidden p-4" width="64" height="64" :class="{ 'hidden' : !open, 'block': open }" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/>
</svg>
</button>
</div>
</nav>
<script>
'use strict';
const initMenuMobile_67d7d70ac012c = () => {
return {
mobilePanelActiveId: null,
open: false,
setActiveMenu(menuNode) {
Array.from(menuNode.querySelectorAll('a')).filter(link => {
return link.href === window.location.href.split('?')[0];
}).map(item => {
item.classList.add('underline');
item.closest('li.level-0') &&
item.closest('li.level-0').querySelector('a.level-0').classList.add('underline');
});
},
openMenu() {
this.open = true
this.$nextTick(() => hyva.trapFocus(this.$refs['mobileMenuNavLinks']));
// Prevent from body scrolling while mobile menu opened
document.body.style.overflow = 'hidden';
},
closeMenu() {
document.body.style.overflow = '';
if (this.open) {
this.$nextTick(() => this.$refs['mobileMenuTrigger'].focus() || hyva.releaseFocus());
}
this.open = false
this.mobilePanelActiveId = null
},
openSubcategory(index) {
const menuNodeRef = document.querySelector('[data-child-id=' + index + ']')
this.mobilePanelActiveId = this.mobilePanelActiveId === index ? 0 : index
this.$nextTick(() => hyva.trapFocus(menuNodeRef))
},
backToMainCategories(index) {
const menuNodeRef = document.querySelector('[data-child-id=' + index + ']')
this.mobilePanelActiveId = 0
this.$nextTick(() => {
hyva.trapFocus(this.$refs['mobileMenuNavLinks'])
menuNodeRef.querySelector('a').focus()
})
}
}
}
</script>
<div x-data="initMenuDesktop_67d7d70ac3884()"
class="z-20 order-2 sm:order-1 lg:order-2 navigation hidden lg:flex"
>
<!-- desktop -->
<div x-ref="nav-desktop"
@load.window="setActiveMenu($root)"
class="hidden lg:block lg:px-8">
<nav
class="relative"
aria-label="Main menu"
>
<ul class="flex justify-start flex-wrap gap-x-7 py-4">
<li class="relative level-0 border-b-2 border-transparent hover:border-primary data-[active]:border-primary"
@mouseenter="hoverPanelActiveId = 'category-node-20'"
@mouseleave="hoverPanelActiveId = 0"
@keyup.escape="hoverPanelActiveId = 0"
>
<span class="flex items-center text-md">
<a class="w-full text-base text-gray-700 level-0 py-2 px-0.5"
href="https://checkout-demo.hyva.io/onestep/women.html"
title="Women"
@focus="hoverPanelActiveId = 0"
>
Women </a>
<button
type="button"
data-sr-button-id="category-node-20"
:aria-expanded="hoverPanelActiveId === 'category-node-20' ? 'true' : 'false'"
@click="openMenuOnClick('category-node-20')"
class="rounded p-1 text-gray-500"
>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="flex self-center h-5 w-5" width="25" height="25" aria-hidden="true">
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"/>
</svg>
<span class="sr-only">
Show submenu for Women category </span>
</button>
</span>
<ul
class="absolute top-full z-10 hidden px-6 py-4 mt-0.5 -ml-6 shadow-lg bg-container-lighter/95"
:class="{
'hidden' : hoverPanelActiveId !== 'category-node-20',
'block' : hoverPanelActiveId === 'category-node-20'
}"
>
<li>
<a href="https://checkout-demo.hyva.io/onestep/women/tops-women.html"
title="Tops"
class="block w-full px-3 py-1 my-1 whitespace-nowrap first:mt-0 hover:underline aria-[current=page]:underline"
@keyup.escape="$nextTick(() => document.querySelector('[data-sr-button-id=category\u002Dnode\u002D20]').focus())"
>
<span class="text-base text-gray-700">
Tops </span>
</a>
</li>
<li>
<a href="https://checkout-demo.hyva.io/onestep/women/bottoms-women.html"
title="Bottoms"
class="block w-full px-3 py-1 my-1 whitespace-nowrap first:mt-0 hover:underline aria-[current=page]:underline"
@keyup.escape="$nextTick(() => document.querySelector('[data-sr-button-id=category\u002Dnode\u002D20]').focus())"
>
<span class="text-base text-gray-700">
Bottoms </span>
</a>
</li>
</ul>
</li>
<li class="relative level-0 border-b-2 border-transparent hover:border-primary data-[active]:border-primary"
@mouseenter="hoverPanelActiveId = 'category-node-11'"
@mouseleave="hoverPanelActiveId = 0"
@keyup.escape="hoverPanelActiveId = 0"
>
<span class="flex items-center text-md">
<a class="w-full text-base text-gray-700 level-0 py-2 px-0.5"
href="https://checkout-demo.hyva.io/onestep/men.html"
title="Men"
@focus="hoverPanelActiveId = 0"
>
Men </a>
<button
type="button"
data-sr-button-id="category-node-11"
:aria-expanded="hoverPanelActiveId === 'category-node-11' ? 'true' : 'false'"
@click="openMenuOnClick('category-node-11')"
class="rounded p-1 text-gray-500"
>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="flex self-center h-5 w-5" width="25" height="25" aria-hidden="true">
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"/>
</svg>
<span class="sr-only">
Show submenu for Men category </span>
</button>
</span>
<ul
class="absolute top-full z-10 hidden px-6 py-4 mt-0.5 -ml-6 shadow-lg bg-container-lighter/95"
:class="{
'hidden' : hoverPanelActiveId !== 'category-node-11',
'block' : hoverPanelActiveId === 'category-node-11'
}"
>
<li>
<a href="https://checkout-demo.hyva.io/onestep/men/tops-men.html"
title="Tops"
class="block w-full px-3 py-1 my-1 whitespace-nowrap first:mt-0 hover:underline aria-[current=page]:underline"
@keyup.escape="$nextTick(() => document.querySelector('[data-sr-button-id=category\u002Dnode\u002D11]').focus())"
>
<span class="text-base text-gray-700">
Tops </span>
</a>
</li>
<li>
<a href="https://checkout-demo.hyva.io/onestep/men/bottoms-men.html"
title="Bottoms"
class="block w-full px-3 py-1 my-1 whitespace-nowrap first:mt-0 hover:underline aria-[current=page]:underline"
@keyup.escape="$nextTick(() => document.querySelector('[data-sr-button-id=category\u002Dnode\u002D11]').focus())"
>
<span class="text-base text-gray-700">
Bottoms </span>
</a>
</li>
</ul>
</li>
<li class="relative level-0 border-b-2 border-transparent hover:border-primary data-[active]:border-primary"
@mouseenter="hoverPanelActiveId = 'category-node-3'"
@mouseleave="hoverPanelActiveId = 0"
@keyup.escape="hoverPanelActiveId = 0"
>
<span class="flex items-center text-md">
<a class="w-full text-base text-gray-700 level-0 py-2 px-0.5"
href="https://checkout-demo.hyva.io/onestep/gear.html"
title="Gear"
@focus="hoverPanelActiveId = 0"
>
Gear </a>
<button
type="button"
data-sr-button-id="category-node-3"
:aria-expanded="hoverPanelActiveId === 'category-node-3' ? 'true' : 'false'"
@click="openMenuOnClick('category-node-3')"
class="rounded p-1 text-gray-500"
>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="flex self-center h-5 w-5" width="25" height="25" aria-hidden="true">
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"/>
</svg>
<span class="sr-only">
Show submenu for Gear category </span>
</button>
</span>
<ul
class="absolute top-full z-10 hidden px-6 py-4 mt-0.5 -ml-6 shadow-lg bg-container-lighter/95"
:class="{
'hidden' : hoverPanelActiveId !== 'category-node-3',
'block' : hoverPanelActiveId === 'category-node-3'
}"
>
<li>
<a href="https://checkout-demo.hyva.io/onestep/gear/bags.html"
title="Bags"
class="block w-full px-3 py-1 my-1 whitespace-nowrap first:mt-0 hover:underline aria-[current=page]:underline"
@keyup.escape="$nextTick(() => document.querySelector('[data-sr-button-id=category\u002Dnode\u002D3]').focus())"
>
<span class="text-base text-gray-700">
Bags </span>
</a>
</li>
<li>
<a href="https://checkout-demo.hyva.io/onestep/gear/fitness-equipment.html"
title="Fitness Equipment"
class="block w-full px-3 py-1 my-1 whitespace-nowrap first:mt-0 hover:underline aria-[current=page]:underline"
@keyup.escape="$nextTick(() => document.querySelector('[data-sr-button-id=category\u002Dnode\u002D3]').focus())"
>
<span class="text-base text-gray-700">
Fitness Equipment </span>
</a>
</li>
<li>
<a href="https://checkout-demo.hyva.io/onestep/gear/watches.html"
title="Watches"
class="block w-full px-3 py-1 my-1 whitespace-nowrap first:mt-0 hover:underline aria-[current=page]:underline"
@keyup.escape="$nextTick(() => document.querySelector('[data-sr-button-id=category\u002Dnode\u002D3]').focus())"
>
<span class="text-base text-gray-700">
Watches </span>
</a>
</li>
</ul>
</li>
<li class="relative level-0 border-b-2 border-transparent hover:border-primary data-[active]:border-primary"
@mouseenter="hoverPanelActiveId = 'category-node-9'"
@mouseleave="hoverPanelActiveId = 0"
@keyup.escape="hoverPanelActiveId = 0"
>
<span class="flex items-center text-md">
<a class="w-full text-base text-gray-700 level-0 py-2 px-0.5"
href="https://checkout-demo.hyva.io/onestep/training.html"
title="Training"
@focus="hoverPanelActiveId = 0"
>
Training </a>
<button
type="button"
data-sr-button-id="category-node-9"
:aria-expanded="hoverPanelActiveId === 'category-node-9' ? 'true' : 'false'"
@click="openMenuOnClick('category-node-9')"
class="rounded p-1 text-gray-500"
>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="flex self-center h-5 w-5" width="25" height="25" aria-hidden="true">
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"/>
</svg>
<span class="sr-only">
Show submenu for Training category </span>
</button>
</span>
<ul
class="absolute top-full z-10 hidden px-6 py-4 mt-0.5 -ml-6 shadow-lg bg-container-lighter/95"
:class="{
'hidden' : hoverPanelActiveId !== 'category-node-9',
'block' : hoverPanelActiveId === 'category-node-9'
}"
>
<li>
<a href="https://checkout-demo.hyva.io/onestep/training/training-video.html"
title="Video Download"
class="block w-full px-3 py-1 my-1 whitespace-nowrap first:mt-0 hover:underline aria-[current=page]:underline"
@keyup.escape="$nextTick(() => document.querySelector('[data-sr-button-id=category\u002Dnode\u002D9]').focus())"
>
<span class="text-base text-gray-700">
Video Download </span>
</a>
</li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
<script>
'use strict';
const initMenuDesktop_67d7d70ac3884 = () => {
return {
hoverPanelActiveId: null,
setActiveMenu(menuNode) {
Array.from(menuNode.querySelectorAll('a')).filter(link => {
return link.href === window.location.href.split('?')[0];
}).map(item => {
item.setAttribute('aria-current', 'page');
item.closest('li.level-0').setAttribute('data-active', 'true');
});
},
openMenuOnClick(menuNode) {
if (menuNode === this.hoverPanelActiveId) {
this.hoverPanelActiveId = 0;
} else {
this.hoverPanelActiveId = menuNode
}
}
}
}
</script>
<div class="flex items-center gap-2 md:gap-1 order-3 md:-mr-1">
<!--Compare Icon-->
<a id="compare-link"
class="relative inline-block rounded p-1 hover:bg-primary/10 outline-offset-2 invisible"
:class="{ 'invisible': !(itemCount > 0) }"
href="https://checkout-demo.hyva.io/onestep/catalog/product_compare/index/"
title="Compare Products"
x-data="initCompareHeader()"
@private-content-loaded.window="receiveCompareData($event.detail.data)"
:aria-label="`
Compare Products,
${itemCount > 1
? hyva.str('\u00251\u0020Items', itemCount)
: hyva.str('\u00251\u0020Item', itemCount)
}`"
>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="md:h-6 md:w-6" width="28" height="28" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M3 6l3 1m0 0l-3 9a5.002 5.002 0 006.001 0M6 7l3 9M6 7l6-2m6 2l3-1m-3 1l-3 9a5.002 5.002 0 006.001 0M18 7l3 9m-3-9l-6-2m0-2v2m0 16V5m0 16H9m3 0h3"/>
</svg>
<span
x-text="itemCount"
class="absolute -top-1.5 -right-1.5 h-5 px-2 py-1 rounded-full bg-yellow-500 text-white
text-xs font-semibold leading-none text-center uppercase tabular-nums"
aria-hidden="true"
></span>
</a>
<!--Search Icon-->
<button
id="menu-search-icon"
class="rounded p-1 hover:bg-primary/10 outline-offset-2"
@click.prevent="
searchOpen = !searchOpen;
$dispatch('search-open');
"
aria-label="Toggle search form"
aria-haspopup="true"
:aria-expanded="searchOpen"
x-ref="searchButton"
>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="md:h-6 md:w-6" width="28" height="28" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
</svg>
</button>
<!-- Additional Header Elements -->
<!--Customer Icon & Dropdown-->
<div
class="relative inline-block"
x-data="{ open: false }"
@keyup.escape="open = false"
@click.outside="open = false"
>
<button
type="button"
id="customer-menu"
class="block rounded p-1 hover:bg-primary/10 outline-offset-2"
@click="open = !open"
:aria-expanded="open ? 'true' : 'false'"
aria-label="My Account"
aria-haspopup="true"
>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="md:h-6 md:w-6" width="28" height="28" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
</svg>
</button>
<nav
class="
absolute right-0 z-20 w-40 py-2 mt-2 -mr-4 px-1 overflow-auto origin-top-right rounded-sm
shadow-lg sm:w-48 lg:mt-3 bg-container-lighter
"
x-cloak
x-show="open"
aria-labelledby="customer-menu"
>
<a id="customer.header.sign.in.link"
class="block px-4 py-2 lg:px-5 lg:py-2 hover:bg-gray-100"
onclick="hyva.setCookie && hyva.setCookie(
'login_redirect',
window.location.href,
1
)"
href="https://checkout-demo.hyva.io/onestep/customer/account/index/"
title="Sign In"
>
Sign In</a>
<a id="customer.header.register.link"
class="block px-4 py-2 lg:px-5 lg:py-2 hover:bg-gray-100"
href="https://checkout-demo.hyva.io/onestep/customer/account/create/"
title="Create an Account"
>
Create an Account </a>
</nav>
</div>
<!--Cart Icon-->
<button
id="menu-cart-icon"
class="relative inline-block rounded p-1 hover:bg-primary/10 outline-offset-2"
x-ref="cartButton"
:aria-disabled="isCartEmpty()"
:aria-label="`
Toggle minicart,
${isCartEmpty()
? 'Cart is empty'
: cart.summary_count > 1
? hyva.str('%1 items', cart.summary_count)
: hyva.str('%1 item', cart.summary_count)
}`"
@click.prevent="() => {
$dispatch('toggle-cart', { isOpen: true })
}"
@toggle-cart.window="toggleCart($event)"
:aria-expanded="isCartOpen"
aria-haspopup="dialog"
>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="md:h-6 md:w-6" width="28" height="28" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"/>
</svg>
<span
x-text="cart.summary_count"
x-show="!isCartEmpty()"
x-cloak
class="absolute -top-1.5 -right-1.5 h-5 px-2 py-1 rounded-full bg-primary text-white
text-xs font-semibold leading-none text-center uppercase tabular-nums"
aria-hidden="true"
></span>
</button>
</div>
</div>
<!--Search-->
<div class="absolute z-10 w-full border-t shadow-sm bg-container-lighter border-container-lighter"
id="search-content"
x-cloak x-show="searchOpen"
@click.outside="searchOpen = false"
@keydown.escape="
searchOpen = false;
$refs.searchButton.focus();
"
>
<script>
'use strict';
function initMiniSearch() {
return {
minSearchLength: 3,
suggestions: [],
suggest() {
const search = this.$refs.searchInput;
if (search.value.length >= this.minSearchLength) {
search.setCustomValidity('');
search.reportValidity();
this.fetchSuggestions(search.value);
} else {
this.suggestions = [];
}
},
fetchSuggestions(term) {
fetch(
window.BASE_URL + 'search/ajax/suggest?' + new URLSearchParams({q: term}),
{
headers: {
'X-Requested-With': 'XMLHttpRequest'
}
}
)
.then(response => response.json())
.then(result => this.suggestions = result);
},
search(term) {
const search = this.$refs.searchInput;
term = term || search.value;
if (term.length < this.minSearchLength) {
search.setCustomValidity('Minimum\u0020Search\u0020query\u0020length\u0020is\u00203');
search.reportValidity();
} else {
search.setCustomValidity('');
search.value = term;
this.$refs.form.submit();
}
},
focusElement(element) {
if (element && element.nodeName === "DIV") {
element.focus();
return true;
} else {
return false;
}
}
}
}
</script>
<div class="container py-2 mx-auto text-black" x-data="initMiniSearch()">
<form class="form minisearch" id="search_mini_form" x-ref="form" @submit.prevent="search()"
action="https://checkout-demo.hyva.io/onestep/catalogsearch/result/" method="get" role="search">
<label class="hidden" for="search" data-role="minisearch-label">
<span>Search</span>
</label>
<input id="search"
x-ref="searchInput"
type="search"
autocomplete="off"
name="q"
value=""
placeholder="Search entire store here..."
maxlength="128"
class="w-full p-2 text-lg leading-normal transition appearance-none text-grey-800
focus:outline-none focus:border-transparent lg:text-xl"
@search-open.window.debounce.10="
$el.focus()
$el.select()
"
@focus.once="suggest"
@input.debounce.300="suggest"
@keydown.arrow-down.prevent="focusElement($root.querySelector('[tabindex]'))"
/>
<template x-if="suggestions.length > 0">
<div class="w-full leading-normal transition appearance-none text-grey-800 flex flex-col mt-1">
<template x-for="suggestion in suggestions">
<div class="flex justify-between p-2 bg-container-lighter even:bg-container mb-1 cursor-pointer
border border-container hover:bg-container-darker"
tabindex="0"
@click="search(suggestion.title)"
@keydown.enter="search(suggestion.title)"
@keydown.arrow-up.prevent="
focusElement($event.target.previousElementSibling) || $refs.searchInput.focus()
"
@keydown.arrow-down.prevent="focusElement($event.target.nextElementSibling)"
>
<span x-text="suggestion.title"></span>
<span x-text="suggestion.num_results"></span>
</div>
</template>
</div>
</template>
<button type="submit"
title="Search"
class="action search sr-only"
aria-label="Search"
>
Search </button>
</form>
</div>
</div>
<!--Cart Drawer-->
<script>
function initCartDrawer() {
return {
open: false,
isLoading: false,
cart: {},
maxItemsToDisplay: 20,
itemsCount: 0,
getData(data) {
if (data.cart) {
this.cart = data.cart;
this.itemsCount = data.cart.items && data.cart.items.length || 0;
this.setCartItems();
}
this.isLoading = false;
},
cartItems: [],
getItemCountTitle() {
return hyva.strf('\u00250\u0020of\u0020\u00251\u0020products\u0020in\u0020cart\u0020displayed', this.maxItemsToDisplay, this.itemsCount)
},
setCartItems() {
this.cartItems = this.cart.items && this.cart.items.sort((a, b) => b.item_id - a.item_id) || [];
if (this.maxItemsToDisplay > 0) {
this.cartItems = this.cartItems.slice(0, parseInt(this.maxItemsToDisplay, 10));
}
},
deleteItemFromCart(itemId) {
this.isLoading = true;
const itemData = this.cart.items.filter((item) => item['item_id'] === itemId);
const formKey = hyva.getFormKey();
const postUrl = BASE_URL + 'checkout/sidebar/removeItem/';
fetch(postUrl, {
"headers": {
"content-type": "application/x-www-form-urlencoded; charset=UTF-8",
},
"body": "form_key=" + formKey + "&item_id=" + itemId,
"method": "POST",
"mode": "cors",
"credentials": "include"
}).then(response => {
if (response.redirected) {
window.location.href = response.url;
} else if (response.ok) {
return response.json();
} else {
window.dispatchMessages && window.dispatchMessages([{
type: 'warning',
text: 'Could\u0020not\u0020remove\u0020item\u0020from\u0020quote.'
}]);
this.isLoading = false;
}
}).then(result => {
window.dispatchMessages && window.dispatchMessages([{
type: result.success ? 'success' : 'error',
text: result.success
? 'You\u0020removed\u0020the\u0020item.'
: result.error_message
}], result.success ? 5000 : 0);
if (result.success && itemData) {
window.dispatchEvent(new CustomEvent('cart-item-removed', { detail: itemData }));
}
window.dispatchEvent(new CustomEvent('reload-customer-section-data'));
});
},
scrollLock(use = true) {
document.body.style.overflow = use ? "hidden" : "";
},
toggleCartDrawer(event) {
if (event.detail && event.detail.isOpen !== undefined) {
if (event.detail.isOpen) {
this.openCartDrawer();
} else {
this.open = false;
this.scrollLock(false);
this.$refs && this.$refs.cartDialogContent && hyva.releaseFocus(this.$refs.cartDialogContent);
}
} else {
this.openCartDrawer()
}
},
openCartDrawer() {
this.open = true;
this.scrollLock(true);
this.$nextTick(() => {
this.$refs && this.$refs.cartDialogContent && hyva.trapFocus(this.$refs.cartDialogContent)
})
},
closeCartDrawer() {
this.$dispatch('toggle-cart', { isOpen: false })
},
getSectionDataExtraActions() {
if (!this.cart.extra_actions) {
return '';
}
const contentNode = document.createElement('div');
contentNode.innerHTML = this.cart.extra_actions;
hyva.activateScripts(contentNode);
return contentNode.innerHTML;
}
}
}
</script>
<section x-cloak
x-show="cart"
id="cart-drawer"
x-data="initCartDrawer()"
@private-content-loaded.window="getData($event.detail.data)"
@toggle-cart.window="toggleCartDrawer($event)"
@keydown.escape="closeCartDrawer"
>
<div role="dialog"
aria-labelledby="cart-drawer-title"
aria-modal="true"
:aria-hidden="!open"
class="fixed inset-y-0 right-0 z-30 flex max-w-full">
<div class="backdrop"
x-show="open"
x-transition:enter="ease-in-out duration-500"
x-transition:enter-start="opacity-0"
x-transition:enter-end="opacity-100"
x-transition:leave="ease-in-out duration-500"
x-transition:leave-start="opacity-100"
x-transition:leave-end="opacity-0"
role="button"
@click="closeCartDrawer"
aria-label="Close minicart"></div>
<div class="relative w-screen max-w-md shadow-2xl"
x-show="open"
x-transition:enter="transform transition ease-in-out duration-500 sm:duration-700"
x-transition:enter-start="translate-x-full"
x-transition:enter-end="translate-x-0"
x-transition:leave="transform transition ease-in-out duration-500 sm:duration-700"
x-transition:leave-start="translate-x-0"
x-transition:leave-end="translate-x-full"
x-ref="cartDialogContent"
role="region"
:tabindex="open ? 0 : -1"
aria-label="My Cart"
>
<div class="flex flex-col h-full max-h-screen bg-white shadow-xl">
<header class="relative px-4 py-6 sm:px-6">
<p id="cart-drawer-title" class="text-lg font-medium leading-7 text-gray-900">
<strong>My Cart</strong>
<span class="items-total text-xs"
x-show="maxItemsToDisplay && maxItemsToDisplay < itemsCount"
x-text="getItemCountTitle()">
</span>
</p>
</header>
<template x-if="!itemsCount">
<div class="relative px-4 py-6 bg-white border-bs sm:px-6 border-container">
Cart is empty </div>
</template>
<template x-if="itemsCount">
<div class="relative grid gap-6 sm:gap-8 px-1 py-3 sm:px-3 bg-white border-b border-container overflow-y-auto overscroll-y-contain">
<template x-for="item in cartItems">
<div class="flex items-start p-3 space-x-4 transition duration-150 ease-in-out rounded-lg hover:bg-gray-100">
<template x-if="item.product_has_url && item.is_visible_in_site_visibility">
<a :href="item.product_url"
class="w-1/4 !ml-0"
:aria-label="hyva.strf('Product\u0020\u0022\u00250\u0022', item.product_name)"
>
<img
:src="item.product_image.src"
:width="item.product_image.width"
:height="item.product_image.height"
loading="lazy"
:alt="item.product_name"
/>
</a>
</template>
<template x-if="!item.product_has_url || !item.is_visible_in_site_visibility">
<div class="w-1/4 !ml-0">
<img
:src="item.product_image.src"
:width="item.product_image.width"
:height="item.product_image.height"
loading="lazy"
:alt="item.product_name"
/>
</div>
</template>
<div class="w-3/4 space-y-2">
<div>
<p class="text-xl">
<span x-html="item.qty"></span> x <span x-html="item.product_name"></span>
</p>
<p class="text-sm"><span x-html="item.product_sku"></span></p>
</div>
<template x-for="option in item.options">
<div class="pt-2">
<p class="font-semibold" x-text="option.label + ':'"></p>
<p class="text-secondary" x-html="option.value"></p>
</div>
</template>
<p><span x-html="item.product_price"></span></p>
<div class="pt-4">
<a :href="item.configure_url"
x-show="item.product_type !== 'grouped' && item.is_visible_in_site_visibility"
class="inline-flex p-2 mr-2 btn btn-primary"
:aria-label="hyva.strf('Edit\u0020product\u0020\u0022\u00250\u0022', item.product_name)"
>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" width="20" height="20" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"/>
</svg>
</a>
<button type="button"
class="inline-flex p-2 btn btn-primary"
@click="deleteItemFromCart(item.item_id)"
:aria-label="hyva.strf('Remove\u0020product\u0020\u0022\u00250\u0022\u0020from\u0020cart', item.product_name)"
>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" width="20" height="20" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
</svg>
</button>
</div>
</div>
</div>
</template>
</div>
</template>
<template x-if="itemsCount">
<div>
<div class="relative grid gap-6 sm:gap-8 py-3 px-1 sm:px-3 bg-white">
<div class="w-full p-3 space-x-4 transition duration-150 ease-in-out rounded-lg hover:bg-gray-100">
<p>Subtotal: <span x-html="cart.subtotal"></span></p>
</div>
<div class="w-full p-3 space-x-4 transition duration-150 ease-in-out rounded-lg hover:bg-gray-100">
<a @click.prevent.stop="closeCartDrawer; $dispatch('toggle-authentication',
{url: 'https://checkout-demo.hyva.io/onestep/checkout/'});"
href="https://checkout-demo.hyva.io/onestep/checkout/"
class="inline-flex btn btn-primary"
>
Checkout </a>
<span>or</span>
<a href="https://checkout-demo.hyva.io/onestep/checkout/cart/"
class="underline"
>
View and Edit Cart </a>
</div>
<div x-html="getSectionDataExtraActions()"></div>
</div>
</div>
</template>
</div>
<button
type="button"
@click="closeCartDrawer"
aria-label="Close minicart"
class="absolute top-0 right-2 p-4 mt-2 text-gray-300 transition-colors hover:text-black"
>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" width="24" height="24" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/>
</svg>
</button>
</div>
<div class="flex flex-row justify-center items-center w-full h-full fixed select-none z-50"
style="left: 50%;top: 50%;transform: translateX(-50%) translateY(-50%);background: rgba(255,255,255,0.7);"
x-show="isLoading"
x-cloak
x-transition:enter="ease-out duration-200"
x-transition:enter-start="opacity-0"
x-transition:enter-end="opacity-100"
x-transition:leave="ease-in duration-200"
x-transition:leave-start="opacity-100"
x-transition:leave-end="opacity-0">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 57 57" width="57" height="57" fill="none" stroke="currentColor" stroke-width="2" class="text-primary" role="img">
<style>
@keyframes spinner-ball-triangle1 {
0% { transform: translate(0%, 0%); }
33% { transform: translate(38%, -79%); }
66% { transform: translate(77%, 0%); }
100% { transform: translate(0%, 0%); }
}
@keyframes spinner-ball-triangle2 {
0% { transform: translate(0%, 0%); }
33% { transform: translate(38%, 79%); }
66% { transform: translate(-38%, 79%); }
100% { transform: translate(0%, 0%); }
}
@keyframes spinner-ball-triangle3 {
0% { transform: translate(0%, 0%); }
33% { transform: translate(-77%, 0%); }
66% { transform: translate(-38%, -79%); }
100% { transform: translate(0%, 0%); }
}
</style>
<circle cx="5" cy="50" r="5" style="animation: spinner-ball-triangle1 2.2s linear infinite"/>
<circle cx="27" cy="5" r="5" style="animation: spinner-ball-triangle2 2.2s linear infinite"/>
<circle cx="49" cy="50" r="5" style="animation: spinner-ball-triangle3 2.2s linear infinite"/>
<title>loader</title></svg>
<div class="ml-10 text-primary text-xl">
Loading... </div>
</div>
</div>
</section>
<!--Authentication Pop-Up-->
<script>
function initAuthentication() {
return {
open: false,
forceAuthentication: false,
checkoutUrl: 'https://checkout-demo.hyva.io/onestep/checkout/index/',
errors: 0,
hasCaptchaToken: 0,
displayErrorMessage: false,
errorMessages: [],
setErrorMessages: function setErrorMessages(messages) {
this.errorMessages = [messages];
this.displayErrorMessage = this.errorMessages.length;
},
submitForm: function () {
// Do not rename $form, the variable is expected to be declared in the recaptcha output
const $form = document.querySelector('#login-form');
if (this.errors === 0) {
this.dispatchLoginRequest($form);
}
},
onPrivateContentLoaded: function (data) {
const isLoggedIn = data.customer && data.customer.firstname;
if (data.cart && !isLoggedIn) {
this.forceAuthentication = !data.cart.isGuestCheckoutAllowed;
}
},
redirectIfAuthenticated: function (event) {
if (event.detail && event.detail.url) {
this.checkoutUrl = event.detail.url;
}
if (!this.forceAuthentication) {
window.location.href = this.checkoutUrl;
}
},
dispatchLoginRequest: function(form) {
this.isLoading = true;
const username = this.$refs['customer-email'].value;
const password = this.$refs['customer-password'].value;
const formKey = hyva.getFormKey();
const bodyFields = {
'username': username,
'password': password,
'formKey': formKey
};
const fieldName = 'g\u002Drecaptcha\u002Dresponse';
const recaptchaField = fieldName && form[fieldName];
if (recaptchaField) {
bodyFields[fieldName] = recaptchaField.value;
}
fetch('https://checkout-demo.hyva.io/onestep/customer/ajax/login/', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'X-Requested-With': 'XMLHttpRequest'
},
body: JSON.stringify(bodyFields)
}
).then(response => {
return response.json()
}
).then(data=> {
this.isLoading = false;
if (data.errors) {
this.setErrorMessages(data.message);
this.errors = 1;
this.hasCaptchaToken = 0;
} else {
window.location.href = this.checkoutUrl;
}
});
}
}
}
</script>
<section id="authentication-popup"
x-data="initAuthentication()"
@private-content-loaded.window="onPrivateContentLoaded($event.detail.data)"
@toggle-authentication.window="open = forceAuthentication; redirectIfAuthenticated(event)"
@keydown.window.escape="open = false"
>
<div
class="backdrop"
aria-hidden="true"
x-cloak
x-show="open"
x-transition:enter="ease-in-out duration-500"
x-transition:enter-start="opacity-0"
x-transition:enter-end="opacity-100"
x-transition:leave="ease-in-out duration-500"
x-transition:leave-start="opacity-100"
x-transition:leave-end="opacity-0"
@click="open = false"
></div>
<div role="dialog"
aria-modal="true"
@click.outside="open = false"
class="inset-y-0 right-0 z-30 flex max-w-full fixed"
x-cloak
x-show="open"
>
<div class="relative w-screen max-w-md pt-16 bg-container-lighter"
x-show="open"
x-cloak=""
x-transition:enter="transform transition ease-in-out duration-500 sm:duration-700"
x-transition:enter-start="translate-x-full"
x-transition:enter-end="translate-x-0"
x-transition:leave="transform transition ease-in-out duration-500 sm:duration-700"
x-transition:leave-start="translate-x-0"
x-transition:leave-end="translate-x-full"
>
<div
x-show="open"
x-cloak=""
x-transition:enter="ease-in-out duration-500"
x-transition:enter-start="opacity-0"
x-transition:enter-end="opacity-100"
x-transition:leave="ease-in-out duration-500"
x-transition:leave-start="opacity-100"
x-transition:leave-end="opacity-0" class="absolute top-0 right-2 flex p-2 mt-2">
<button
type="button"
@click="open = false;"
aria-label="Close panel"
class="p-2 text-gray-300 transition duration-150 ease-in-out hover:text-black"
>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" width="24" height="24" role="img">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/>
<title>Close panel</title></svg>
</button>
</div>
<template x-if="open">
<div class="flex flex-col h-full py-6 space-y-6 bg-white shadow-xl overflow-y-auto">
<div class="mx-4">
<div class="message error mb-0" x-show="errors" x-cloak>
<template x-for="(message, index) in errorMessages" :key="index">
<div>
<template x-if="message">
<span x-html="message"></span>
</template>
</div>
</template>
</div>
</div>
<div class="block-customer-login bg-container border border-container mx-4 p-4 shadow-sm">
<p id="authenticate-customer-login" class="text-lg leading-7 text-gray-900">
<strong class="font-medium">Checkout using your account</strong>
</p>
<form class="form form-login"
method="post"
@submit.prevent="submitForm();"
id="login-form"
>
<div class="fieldset login">
<div class="field email required">
<label class="label" for="form-login-username" form="login-form" >
<span>Email Address</span>
</label>
<div class="control">
<input name="username"
id="form-login-username"
x-ref="customer-email"
@change="errors = 0"
type="email"
required
autocomplete="off"
class="form-input input-text"
>
</div>
</div>
<div class="field password required">
<label for="form-login-password" class="label" form="login-form">
<span>Password</span>
</label>
<div class="control">
<input name="password"
id="form-login-password"
type="password"
class="form-input input-text"
required
x-ref="customer-password"
autocomplete="off"
@change="errors = 0"
>
</div>
</div>
<input name="context" type="hidden" value="checkout" />
<div class="actions-toolbar flex justify-between pt-6 pb-2 items-center">
<button type="submit" class="inline-flex btn btn-primary disabled:opacity-75"
>
Sign In </button>
<a href="https://checkout-demo.hyva.io/onestep/customer/account/forgotpassword/"
>
Forgot Your Password? </a>
</div>
</div>
</form>
</div>
<div class="mx-4">
</div>
<div class="block-new-customer bg-container border border-container mx-4 p-4 shadow-sm">
<p id="authenticate-new-customer" class="text-lg mb-2 leading-7 text-gray-900">
<strong class="font-medium">Checkout as a new customer</strong>
</p>
<div class="block-content">
<p class="mb-1">
Creating an account has many benefits: </p>
<ul class="list-disc pl-5">
<li> See order and shipping status</li>
<li> Track order history</li>
<li> Check out faster</li>
</ul>
<div class="actions-toolbar flex justify-between mt-6 mb-2 items-center">
<a href="https://checkout-demo.hyva.io/onestep/customer/account/create/"
class="inline-flex btn btn-primary">
Create an Account </a>
</div>
</div>
</div>
</div>
</template>
</div>
</div>
</section>
</div>
</header><main id="maincontent" class="page-main"><div id="contentarea" tabindex="-1"></div>
<div class="page messages"><script>
function initMessages() {
"use strict";
return {
messages: window.mageMessages || [],
isEmpty() {
return this.messages.reduce(
function (isEmpty, message) {
return isEmpty && message === undefined
}, true
)
},
removeMessage(messageIndex) {
this.messages[messageIndex] = undefined;
},
addMessages(messages, hideAfter) {
messages.map((message) => {
this.messages = this.messages.concat(message);
if (hideAfter === undefined && message.type === 'success' && window.defaultSuccessMessageTimeout) {
hideAfter = window.defaultSuccessMessageTimeout;
}
if (hideAfter) {
this.setHideTimeOut(this.messages.length -1, hideAfter);
}
});
},
setHideTimeOut(messageIndex, hideAfter) {
setTimeout((messageIndex) => {
this.removeMessage(messageIndex);
}, hideAfter, messageIndex);
},
eventListeners: {
['@messages-loaded.window'](event) {
this.addMessages(event.detail.messages, event.detail.hideAfter)
},
['@private-content-loaded.window'](event) {
const data = event.detail.data;
if (
data.messages &&
data.messages.messages &&
data.messages.messages.length
) {
this.addMessages(data.messages.messages);
}
},
['@clear-messages.window']() {
this.messages = [];
}
}
}
}
</script>
<section id="messages"
x-data="initMessages()"
x-bind="eventListeners"
aria-live="assertive"
role="alert"
>
<template x-if="!isEmpty()">
<div class="w-full">
<div class="messages container mx-auto py-3">
<template x-for="(message, index) in messages" :key="index">
<div>
<template x-if="message">
<div class="message" :class="message.type"
:ui-id="'message-' + message.type"
>
<span x-html="message.text"></span>
<button
type="button"
class="text-gray-600 hover:text-black"
aria-label="Close message"
@click.prevent="removeMessage(index)"
>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="stroke-current" width="18" height="18" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/>
</svg>
</button>
</div>
</template>
</div>
</template>
</div>
</div>
</template>
</section>
</div><div class="container flex flex-col md:flex-row flex-wrap my-6 font-bold lg:mt-8 text-3xl">
<h1 class="text-gray-900 page-title title-font"
>
<span class="base" data-ui-id="page-title-wrapper" >Shopping Cart</span> </h1>
</div>
<div class="columns"><div class="column main">
<script>
window.checkoutConfig = false;
window.customerData = window.checkoutConfig.customerData;
window.isCustomerLoggedIn = window.checkoutConfig.isCustomerLoggedIn;
</script>
<script>
'use strict';
(function( hyva, undefined ) {
let controller = new AbortController();
/**
* Takes a form element and submits it through fetch,
* then replaces the result into the document without
* refreshing the page
*/
hyva.postCart = (form) => {
if (!form.action) {
return;
}
controller.abort();
controller = new AbortController();
const action = form.action;
const formData = new FormData(form);
if (!formData.uenc) {
formData.append('uenc', hyva.getUenc());
}
formData.append('form_key', hyva.getFormKey());
window.fetch(action, {
method: 'POST',
body: formData,
signal: controller.signal
}).then((result) => {
return result.text()
}).then((content) => {
hyva.replaceDomElement('#maincontent', content)
}).catch((error) => {
if (error.name !== 'AbortError') {
console.error(error);
typeof window.dispatchMessages !== "undefined" && window.dispatchMessages(
[{
type: "error",
text: "Something\u0020went\u0020wrong.\u0020Please\u0020try\u0020again."
}], 10000
);
}
})
}
}( window.hyva = window.hyva || {} ));
</script>
<script>
function initCartForm(){
return {
cartIsEmpty: !!window.checkoutConfig,
checkCartShouldUpdate(data) {
const cart = data.cart;
if (this.cartIsEmpty !== !!window.checkoutConfig) {
this.cartIsEmpty = !!window.checkoutConfig;
this.reloadCartContent();
return;
}
if (cart && cart.items) {
if (!window.checkoutConfig) {
if (cart.items.length) {
this.reloadCartContent();
}
return;
}
if (window.checkoutConfig) {
const roundUp = (number) => Math.round(number * 100);
const decimalNumbersAreEqual = (number1, number2) => roundUp(number1) === roundUp(number2);
if (decimalNumbersAreEqual(
cart.items.reduce((totalQty, cartItem) => totalQty + cartItem.qty, 0),
window.checkoutConfig.quoteData.items_qty
) &&
decimalNumbersAreEqual(
cart.subtotalAmount,
window.checkoutConfig.totalsData.total_segments.find((segment) => segment.code === "subtotal").value
)
) {
return;
}
}
}
this.reloadCartContent();
},
reloadCartContent() {
window.fetch(window.location.href, {
method: "GET"
}).then((result) => {
return result.text()
}).then((body) => {
hyva.setCookie('mage-cache-sessid', '', -1, true);
window.checkoutConfig = null;
hyva.replaceDomElement('#maincontent', body)
}).catch((error) => {
console.error(error);
window.location.reload()
})
},
onStorageChange(event) {
if (event.key === 'private_content_version') {
window.dispatchEvent(new CustomEvent("reload-customer-section-data"));
}
}
}
}
</script>
<div x-data="initCartForm()"
class="cart-form clearfix"
@private-content-loaded.window="checkCartShouldUpdate($event.detail.data)"
@storage.window="onStorageChange($event)"
>
<div class="cart-empty">
<p>You have no items in your shopping cart.</p>
<p>Click <a href="https://checkout-demo.hyva.io/onestep/">here</a> to continue shopping. </p>
</div>
</div>
</div></div></main><footer class="page-footer"><div class="footer content"><div class="text-gray-700 body-font bg-container-darker border-t border-container-darker shadow pb-16">
<div class="container py-8 mx-auto">
<div class="flex flex-wrap order-first gap-y-16">
<div class="md:w-1/2 w-full flex flex-wrap pr-4">
<div class="w-full grid grid-cols-1 sm:grid-cols-2 gap-8 xl:col-span-2">
<div>
<h2 class="text-md leading-5 font-semibold tracking-wider uppercase">
Company
</h2>
<ul class="mt-4">
<li>
<a href="#" class="text-base leading-6">
About
</a>
</li>
<li class="mt-4">
<a href="https://checkout-demo.hyva.io/onestep/customer/account/"
class="text-base leading-6">
My Account </a>
</li>
<li class="mt-4">
<a href="https://checkout-demo.hyva.io/onestep/sales/guest/form/"
class="text-base leading-6">
Orders and Returns </a>
</li>
<li class="mt-4">
<a href="https://checkout-demo.hyva.io/onestep/search/term/popular/"
class="text-base leading-6">
Search Terms </a>
</li>
<li class="mt-4">
<a href="https://checkout-demo.hyva.io/onestep/contact/"
class="text-base leading-6">
Contact </a>
</li>
</ul>
</div>
<div>
<h2 class="text-md leading-5 font-semibold tracking-wider uppercase">
Legal
</h2>
<ul class="mt-4">
<li class="mt-4">
<a href="#" class="text-base leading-6">
Privacy
</a>
</li>
<li class="mt-4">
<a href="#" class="text-base leading-6">
Terms and Conditions
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="flex flex-wrap gap-8 pr-4 w-full lg:w-1/4 md:w-1/2">
<div x-data="{ open: false }"
class="w-full sm:w-1/2 md:w-full"
>
<div class="title-font font-medium text-gray-900 tracking-widest text-sm mb-3 uppercase">
Select Store </div>
<div class="relative inline-block text-left">
<div>
<button @click.prevent="open = !open"
@click.outside="open = false"
@keydown.window.escape="open=false"
type="button"
class="inline-flex justify-center w-full form-select px-4 py-2 bg-white focus:outline-none"
aria-haspopup="true"
aria-expanded="true"
>
OneStep Demo Store <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="flex self-center h-5 w-5 -mr-1 ml-2" width="25" height="25" role="img">
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"/>
<title>chevron-down</title></svg>
</button>
</div>
<nav x-cloak=""
x-show="open"
class="absolute right-0 top-full z-20 w-56 py-2 mt-1 overflow-auto origin-top-left rounded-sm shadow-lg sm:w-48 lg:mt-3 bg-container-lighter">
<div class="my-1" role="menu" aria-orientation="vertical" aria-labelledby="options-menu">
<a href="https://checkout-demo.hyva.io/onestep/stores/store/redirect/___store/twostep/___from_store/onestep/uenc/aHR0cHM6Ly9jaGVja291dC1kZW1vLmh5dmEuaW8vdHdvc3RlcC9jaGVja291dC9jYXJ0Lw%2C%2C/"
class="block px-4 py-2 lg:px-5 lg:py-2 hover:bg-gray-100"
>
TwoStep Demo Store </a>
</div>
</nav>
</div>
</div>
</div>
<div class="pr-4 lg:w-1/4 md:w-1/2">
<form
class="form subscribe"
action="https://checkout-demo.hyva.io/onestep/newsletter/subscriber/new/"
method="post"
x-data="initNewsletterForm()"
@submit.prevent="submitForm()"
id="newsletter-validate-detail"
aria-label="Subscribe to Newsletter"
>
<h2
class="mb-3 text-sm font-medium tracking-widest text-gray-900 uppercase title-font"
id="footer-newsletter-heading"
>
Newsletter </h2>
<div class="flex flex-wrap justify-center gap-2 md:justify-start">
<label for="newsletter-subscribe" class="sr-only">
Email Address </label>
<input
name="email"
type="email"
required
id="newsletter-subscribe"
class="form-input inline-flex w-full"
placeholder="Enter your email address"
aria-describedby="footer-newsletter-heading"
>
<input name="form_key" type="hidden" value="niMfAeAzjpeI3di3" /> <button class="inline-flex shrink-0 ml-auto xl:mt-0 btn btn-primary">
Subscribe </button>
</div>
<div>
<template x-if="displayErrorMessage">
<p class="flex items-center text-red">
<span class="inline-block w-8 h-8 mr-3">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" width="24" height="24" role="img">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
<title>exclamation-circle</title></svg>
</span>
<template x-for="errorMessage in errorMessages">
<span x-html="errorMessage"></span>
</template>
</p>
</template>
</div>
</form>
<div class="w-full">
</div>
<script>
function initNewsletterForm() {
return {
errors: 0,
hasCaptchaToken: 0,
displayErrorMessage: false,
errorMessages: [],
setErrorMessages(messages) {
this.errorMessages = [messages]
this.displayErrorMessage = this.errorMessages.length
},
submitForm() {
// Do not rename $form, the variable is expected to be declared in the recaptcha output
const $form = document.querySelector('#newsletter-validate-detail');
if (this.errors === 0) {
$form.submit();
}
}
}
}
</script>
</div>
</div>
</div>
<div class="bg-container border-t border-b border-container">
<div class="container py-6 mx-auto flex items-center sm:flex-row flex-col">
<a href="https://hyva.io"
class="flex title-font font-medium items-center md:justify-start justify-center text-gray-900">
<span class="ml-3 text-xl">Hyvä Themes</span>
</a>
<p>
<small class="text-sm text-gray-800 sm:ml-6 sm:mt-0 mt-4">
© 2020 Hyva Themes B.V. —
<a
href="https://twitter.com/hyva_io"
target="_blank"
rel="noopener noreferrer"
class="text-gray-700 ml-1"
aria-label="Hyva twitter profile, opens in new window"
>@hyva_io</a>
</small>
</p>
</div>
</div>
</div>
</div><div class="widget block block-static-block">
<div data-content-type="html" data-appearance="default" data-element="main" data-decoded="true"><script>
// Check if x-defer is implemented in page to make it future-update proof
// This is not bullet proof, but a good indication your theme has been updated to 1.3.7 or newer
if (! document.querySelector('[x-defer]') ) {
const deferSelectors = {
".product-slider section[x-data]": "intersect",
".product-info [x-data]": "intersect",
"#filters-content [x-data]": "intersect",
"#review_form": "intersect",
"section[x-data^=initRecentlyViewedProductsComponent]": "intersect",
"div[x-data^=initBundleOptions]": "intersect",
"#product_addtocart_form [x-data]": "intersect",
"#notice-cookie-block": "interact"
}
for (const [selector, deferUntil] of Object.entries(deferSelectors)) {
document.querySelectorAll(selector).forEach(el => el.setAttribute('x-defer', `${deferUntil}`));
}
(function () {
"use strict";
const hasAlpine = new Promise(resolve => {
window.addEventListener('alpine:initialized', resolve, {once: true, passive: true});
});
const hasInteract = new Promise(resolve => {
(events => {
const onInteract = () => {
resolve();
events.forEach(type => window.removeEventListener(type, onInteract));
}
events.forEach(type => window.addEventListener(type, onInteract, {once: true, passive: true}))
})(['touchstart', 'wheel', 'mouseover', 'keydown'])
});
const onIntersect = (el) => {
return new Promise(resolve => {
const observer = new IntersectionObserver(entries => {
for (const entry of entries) {
if (entry.isIntersecting) {
observer.disconnect()
resolve();
}
}
}, {});
observer.observe(el);
});
}
function runComponent(el) {
hasAlpine.then(() => {
el.removeAttribute('x-ignore');
queueMicrotask(() => Alpine.initTree(el));
});
}
function initDeferredComponents() {
document.querySelectorAll('[x-data][x-defer]').forEach(el => {
el.setAttribute('x-ignore', '');
const deferUntil = (el.getAttribute('x-defer') || '').trim();
switch (deferUntil) {
case 'interact':
hasInteract.then(() => runComponent(el));
break;
case 'intersect':
onIntersect(el).then(() => runComponent(el))
break;
case 'idle':
window.requestIdleCallback(() => runComponent(el), {timeout: 4000})
break;
case 'eager':
runComponent(el);
break;
default:
if (deferUntil.startsWith('event:') && deferUntil.length > 6) {
window.addEventListener(deferUntil.substring(6), () => runComponent(el), {once: true, passive: true});
}
}
});
}
window.addEventListener('alpine:init', initDeferredComponents, {once: true, passive: true});
})()
}
</script></div></div>
<div class="widget block block-static-block">
<div data-content-type="html" data-appearance="default" data-element="main" data-decoded="true"><script>
if (HTMLScriptElement.supports &&
HTMLScriptElement.supports('speculationrules')) {
const specScript = document.createElement('script');
specScript.type = 'speculationrules';
specRules = {
"prerender": [{
"where": {
"and": [
{ "href_matches": "/*.html" },
{ "not": {"selector_matches": ".do-not-prerender"}}
]
},
"eagerness": "moderate"
}]
};
specScript.textContent = JSON.stringify(specRules);
document.body.append(specScript);
}
</script></div></div>
<div class="widget block block-static-block">
<div data-content-type="html" data-appearance="default" data-element="main" data-decoded="true"><script>
if (HTMLScriptElement.supports &&
HTMLScriptElement.supports('speculationrules')) {
const specScript = document.createElement('script');
specScript.type = 'speculationrules';
specRules = {
"prerender": [{
"where": {
"and": [
{ "href_matches": "/*.html" },
{ "not": {"selector_matches": ".do-not-prerender"}}
]
},
"eagerness": "moderate"
}]
};
specScript.textContent = JSON.stringify(specRules);
document.body.append(specScript);
}
</script></div></div>
</footer>
<script>
(() => {
function src_default(Alpine) {
Alpine.directive("intersect", Alpine.skipDuringClone((el, { value, expression, modifiers }, { evaluateLater, cleanup }) => {
let evaluate = evaluateLater(expression);
let options = {
rootMargin: getRootMargin(modifiers),
threshold: getThreshold(modifiers)
};
let observer = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting === (value === "leave"))
return;
evaluate();
modifiers.includes("once") && observer.disconnect();
});
}, options);
observer.observe(el);
cleanup(() => {
observer.disconnect();
});
}));
}
function getThreshold(modifiers) {
if (modifiers.includes("full"))
return 0.99;
if (modifiers.includes("half"))
return 0.5;
if (!modifiers.includes("threshold"))
return 0;
let threshold = modifiers[modifiers.indexOf("threshold") + 1];
if (threshold === "100")
return 1;
if (threshold === "0")
return 0;
return Number(`.${threshold}`);
}
function getLengthValue(rawValue) {
let match = rawValue.match(/^(-?[0-9]+)(px|%)?$/);
return match ? match[1] + (match[2] || "px") : void 0;
}
function getRootMargin(modifiers) {
const key = "margin";
const fallback = "0px 0px 0px 0px";
const index = modifiers.indexOf(key);
if (index === -1)
return fallback;
let values = [];
for (let i = 1; i < 5; i++) {
values.push(getLengthValue(modifiers[index + i] || ""));
}
values = values.filter((v) => v !== void 0);
return values.length ? values.join(" ").trim() : fallback;
}
document.addEventListener("alpine:init", () => {
window.Alpine.plugin(src_default);
});
})();
</script>
<script>
for (const [selector, deferUntil] of Object.entries({".product-slider section[x-data]":"intersect",".product-info [x-data]":"intersect","#filters-content [x-data]":"intersect","#review_form":"intersect","section[x-data^=initRecentlyViewedProductsComponent]":"intersect","div[x-data^=initBundleOptions]":"intersect","#product_addtocart_form [x-data]":"intersect","#notice-cookie-block":"idle"})) {
document.querySelectorAll(selector).forEach(el => el.setAttribute('x-defer', `${deferUntil}`));
}
</script>
<script>
(function () {
"use strict";
const hasAlpine = new Promise(resolve => {
window.addEventListener('alpine:initialized', resolve, {once: true, passive: true});
});
const hasInteract = new Promise(resolve => {
(events => {
const onInteract = () => {
resolve();
events.forEach(type => window.removeEventListener(type, onInteract));
}
events.forEach(type => window.addEventListener(type, onInteract, {once: true, passive: true}))
})(['touchstart', 'mouseover', 'wheel', 'scroll', 'keydown'])
});
const onIntersect = (el) => {
return new Promise(resolve => {
const observer = new IntersectionObserver(entries => {
for (const entry of entries) {
if (entry.isIntersecting) {
observer.disconnect()
resolve();
}
}
}, {});
observer.observe(el);
});
}
function runComponent(el) {
hasAlpine.then(() => {
el.removeAttribute('x-ignore');
queueMicrotask(() => Alpine.initTree(el));
});
}
function initDeferredComponents() {
document.querySelectorAll('[x-data][x-defer]').forEach(el => {
el.setAttribute('x-ignore', '');
const deferUntil = (el.getAttribute('x-defer') || '').trim();
switch (deferUntil) {
case 'interact':
hasInteract.then(() => runComponent(el));
break;
case 'intersect':
onIntersect(el).then(() => runComponent(el))
break;
case 'idle':
window.requestIdleCallback
? window.requestIdleCallback(() => runComponent(el), {timeout: 4000})
: setTimeout(() => runComponent(el), 4000);
break;
case 'eager':
runComponent(el);
break;
default:
if (deferUntil.startsWith('event:') && deferUntil.length > 6) {
window.addEventListener(deferUntil.substring(6), () => runComponent(el), {once: true, passive: true});
}
}
});
}
window.addEventListener('alpine:init', initDeferredComponents, {once: true, passive: true});
})()
</script>
<script type="module"
src="https://checkout-demo.hyva.io/static/version1741272610/frontend/Hyva/Checkout/en_US/Hyva_Theme/js/alpine3.min.js"
defer
crossorigin
></script>
<script>
'use strict';
function dispatchMessages(messages, hideAfter) {
const messagesEvent = new CustomEvent("messages-loaded", {
detail: {
messages: messages,
hideAfter: hideAfter
}
});
window.dispatchEvent(messagesEvent);
}
if (typeof hyva === 'undefined' || (!hyva.getBrowserStorage || !hyva.getCookie || !hyva.setCookie)) {
console.warn("Hyvä helpers are not loaded yet. Make sure they are included before this script");
}
(function( hyva, undefined ) {
hyva.initFormKey = () => {
const inputSelector = 'input[name="form_key"]',
formKey = hyva.getFormKey();
Array.from(document.querySelectorAll(inputSelector)).map(function (input) {
input.value = formKey
});
}
hyva.initMessages = () => {
try {
const messages = hyva.getCookie('mage-messages');
window.mageMessages = messages ? JSON.parse(decodeURIComponent(messages).replace(/\+/g, ' ')) : [];
dispatchMessages(window.mageMessages);
// empty `mage-messages` cookie
const skipSetDomain = true;
hyva.setCookie('mage-messages','', -1, skipSetDomain);
} catch (error) {
console.warn('Error parsing Cookie Messages:', error);
}
}
window.addEventListener('DOMContentLoaded', hyva.initFormKey);
hyva.alpineInitialized(hyva.initMessages)
}( window.hyva = window.hyva || {} ));
</script>
<script>
'use strict';
{
const private_content_key = 'mage-cache-storage';
const private_content_expire_key = 'mage-cache-timeout';
const private_content_version_key = 'private_content_version';
const section_data_ids_key = 'section_data_ids';
const mage_cache_session_id_key = 'mage-cache-sessid';
const last_visited_store_key = 'last_visited_store';
const ttl = 3600;
if (typeof hyva === 'undefined' || (!hyva.getBrowserStorage || !hyva.getCookie || !hyva.setCookie)) {
console.warn("Hyvä helpers are not loaded yet. Make sure they are included before this script");
}
function loadSectionData () {
const browserStorage = hyva.getBrowserStorage();
if (!browserStorage) {
typeof window.dispatchMessages !== "undefined" && window.dispatchMessages(
[{
type: "warning",
text: "Please enable LocalStorage in your browser."
}]
);
return;
}
try {
let isInvalid = false;
if (hyva.getCookie(last_visited_store_key) !== CURRENT_STORE_CODE) {
isInvalid = true;
}
hyva.setCookie(last_visited_store_key, CURRENT_STORE_CODE, false, false);
if (!hyva.getCookie(mage_cache_session_id_key)) {
isInvalid = true;
browserStorage.removeItem(private_content_key);
const skipSetDomain = true;
const days = false;
hyva.setCookie(mage_cache_session_id_key, true, days, skipSetDomain)
}
const cookieVersion = hyva.getCookie(private_content_version_key);
const storageVersion = browserStorage.getItem(private_content_version_key);
if (cookieVersion && !storageVersion || cookieVersion !== storageVersion) {
isInvalid = true;
}
const privateContentExpires = browserStorage.getItem(private_content_expire_key);
if (privateContentExpires && new Date(privateContentExpires) < new Date()) {
browserStorage.removeItem(private_content_key);
}
if (isInvalid && cookieVersion) {
fetchPrivateContent([]);
} else if (cookieVersion && storageVersion && cookieVersion === storageVersion) {
const privateContent = JSON.parse(browserStorage.getItem(private_content_key));
if (
privateContent &&
privateContentExpires &&
privateContent.cart &&
privateContent.customer
) {
dispatchPrivateContent(privateContent);
} else {
fetchPrivateContent([]);
}
} else {
if (document.getElementById('default-section-data')) {
const privateContent = JSON.parse(document.getElementById('default-section-data').innerText.trim());
dispatchPrivateContent(privateContent);
} else {
dispatchPrivateContent({});
}
}
} catch (error) {
console.warn('Error retrieving Private Content:', error);
}
}
hyva.alpineInitialized(loadSectionData)
window.addEventListener('reload-customer-section-data', loadSectionData);
function dispatchPrivateContent(data) {
const privateContentEvent = new CustomEvent("private-content-loaded", {
detail: {
data: data
}
});
window.dispatchEvent(privateContentEvent);
}
function fetchPrivateContent(sections) {
fetch(`${BASE_URL}customer/section/load/?sections=${encodeURIComponent(sections.join(','))}`, {
method: 'GET',
headers: {
'Content-Type': 'application/json',
'X-Requested-With': 'XMLHttpRequest'
}
})
.then(response => response.ok && response.json())
.then(
data => {
if (data) {
try {
const browserStorage = hyva.getBrowserStorage();
// merge new data preserving non-invalidated sections
const oldSectionData = JSON.parse(browserStorage.getItem(private_content_key) || '{}') || {};
if ((! data.cart || ! data.cart.cartId) && oldSectionData['checkout-data']) {
delete oldSectionData['checkout-data'];
}
const newSectionData = Object.assign(oldSectionData, data);
dispatchPrivateContent(newSectionData);
// don't persist messages, they've been dispatched already
if (newSectionData.messages && newSectionData.messages.messages ) {
newSectionData.messages.messages = [];
}
browserStorage.setItem(private_content_key, JSON.stringify(newSectionData));
const expiresAt = new Date(Date.now() + (ttl * 1000)).toISOString();
browserStorage.setItem(private_content_expire_key, expiresAt);
const newCookieVersion = hyva.getCookie(private_content_version_key);
browserStorage.setItem(private_content_version_key, newCookieVersion);
// We don't need the section_data_ids in Hyvä, but we store them for compatibility
// with Luma Fallback. Otherwise, not all sections are loaded in Luma Checkout
hyva.setCookie(
section_data_ids_key,
JSON.stringify(
Object.keys(data).reduce((sectionDataIds, sectionKey) => {
sectionDataIds[sectionKey] = data[sectionKey]['data_id'];
return sectionDataIds;
}, {})
),
false,
true
);
} catch (error) {
console.warn("Couldn't store privateContent", error);
}
}
}
);
}
}
</script>
<script>
(() => {
document.addEventListener('submit', event => event.target.action = event.target.action.replace('%25uenc%25', hyva.getUenc()));
})()
</script>
<script>
(events => {
const dispatchUserInteractionEvent = () => {
events.forEach(type => window.removeEventListener(type, dispatchUserInteractionEvent))
window.dispatchEvent(new Event('init-external-scripts'))
};
events.forEach(type => window.addEventListener(type, dispatchUserInteractionEvent, {once: true, passive: true}))
})(['touchstart', 'mouseover', 'wheel', 'scroll', 'keydown'])
</script>
<script>
function initConfigurableOptions(productId, optionConfig) {
function findPathParam(key) {
const baseUrl = (BASE_URL.substring(0, 2) === '//' ? 'http:' : '') + BASE_URL;
const baseUrlParts = (new URL(baseUrl)).pathname.replace(/\/$/, '').split('/');
const pathParts = window.location.pathname.split('/').slice(baseUrlParts.length + 3);
for (let i = 0; i < pathParts.length; i += 2) {
if (pathParts[i] === key && pathParts.length > i) {
return pathParts[i + 1];
}
}
}
return {
optionConfig,
productId,
itemId: (new URLSearchParams(window.location.search)).get('id') || findPathParam('id'),
allowedAttributeOptions: [],
selectedValues: [],
init() {
this.findAllowedAttributeOptions();
this.$nextTick(() => {
if (typeof this.optionConfig.defaultValues === 'object') {
for (const [attributeId, value] of Object.entries(this.optionConfig.defaultValues)) {
this.changeOption(attributeId, value + '');
}
}
this.preselectQuerystringItems();
this.preselectLocationHashItems();
});
},
productIndex: 0,
productIndexForPrice: 0,
optionIsActive(attributeId, optionId) {
return !!this.getAllowedAttributeOptions(attributeId).find(
option => option.id === optionId
)
},
optionIsEnabled(attributeId, optionId) {
for (const productId in this.optionConfig.index) {
if (this.optionConfig.index[productId][attributeId] === optionId) {
return true;
}
}
return false;
},
findSimpleIndex() {
this.productIndex = this.calculateSimpleIndexForPartialSelection(this.selectedValues);
this.productIndexForPrice = this.findCheapestProductForPartialSelection(this.selectedValues);
},
calculateSimpleIndexForPartialSelection(selectedValues) {
if (selectedValues.length === 0) return 0;
return this.findProductIdsForPartialSelection(selectedValues)[0];
},
calculateSimpleIndexForFullSelection(selectedValues) {
if (! this.isFullSelection(selectedValues)) return false;
const productIndexes = this.optionConfig.index;
return Object.keys(productIndexes).find(productIndex => {
const productCandidateOptions = productIndexes[productIndex];
for (const productOption in productCandidateOptions) {
if (
!selectedValues[productOption] ||
selectedValues[productOption] !== productCandidateOptions[productOption]
) {
return false;
}
}
return productIndex;
});
},
findAllowedAttributeOptions() {
this.allowedAttributeOptions = this.calculateAllowedAttributeOptions(this.selectedValues);
},
calculateAllowedAttributeOptions(selectedValues) {
const allAttributes = this.optionConfig.attributes;
const allAttributesSorted = Object.values(allAttributes).sort((a,b) => {
return a.position - b.position
});
const newAllowedAttributeOptions = [];
allAttributesSorted.forEach(attribute => {
const selectionWithoutAttr = Object.assign({}, this.removeAttrFromSelection(selectedValues, attribute.id));
const availableIndexes = this.calculateAvailableProductIndexes(selectionWithoutAttr);
newAllowedAttributeOptions[attribute.id] = allAttributes[attribute.id].options.filter(option => {
return !!option.products.find(product => {
return availableIndexes.includes(product);
})
});
});
return newAllowedAttributeOptions;
},
calculateAvailableProductIndexes(selectedOptions) {
if (Object.keys(selectedOptions).length === 0) {
if (Object.values(this.optionConfig.salable || {}).length) {
return [].concat.apply([], [].concat.apply([], Object.values(this.optionConfig.salable).map(Object.values))).filter((x, i, a) => a.indexOf(x) === i)
}
return Object.keys(this.optionConfig.index);
}
const selectedIds = Object.keys(selectedOptions);
if (Object.values(this.optionConfig.salable || {}).length) {
const selectedOptionIndexes = selectedIds.map(attrId => {
const optionValue = selectedOptions[attrId];
return this.optionConfig.salable[attrId] && this.optionConfig.salable[attrId][optionValue] || []
})
return selectedOptionIndexes.reduce((acc, optionIndexes) => {
return acc.filter(index => optionIndexes.includes(index));
});
} else {
const productIndexes = this.optionConfig.index;
return Object.keys(productIndexes).filter(index => {
for (const attrId of selectedIds) {
if (productIndexes[index][attrId] !== `${selectedOptions[attrId]}`) return false
}
return true
});
}
},
findAttributeByOptionId(optionId) {
for (const attributeId in this.optionConfig.attributes) {
const attributeOptions = this.optionConfig.attributes[attributeId].options || [];
if (attributeOptions.find(option => option.id === optionId)) {
return attributeId;
}
}
},
getAllowedAttributeOptions(attributeId) {
return this.allowedAttributeOptions[attributeId] || []
},
getAllAttributeOptions(attributeId) {
return (
this.optionConfig.attributes[attributeId] &&
this.optionConfig.attributes[attributeId].options
) || []
},
getProductIdsForOption(option) {
const attributeId = this.findAttributeByOptionId(option.id);
const allOptions = this.optionConfig.attributes[attributeId];
const opt = (allOptions && allOptions.options || []).find(o => o.id === option.id);
return opt && opt.products
? opt.products
: [];
},
findProductIdsForPartialSelection(optionSelection) {
const candidateProducts = Object.values(optionSelection).reduce((candidates, optionId) => {
const newCandidates = this.getProductIdsForOption({id: optionId});
return candidates === null
? newCandidates
: candidates.filter(productId => newCandidates.includes(productId));
}, null);
return candidateProducts || [];
},
findCheapestProductForPartialSelection(optionSelection) {
const candidateProducts = this.findProductIdsForPartialSelection(optionSelection);
return candidateProducts.reduce((cheapest, simpleIdx) => {
// in the first iteration we start with simpleIdx as the currently cheapest product
if (! this.optionConfig.optionPrices[cheapest]) return simpleIdx;
const knownCheapestPrice = this.optionConfig.optionPrices[cheapest].finalPrice.amount;
return knownCheapestPrice > this.optionConfig.optionPrices[simpleIdx].finalPrice.amount
? simpleIdx
: cheapest;
}, 0)
},
findProductIdToUseForOptionPrice(option) {
// try to find a product for a complete selection
const attributeId = this.findAttributeByOptionId(option.id);
const optionSelection = Object.assign({}, this.selectedValues, {[attributeId]: option.id});
const matchingSimpleIndex = this.calculateSimpleIndexForFullSelection(optionSelection);
// if there is no complete selection, use the cheapest product for the option
return matchingSimpleIndex || this.findCheapestProductForPartialSelection(optionSelection);
},
getAttributeOptionLabel(option) {
const optionProduct = this.findProductIdToUseForOptionPrice(option);
if ((! optionProduct) || (optionProduct === this.productIndexForPrice)) {
return option.label;
}
const currentPrice = this.getOptionPriceAdjustmentBasePrice();
if (this.optionConfig.optionPrices[optionProduct]) {
const optionPrice = this.optionConfig.optionPrices[optionProduct].finalPrice.amount;
if (optionPrice !== currentPrice){
return option.label + ' ' + hyva.formatPrice(optionPrice - currentPrice, true);
}
}
return option.label;
},
getOptionPriceAdjustmentBasePrice() {
if (this.optionConfig.optionPrices[this.productIndexForPrice]) {
return this.optionConfig.optionPrices[this.productIndexForPrice].finalPrice.amount
}
return this.optionConfig.prices.finalPrice.amount; // default price if no option selection
},
clearOptionIfActive(optionId, value) {
if (this.selectedValues[optionId] === value) {
this.blurLabel()
this.changeOption(optionId, '')
}
},
removeAttrFromSelection(selectedValues, attributeId) {
attributeId = parseInt(attributeId);
return selectedValues.reduce((newSelection, val, attr) => {
if (attr !== attributeId) {
newSelection[attr] = val;
}
return newSelection;
}, []);
},
changeOption(attributeId, value) {
if (value === '') {
this.selectedValues = this.removeAttrFromSelection(this.selectedValues, attributeId)
} else if (value && this.getAllowedAttributeOptions(attributeId).find(option => option.id === value)) {
this.selectedValues[attributeId] = value;
}
this.findSimpleIndex();
this.findAllowedAttributeOptions();
this.updatePrices();
this.updateGallery();
const candidates = this.findProductIdsForPartialSelection(this.selectedValues);
window.dispatchEvent(
new CustomEvent(
'configurable-selection-changed',
{
detail: {
productId: this.productId,
optionId: attributeId,
value: value,
productIndex: this.productIndex,
selectedValues: this.selectedValues,
candidates: candidates,
skuCandidates: Object.values(candidates).map(id => this.optionConfig.sku[id]),
}
}
)
);
},
calculateIsMinimalPrice() {
return ! this.isFullSelection(this.selectedValues);
},
isFullSelection(selectedValues) {
return Object.values(selectedValues).length === Object.keys(this.optionConfig.attributes).length;
},
updatePrices() {
const value = this.optionConfig.optionPrices[this.productIndexForPrice] || this.optionConfig.prices;
window.dispatchEvent(
new CustomEvent(
"update-prices-" + this.productId,
{
detail: Object.assign(
value,
{ isMinimalPrice: this.calculateIsMinimalPrice() }
)
}
)
);
},
updateGallery () {
if (this.productIndex) {
const images = this.optionConfig.images[this.productIndex];
images && window.dispatchEvent(new CustomEvent(
"update-gallery",
{ detail: this.sortImagesByPosition(images) }
));
} else {
window.dispatchEvent(new Event("reset-gallery"));
}
},
sortImagesByPosition(images) {
return images.sort((x, y) => {
return x.position === y.position ? 0 : (parseInt(x.position) > parseInt(y.position) ? 1 : -1)
});
},
onGetCartData(data) {
},
preselectCartItems(data) {
// pre-select options based on cart data for current (quote) itemId
const cart = data && data.cart;
if (cart && cart.items) {
const cartItem = cart.items.find((item) => {
return (
item.item_id === this.itemId
&& item.product_id === this.productId
)
});
if (cartItem && cartItem.options && cartItem.options.length) {
cartItem.options.map(option => {
this.changeOption(option.option_id, option.option_value);
})
}
}
},
preselectQuerystringItems() {
// pre-select option like ?size=167
const urlQueryParams = new URLSearchParams(window.location.search.replace('?',''));
this.preselectItemsBasedOnLocation(attribute => urlQueryParams.get(attribute.code));
},
preselectLocationHashItems() {
// pre-select option like #144=167
const urlHashParams = new URLSearchParams(window.location.hash.replace('#',''));
this.preselectItemsBasedOnLocation(attribute => urlHashParams.get(attribute.id));
},
preselectItemsBasedOnLocation(getLocationValue) {
Object.values(this.optionConfig.attributes).map(attribute => {
const v = getLocationValue(attribute);
v && this.changeOption(attribute.id, v)
});
}
}
}
</script>
<script>
function initSwatchOptions(swatchConfig) {
return {
swatchConfig,
getAttributeSwatchData(attributeId) {
const swatchConfig = Object.assign({}, this.swatchConfig[attributeId]);
swatchConfig['details'] = JSON.parse(swatchConfig['additional_data']);
return swatchConfig;
},
mapSwatchTypeNumberToTypeCode(typeNumber) {
switch ("" + typeNumber) {
case "1":
return "color"
case "2":
return "image"
case "3":
return "empty"
case "0":
default:
return "text"
}
},
getTypeOfFirstOption(attributeId) {
for (const optionId in this.swatchConfig[attributeId]) {
const option = this.swatchConfig[attributeId][optionId];
if (typeof option.type !== 'undefined') {
return this.mapSwatchTypeNumberToTypeCode(option.type);
}
}
},
getVisualSwatchType(attributeId, targetOptionId) {
// If a type configuration is present for the given option id, use it
const config = this.swatchConfig[attributeId];
if (config[targetOptionId] && typeof config[targetOptionId].type !== 'undefined') {
return this.mapSwatchTypeNumberToTypeCode(config[targetOptionId].type);
}
// Otherwise - if no config is present for the target option - use the type of the first option
// with a type property from the attribute, thus assuming its the same type as the target option.
// (This edge case condition can occur on single swatch products if some options are not salable)
return this.getTypeOfFirstOption(attributeId);
},
getSwatchType(attributeId, optionId) {
// Deserialize the attribute details the first time they are used
if (this.swatchConfig[attributeId] && ! this.swatchConfig[attributeId].details) {
this.swatchConfig[attributeId] = this.getAttributeSwatchData(attributeId);
}
const type = this.swatchConfig[attributeId] &&
this.swatchConfig[attributeId].details &&
this.swatchConfig[attributeId].details.swatch_input_type ||
"empty";
return type === 'visual' ? this.getVisualSwatchType(attributeId, optionId) : type;
},
isTextSwatch(attributeId, optionId) {
return this.getSwatchType(attributeId, optionId) === 'text';
},
isVisualSwatch(attributeId, optionId) {
const type = this.getSwatchType(attributeId, optionId);
return ['image', 'color'].includes(type);
},
getSwatchBackgroundStyle(attributeId, optionId) {
const config = this.getSwatchConfig(attributeId, optionId);
const type = this.getSwatchType(attributeId, optionId);
if (type === "color") {
return 'background-color:' + config.value;
} else if (type === "image") {
return "background: #ffffff url('" + config.value + "') no-repeat center";
} else {
return '';
}
},
getSwatchText(attributeId, optionId) {
const config = this.getSwatchConfig(attributeId, optionId);
return config.label || config.value || this.getOptionLabelFromOptionConfig(attributeId, optionId);
},
getOptionLabelFromOptionConfig(attributeId, optionId) {
// Fallback if no value is present in swatchConfig data
// Reference issue https://gitlab.hyva.io/hyva-themes/magento2-default-theme/-/issues/190
const option = this.getAllAttributeOptions(attributeId).filter(option => option.id === optionId);
return option && option[0] && option[0].label ||'';
},
getSwatchConfig(attributeId, optionId) {
return this.swatchConfig[attributeId] && this.swatchConfig[attributeId][optionId]
? this.swatchConfig[attributeId][optionId]
: false;
},
activeTooltipItem: false,
tooltipPositionElement: false,
isTooltipVisible() {
return this.activeTooltipItem &&
this.getSwatchConfig(
this.activeTooltipItem.attribute,
this.activeTooltipItem.item
);
},
isFirstItemCol() {
return this.activeTooltipItem.index === 0;
},
getTooltipImageStyle(attributeId, optionId) {
const config = this.getSwatchConfig(attributeId, optionId);
const type = this.getSwatchType(attributeId, optionId);
if (type === "color") {
return 'background-color:' + config.value + '; width: 110px; height: 90px;';
} else if (type === "image") {
return "background: #ffffff url('" + config.thumb +
"') center center no-repeat; width: 110px; height: 90px;";
} else {
return 'display:none';
}
},
getTooltipPosition() {
return this.tooltipPositionElement ?
`top: ${this.tooltipPositionElement.offsetTop}px;` +
`left: ${
this.tooltipPositionElement.offsetLeft - (
this.tooltipPositionElement.closest('.snap') &&
this.tooltipPositionElement.closest('.snap').scrollLeft ||
0
)
}px;` : ''
},
getTooltipLabel() {
return this.getSwatchConfig(this.activeTooltipItem.attribute, this.activeTooltipItem.item).label
},
focusedLabel: false,
focusLabel(optionId) {
this.focusedLabel = optionId;
},
blurLabel() {
this.focusedLabel = false;
},
showSwatches: false,
initShowSwatchesIntersect() {
if ('IntersectionObserver' in window && !window.scrollY) {
let io = new IntersectionObserver(
entries => {
entries.map(entry => {
if (entry.isIntersecting) {
this.showSwatches = true;
io.unobserve(this.$root);
}
})
}
);
io.observe(this.$root);
} else {
this.showSwatches = true
}
}
}
}
</script>
<div
class="z-10 fixed bottom-4 inset-x-4 sm:w-96 max-w-prose mx-auto p-4 rounded shadow-2xl bg-container-lighter
lg:absolute lg:bottom-auto lg:right-auto lg:top-[var(--msrp-block-offset)] lg:left-[var(--msrp-inline-offset)] lg:shadow-lg lg:max-w-xs"
:style="setPosition()"
x-data="initMsrpPopover()"
x-cloak
x-show="open"
x-transition:enter="transition ease-out duration-300 opacity-0 translate-y-full lg:-translate-y-0"
x-transition:enter-end="transition ease-out duration-300 opacity-100 translate-y-0"
x-transition:leave="transition ease-in duration-150 opacity-0 translate-y-full lg:-translate-y-0"
@click.outside="closePopover($event)"
@msrp-popover.window="showPopover($event.detail)"
@resize.window.debounce="closePopover()"
@keydown.window.escape="closePopover()"
>
<div class="flex justify-between gap-2 mb-2">
<strong id="map-popup-heading-price" class="font-bold" x-text="title"></strong>
<button type="button" @click="closePopover()">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" width="24" height="24" role="img">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/>
<title>x</title></svg>
</button>
</div>
<template x-if="type !== 'help'">
<div class="mb-4 text-sm">
<dl class="price-box">
<div class="flex gap-2">
<dt class="font-semibold whitespace-nowrap">Price:</dt>
<dd x-html="msrpPrice" class="flex flex-col"></dd>
</div>
<div class="flex gap-2">
<dt class="font-semibold whitespace-nowrap">Actual Price:</dt>
<dd x-html="actualPrice" class="flex flex-col"></dd>
</div>
</dl>
</div>
</template>
<div class="text-sm" x-html="content"></div>
<script>
function initMsrpPopover() {
return {
open: false,
type: "price", // price or help
title: '',
content: 'Our price is lower than the manufacturer's "minimum advertised price." As a result, we cannot show you the price in catalog or the product page. <br><br> You have no obligation to purchase the product once you know the price. You can simply remove the item from your cart.',
isSaleable: false,
actualPrice: null,
msrpPrice: null,
productId: null,
anchor: null,
position: ['0', '0'],
isInViewport() {
const pageWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
const offset = this.anchor.offsetLeft + this.$root.offsetWidth;
return pageWidth > offset;
},
setPosition() {
return {
'--msrp-block-offset': this.position[0],
'--msrp-inline-offset': this.position[1]
}
},
calcPosition() {
const target = this.anchor;
const pageTop = target.getBoundingClientRect().top + window.scrollY;
const pageLeft = target.getBoundingClientRect().left + window.scrollX;
const positionBlock = `${pageTop + target.clientHeight}px`;
const positionInline = this.isInViewport()
? `${pageLeft}px`
: `${(pageLeft - (this.$root.offsetWidth - target.offsetWidth))}px`;
this.position = [positionBlock, positionInline]
},
closePopover(event) {
if (event && event.target === this.anchor) return;
this.open = false;
},
showPopover(event) {
const data = event.msrpData;
if (!data) return;
this.open = true;
this.type = data.type;
this.productId = data.id;
this.isSaleable = data.isSaleable;
this.actualPrice = data.realPrice;
this.msrpPrice = data.msrpPrice;
this.title = this.type === 'help'
? ''
: data.productName;
this.content = this.type === 'help'
? 'Our price is lower than the manufacturer's "minimum advertised price." As a result, we cannot show you the price in catalog or the product page. <br><br> You have no obligation to purchase the product once you know the price. You can simply remove the item from your cart.'
: 'Our price is lower than the manufacturer's "minimum advertised price." As a result, we cannot show you the price in catalog or the product page. <br><br> You have no obligation to purchase the product once you know the price. You can simply remove the item from your cart.';
if (event.target) {
this.anchor = event.target;
this.$nextTick(() => this.calcPosition());
}
}
}
}
</script>
</div>
<script>
'use strict';
(function () {
const modals = [];
const excludedFromFocusTrapping = new Set();
function trapFocusInNextModalWithOverlay() {
for (let idx = modals.length -1; idx >= 0; idx--) {
const nextOnStack = modals[idx];
const nextDialogElement = nextOnStack.instance.$refs[nextOnStack.name];
if (! isOverlayDisabled(nextDialogElement)) {
hyva.trapFocus(nextDialogElement);
break;
}
}
}
function focusables(dialogElement) {
const selector = 'button, [href], input, textarea, select, details, [tabindex]:not([tabindex="-1"])';
return Array.from(dialogElement.querySelectorAll(selector))
.filter(el => !el.hasAttribute('disabled'));
}
function firstVisible(elements) {
const a = Array.from(elements);
for (let i = 0; i < a.length; i++) {
if (a[i].offsetWidth || a[i].offsetHeight || a[i].getClientRects().length) return a[i];
}
return null;
}
function isInViewport(element) {
const rect = element && element.getBoundingClientRect();
return rect &&
rect.top >= 0 &&
rect.left >= 0 &&
rect.right <= window.innerWidth &&
rect.bottom <= window.innerHeight;
}
function setFocusAfterTransition(dialogElement, duration) {
const nested = Array.from(dialogElement.querySelectorAll('[role="dialog"]'));
const candidates = Array.from(dialogElement.querySelectorAll('[x-focus-first]'));
next: for (let candidate of candidates) {
for (let child of nested) {
if (child.contains(candidate)) continue next;
}
setTimeout(() => candidate.focus(), 50);
break;
}
window.setTimeout(() => {
const focusElement = firstVisible(dialogElement.querySelectorAll('[x-focus-first]')) ||
focusables(dialogElement)[0] ||
null;
focusElement && isInViewport(focusElement) && focusElement.focus();
}, Math.max(1, duration));
}
function determineTrigger($refs, dialog, trigger) {
if (typeof trigger === 'undefined' && typeof dialog === 'object' && dialog.target instanceof HTMLElement) {
return dialog.target;
}
if (typeof dialog === 'string' && typeof trigger === 'object' && trigger.target instanceof HTMLElement) {
return trigger.target;
}
if (typeof trigger === 'string') {
try {
return $refs[trigger] || document.querySelector(trigger)
} catch (e) {}
}
if (trigger instanceof Element) {
return trigger;
}
return null;
}
function isOverlayDisabled(dialog) {
return dialog && dialog.hasAttribute('x-no-overlay')
}
function areRemainingModalsWithoutOverlay(modals)
{
const overflowDisabled = modals.map(modal => modal.instance.$refs[modal.name]).filter(isOverlayDisabled);
return overflowDisabled.length === modals.length;
}
window.hyva.modal = function(options) {
const config = Object.assign({
dialog: 'dialog', duration: 300, transitionEnter: 'transition ease-out duration-300',
transitionEnterStart: 'opacity-0',
transitionEnterEnd: 'opacity-100',
transitionLeave: 'transition ease-in duration-300',
transitionLeaveStart: 'opacity-100',
transitionLeaveEnd: 'opacity-0',
}, options);
let lastHide = 0;
return {
opened: {},
show(dialog, trigger) {
const focusTargetAfterHide = determineTrigger(this.$refs, dialog, trigger);
const name = typeof dialog === 'string' ? dialog : config.dialog;
const dialogElement = this.$refs[name];
if (! dialogElement) {
return;
}
const useOverlay = ! dialogElement.hasAttribute('x-no-overlay');
dialogElement.scrollTop = 0;
if (this.opened[name]) {
return;
}
if (focusTargetAfterHide) {
focusTargetAfterHide.setAttribute('aria-expanded', 'true');
}
this.opened[name] = true;
useOverlay && this.$nextTick(() => hyva.trapFocus(dialogElement));
setFocusAfterTransition(dialogElement, config.duration);
const frame = {name, instance: this, focusTarget: focusTargetAfterHide, time: Date.now()};
modals.push(frame);
if (useOverlay) {
document.body.classList.add('overflow-hidden');
}
return new Promise(resolve => frame.resolve = resolve);
},
cancel() {
this.hide(false);
},
ok() {
this.hide(true);
},
hide(value) {
if (Date.now() - lastHide < config.duration) {
return;
}
lastHide = Date.now();
const modal = modals.pop() || {};
const name = modal.name;
this.opened[name] = false;
hyva.releaseFocus(modal.instance.$refs[modal.name])
trapFocusInNextModalWithOverlay();
const nextFocusAfterHide = modal.focusTarget;
nextFocusAfterHide && setTimeout(() => {
nextFocusAfterHide.setAttribute('aria-expanded', 'false');
nextFocusAfterHide.focus()
}, config.duration);
if (modals.length === 0 || areRemainingModalsWithoutOverlay(modals)) {
document.body.classList.remove('overflow-hidden');
}
modal.resolve(value);
},
overlay(dialog) {
const name = typeof dialog === 'string' ? dialog : config.dialog;
return {
['x-show']() {
return this.opened[name]
},
['x-transition:enter']: config.transitionEnter,
['x-transition:enter-start']: config.transitionEnterStart,
['x-transition:enter-end']: config.transitionEnterEnd,
['x-transition:leave']: config.transitionLeave,
['x-transition:leave-start']: config.transitionLeaveStart,
['x-transition:leave-end']: config.transitionLeaveEnd,
['@hyva-modal-show.window'](event) {
event.detail && event.detail.dialog === name && this.show(name, event.detail.focusAfterHide)
}
};
}
};
}
window.hyva.modal.peek = () => modals.length > 0 && modals[modals.length -1]
window.hyva.modal.pop = function () {
if (modals.length > 0) {
const modal = modals[modals.length -1];
modal.instance.hide();
}
}
window.hyva.modal.excludeSelectorsFromFocusTrap = function (selectors) {
typeof selectors === 'string' || selectors instanceof String
? excludedFromFocusTrapping.add(selectors)
: selectors.map(selector => excludedFromFocusTrapping.add(selector));
}
window.hyva.modal.eventListeners = {
keydown: event => {
if (event.key === 'Escape') {
window.hyva.modal.pop();
}
},
click: event => {
if (modals.length > 0) {
const modal = modals[modals.length -1];
const dialog = modal.instance.$refs[modal.name];
if (modal.time + 50 < Date.now() && // if last click processing is more than 50ms ago
! isOverlayDisabled(dialog) && // if dialog has overlay
! dialog.contains(event.target)) { // if click is outside of dialog
modal.instance.hide();
}
}
}
};
document.addEventListener('keydown', window.hyva.modal.eventListeners.keydown);
document.addEventListener('click', window.hyva.modal.eventListeners.click);
})();
</script>
<script type="text/json" id="default-section-data">
{"messages":[],"customer":[],"compare-products":[],"last-ordered-items":[],"cart":[],"directory-data":{"AD":{"name":"Andorra"},"AE":{"name":"United Arab Emirates"},"AF":{"name":"Afghanistan"},"AG":{"name":"Antigua & Barbuda"},"AI":{"name":"Anguilla"},"AL":{"name":"Albania","regions":{"512":{"code":"AL-01","name":"Berat"},"513":{"code":"AL-09","name":"Dib\u00ebr"},"514":{"code":"AL-02","name":"Durr\u00ebs"},"515":{"code":"AL-03","name":"Elbasan"},"516":{"code":"AL-04","name":"Fier"},"517":{"code":"AL-05","name":"Gjirokast\u00ebr"},"518":{"code":"AL-06","name":"Kor\u00e7\u00eb"},"519":{"code":"AL-07","name":"Kuk\u00ebs"},"520":{"code":"AL-08","name":"Lezh\u00eb"},"521":{"code":"AL-10","name":"Shkod\u00ebr"},"522":{"code":"AL-11","name":"Tiran\u00eb"},"523":{"code":"AL-12","name":"Vlor\u00eb"}}},"AM":{"name":"Armenia"},"AN":{"name":null},"AO":{"name":"Angola"},"AQ":{"name":"Antarctica"},"AR":{"name":"Argentina","regions":{"525":{"code":"AR-B","name":"Buenos Aires"},"526":{"code":"AR-K","name":"Catamarca"},"527":{"code":"AR-H","name":"Chaco"},"528":{"code":"AR-U","name":"Chubut"},"524":{"code":"AR-C","name":"Ciudad Aut\u00f3noma de Buenos Aires"},"529":{"code":"AR-X","name":"C\u00f3rdoba"},"530":{"code":"AR-W","name":"Corrientes"},"531":{"code":"AR-E","name":"Entre R\u00edos"},"532":{"code":"AR-P","name":"Formosa"},"533":{"code":"AR-Y","name":"Jujuy"},"534":{"code":"AR-L","name":"La Pampa"},"535":{"code":"AR-F","name":"La Rioja"},"536":{"code":"AR-M","name":"Mendoza"},"537":{"code":"AR-N","name":"Misiones"},"538":{"code":"AR-Q","name":"Neuqu\u00e9n"},"539":{"code":"AR-R","name":"R\u00edo Negro"},"540":{"code":"AR-A","name":"Salta"},"541":{"code":"AR-J","name":"San Juan"},"542":{"code":"AR-D","name":"San Luis"},"543":{"code":"AR-Z","name":"Santa Cruz"},"544":{"code":"AR-S","name":"Santa Fe"},"545":{"code":"AR-G","name":"Santiago del Estero"},"546":{"code":"AR-V","name":"Tierra del Fu