{
await fetch(e.detail.url)
.then(response => response.text())
.then(html => {
const parser = new DOMParser();
const doc = parser.parseFromString(html, 'text/html');
const content = doc.querySelector('#cart-notification');
$root.innerHTML = content.innerHTML;
show = true;
})
}
"
>
{
if (e.detail.data.upsell) {
const id = e.detail.data.items[0].id;
loading = id;
const isMobile = window.innerWidth < 768;
await fetch(e.detail.data.url)
.then(response => response.text())
.then(async html => {
const parser = new DOMParser();
const doc = parser.parseFromString(html, 'text/html');
const newContent = doc.querySelector('#cart-notification [data-product]');
const upsell = document.querySelector(`[data-upsell='${id}']`);
const upsellParent = upsell.parentNode.parentNode;
const upsellClone = upsell.cloneNode(true);
const product = $refs.product.querySelector('[data-product]');
const productClone = product.cloneNode(true);
upsellParent.style.transition = 'height 0.3s ease-in-out';
upsellParent.style.height = upsellParent.offsetHeight + 'px';
upsellClone.style = `
position: absolute;
z-index: 200;
top: ${upsellParent.offsetTop}px;
left: ${upsellParent.offsetLeft}px;
width: ${upsellParent.offsetWidth}px;
transition: all 0.3s ease-in-out;
`;
productClone.style = `
position: absolute;
z-index: 200;
top: ${product.offsetTop}px;
left: ${product.offsetLeft}px;
width: ${product.offsetWidth}px;
transition: all 0.3s ease-in-out;
`;
$refs.upsells.appendChild(upsellClone);
$refs.product.appendChild(productClone);
upsellParent.style.opacity = 0;
product.style.opacity = 0;
product.style.transform = isMobile ? `translateY(50%)` : `translateX(50%)`;
product.innerHTML = newContent.innerHTML;
upsell.parentNode.addEventListener('transitionend', async (e) => {
if (e.propertyName === 'height') {
upsellParent.remove();
}
}, { once: true });
upsellClone.addEventListener('transitionend', async () => {
upsellParent.style.height = '0px';
upsellClone.remove();
}, { once: true });
productClone.addEventListener('transitionend', async () => {
productClone.remove();
}, { once: true });
product.addEventListener('transitionend', async () => {
product.style.transition = 'none';
}, { once: true });
await new Promise(resolve => setTimeout(resolve, 10));
loading = false;
product.style.transition = 'all 0.3s ease-in-out';
if (isMobile) $refs.container.scrollTo(0, 0);
upsellClone.style.transform = isMobile ? `translateY(-50%)` : `translateX(-50%)`;
upsellClone.style.opacity = 0;
productClone.style.transform = isMobile ? `translateY(-50%)` : `translateX(-50%)`;
productClone.style.opacity = 0;
product.style.transform = isMobile ? `translateY(0%)` : `translateX(0%)`;
product.style.opacity = 1;
})
}
}
"
@click.stop
class="relative mx-auto mt-auto flex h-auto max-h-full flex-1 flex-col md:max-w-[530px] "
>
{
show = true;
error = e.detail?.error?.message;
clearTimeout(timer);
timer = setTimeout(() => {
show = false;
}, 3000);
}
"
@click.self="show = false"
>