preview (image)
<div x-data="initProductOverview()"
@resize="isMobile = window.outerWidth < 768"
@scroll.window="scroll()"
class="product__overview md:absolute right-0 top-0 flex flex-col px-5 md:p-10 py-7.5 bg-ui-light md:h-[calc(100vh_-_90.5px_-_76px)]"
:class="{
'md:fixed' : isSticky,
'md:absolute' : !isSticky
}"
>
<?php include (renderTemplate('catalog/product/overview/overview-prices', 'default')) ?>
<div class="mt-5">
<?php include (renderTemplate('catalog/product/overview/overview-specifications')) ?>
</div>
<div class="flex-1">
<?php include (renderTemplate('catalog/product/overview/overview-shipping-reassurance', 'shipping-ok')) ?>
</div>
<div class="mt-5">
<?php include (renderTemplate('catalog/product/overview/overview-sell')) ?>
</div>
</div>
<script>
function initProductOverview() {
return {
isMobile: window.outerWidth < 768,
isSticky: false,
headerHeight: 0,
headerProductHeight: 0,
totalHeight: 0,
init() {
if(document.querySelector('[data-header]')) {
this.headerHeight = document.querySelector('[data-header]').offsetHeight;
}
if(document.querySelector('[data-product-header]')) {
this.headerProductHeight = document.querySelector('[data-product-header]').offsetHeight;
}
this.totalHeight = this.headerHeight + this.headerProductHeight;
},
scroll() {
const current = this;
document.addEventListener('start-sticky-header', function () {
current.isSticky = true;
current.$root.style.top = current.totalHeight + "px";
});
document.addEventListener('end-sticky-header', function () {
current.isSticky = false;
current.$root.style.removeProperty('top');
});
}
}
}
</script>