Mini-basket Display Order

[lesliekirk]

I need to change the order that the products display in the mini-basket to show the newest added product as the top to the oldest added at the bottom.

Thanks!
Leslie

[RTHOMASDESIGN]

You can achieve this pretty easily with CSS. This should help get you started:

.x-mini-basket__list {
flex-direction: column-reverse;
display: flex;
}

-Ryan

[lesliekirk]

You can achieve this pretty easily with CSS. This should help get you started:

.x-mini-basket__list {
flex-direction: column-reverse;
display: flex;
}

-Ryan

Thanks, Ryan. It would seem I only asked for half of what I need. The CSS reversed the list but when something new the 1st item entered still stays in the mini-basket window. I'm trying to get it to only show the most recent item added to the basket.

[RTHOMASDESIGN]

Ah okay. If you only want the newest item added to display, you could use a pseudo class. Something like this:

.x-mini-basket__line {
display: none;
}

.x-mini-basket__line:last-of-type {
display: flex;
}
-Ryan

[lesliekirk]

Ah okay. If you only want the newest item added to display, you could use a pseudo class. Something like this:

.x-mini-basket__line {
display: none;
}

.x-mini-basket__line:last-of-type {
display: flex;
}
-Ryan

Will the other items that have been added still be viewable if the customer scrolls through the list?

[lesliekirk]

Will the other items that have been added still be viewable if the customer scrolls through the list?

Hey Ryan, I'll email you - this may be a custom tweak needing your fine touch.