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.

Sign up for GitHub

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

[Quick Order List] Fix an issue for one-variant product #3332

Merged
merged 2 commits into from
Mar 12, 2024
+41 −31
Merged

[Quick Order List] Fix an issue for one-variant product #3332

Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
2721816
Fix QOL for one variant product
eugenekasimov Mar 8, 2024
5e0d56a
Move total bar position logic inside an if condition
eugenekasimov Mar 11, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
64 changes: 36 additions & 28 deletions assets/quick-order-list.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,11 +79,11 @@ class QuickOrderList extends HTMLElement {
type: `${this.stickyHeaderElement.getAttribute('data-sticky-type')}`
};
}

this.totalBarPosition = window.innerHeight - this.querySelector('.quick-order-list__total').offsetHeight;
this.totalBar = this.querySelector('.quick-order-list__total');
this.totalBarPosition = this.totalBar ? window.innerHeight - this.totalBar.offsetHeight: null;
Copy link
Contributor

@sofiamatulis sofiamatulis Mar 11, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Note: Instead of setting this.totalBarPosition to null, what about having it inside of an if statement so you dont set it in the first place if not needed?

if (this.totalBar) {
 this.totalBarPosition = window.innerHeight - this.totalBar.offsetHeight
}

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That's a good idea. Thanks.


window.addEventListener('resize', () => {
this.totalBarPosition = window.innerHeight - this.querySelector('.quick-order-list__total').offsetHeight;
this.totalBarPosition = this.totalBar ? window.innerHeight - this.totalBar.offsetHeight: null;
this.stickyHeader.height = this.stickyHeaderElement ? this.stickyHeaderElement.offsetHeight: null;
});

Expand Down Expand Up @@ -209,34 +209,42 @@ class QuickOrderList extends HTMLElement {
}
this.variantListInput = event.target;
this.variantListInput.select()
this.variantListInput.addEventListener('keydown', (e) => {
if (e.key === 'Enter') {
e.preventDefault();
e.target.blur();
const currentIndex = this.allInputsArray.indexOf(e.target);

if (!e.shiftKey) {
const nextIndex = currentIndex + 1;
const nextVariant = this.allInputsArray[nextIndex] || this.allInputsArray[0];
nextVariant.select();
} else {
const previousIndex = currentIndex - 1;
const previousVariant = this.allInputsArray[previousIndex] || this.allInputsArray[this.allInputsArray.length - 1];
previousVariant.select();
if (this.allInputsArray.length !== 1) {
this.variantListInput.addEventListener('keydown', (e) => {
if (e.key === 'Enter') {
e.preventDefault();
e.target.blur();
const currentIndex = this.allInputsArray.indexOf(e.target);
if (!e.shiftKey) {
const nextIndex = currentIndex + 1;
const nextVariant = this.allInputsArray[nextIndex] || this.allInputsArray[0];
nextVariant.select();
} else {
const previousIndex = currentIndex - 1;
const previousVariant = this.allInputsArray[previousIndex] || this.allInputsArray[this.allInputsArray.length - 1];
previousVariant.select();
}
}
}
});
});

const inputTopBorder = this.variantListInput.getBoundingClientRect().top;
const inputBottomBorder = this.variantListInput.getBoundingClientRect().bottom;
const stickyHeaderBottomBorder = this.stickyHeaderElement && this.stickyHeaderElement.getBoundingClientRect().bottom;
const totalBarCrossesInput = inputBottomBorder > this.totalBarPosition;
const inputOutsideOfViewPort = inputBottomBorder < this.inputFieldHeight;
const stickyHeaderCrossesInput = this.stickyHeaderElement && this.stickyHeader.type !== 'on-scroll-up' && this.stickyHeader.height > inputTopBorder;
const stickyHeaderScrollupCrossesInput = this.stickyHeaderElement && this.stickyHeader.type === 'on-scroll-up' && this.stickyHeader.height > inputTopBorder && stickyHeaderBottomBorder > 0;
const inputTopBorder = this.variantListInput.getBoundingClientRect().top;
const inputBottomBorder = this.variantListInput.getBoundingClientRect().bottom;
const stickyHeaderBottomBorder = this.stickyHeaderElement && this.stickyHeaderElement.getBoundingClientRect().bottom;
const totalBarCrossesInput = inputBottomBorder > this.totalBarPosition;
const inputOutsideOfViewPort = inputBottomBorder < this.inputFieldHeight;
const stickyHeaderCrossesInput = this.stickyHeaderElement && this.stickyHeader.type !== 'on-scroll-up' && this.stickyHeader.height > inputTopBorder;
const stickyHeaderScrollupCrossesInput = this.stickyHeaderElement && this.stickyHeader.type === 'on-scroll-up' && this.stickyHeader.height > inputTopBorder && stickyHeaderBottomBorder > 0;

if (totalBarCrossesInput || inputOutsideOfViewPort || stickyHeaderCrossesInput || stickyHeaderScrollupCrossesInput) {
this.variantListInput.scrollIntoView({ block: 'center', behavior: 'smooth' });
if (totalBarCrossesInput || inputOutsideOfViewPort || stickyHeaderCrossesInput || stickyHeaderScrollupCrossesInput) {
this.variantListInput.scrollIntoView({ block: 'center', behavior: 'smooth' });
}
} else {
this.variantListInput.addEventListener('keydown', (e) => {
if (e.key === 'Enter') {
e.preventDefault();
e.target.blur();
}
});
}
}

Expand Down
Loading