Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Checkout minicart (sticky?) #137

Open
wjcPS opened this issue Apr 10, 2019 · 1 comment · May be fixed by #271
Open

Checkout minicart (sticky?) #137

wjcPS opened this issue Apr 10, 2019 · 1 comment · May be fixed by #271
Assignees
Labels
Comp: MiniCart Mini Cart Component Epic: Checkout Checkout Page

Comments

@wjcPS
Copy link
Collaborator

wjcPS commented Apr 10, 2019

No description provided.

@wjcPS wjcPS added Epic: Checkout Checkout Page Comp: MiniCart Mini Cart Component labels Apr 10, 2019
@aevanson aevanson added this to the Global Accessibility Day milestone Apr 18, 2019
@Puneetsehgal
Copy link
Collaborator

Puneetsehgal commented Mar 9, 2020

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">

@Puneetsehgal Puneetsehgal self-assigned this Mar 10, 2020
@Puneetsehgal Puneetsehgal linked a pull request Mar 10, 2020 that will close this issue
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Comp: MiniCart Mini Cart Component Epic: Checkout Checkout Page
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants