How can I modify my cart to stay open when clicking away?

Technical Q&A
1

Hello,
I’d like to change functionality on my websites shopping cart. When clicking away, the cart closes. I would like to keep it open.

Please see screenshot. When I click in the red space, the cart closes. I’d like to keep it open. So the user would need to press the “X” to close it.

click away.png
click away.png996×807 237 KB

Can someone please help me with the code to make this minor change?
My site is www.checkoutfirst.com and I’m using Debutify
Thanks

1 Like
2

@checkoutfirst

i have check nor working fine

1 Like
3

Hi, I would like to keep the cart open if this area is clicked.

4

@checkoutfirst

do you need if user click any are open cart? if yes that’s not good thing user confusion about this

1 Like
5

When cart is open, do not close if red space clicked (in screenshot).
This shouldn’t be confusing, there are many shops that do it this way.

1 Like
6

@checkoutfirst

ok can you please try this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.
body.js-drawer-open {
    pointer-events: none;
}
.drawer--right.js-drawer-open {
    pointer-events: painted;
}
1 Like
7

@checkoutfirst

can you please add this code

.drawer--left.js-drawer-open {
    pointer-events: painted;
}
1 Like
8

Hello, there is another issue:
When “Search” is clicked, it does not allow for closing or using this dialog. (same issue as when navigation menu was opened.)

1 Like
9

@checkoutfirst

oh sorry for that can you please add this code

#SearchDrawer.js-drawer-open {
    pointer-events: all;
}
1 Like