PublicisSapient / accessible-ecommerce-demo

A truly accessible eCommerce experience brought to you by PublicisSapient
https://publicissapient.github.io/accessible-ecommerce-demo/
MIT License
29 stars 13 forks source link

Checkout minicart (sticky?) #137

Open wjcPS opened 5 years ago

Puneetsehgal commented 4 years ago

Tech Solution checkout.js

const stickyMoneybox = () => {
    let window_top = window.scrollY;
    let footer_top =  document.querySelector(".footer").offsetTop;
    let orderSummary = document.querySelector(".order-summary");
    let div_height = orderSummary.querySelector(".order-summary__background").clientHeight;
    orderSummary.style.height = div_height + "px";
    orderSummary.style.top = (window_top + div_height - footer_top) * -1;
};
window.onload = () => {
.......
  window.addEventListener("scroll", stickyMoneybox);
  stickyMoneybox();
  Modal.init('construction-modal');
}

checkout.scss

.sticky-moneybox {
    position: sticky;
    top: 0;
    z-index: 10;
}

order-summary.hbs add class sticky-moneybox

<div class="order-summary sticky-moneybox" data-js="order-summary">