I am building quite a complex website, and I am trying to have the cart open at all times, so I can have it in a specific place.
Ive tried using a combination of Javascript & CSS to overide webflows existing code, and keep the cart open at all times, however it does not seem to be working at all.
Does anyone have any idea how I can make this work?
Here is my read link, youll see the cart is currently inside the menu, and where it currently is I would like it to be open all the time inside that div.
That is a cool website you have going. So the styles you are using in the page settings don’t target any of the classes you have on your menu. You are targeting the Webflow ecommerce classes but you haven’t use them on your page. So under elements you have to go to Ecommerce and use the cart provided there to being able to target those classes with the custom css.
I did an experiment to a forced open cart- it’s quite a hack to do this.
Besides positioning the cart, you need to suppress the modal-close behavior which is triggered by a click-event handler installed on <body>.
Then of course the mobile experience can’t use a sidebar so it all has to be tablet+ specific.
I had about 90% success with a fixed sidebar, using CSS overrides and a mutation observer to wipe the interaction styling.
Youre actually the man for pointing that out, I updated my css to match and boom, its working :D
I was going round in circles trying loads of different things, fake click on the cart button, tricking webflow into using a different cart button, and the simple fix was staring me in the face the whole time.
Its working 90% of what im looking for, now I can refine it.
I set the cart to “dropdown”, styled an empty div, then gave my cart that div name, for example a posistion of absolute to fit inside the div I want the cart to be displayed.
I then applied the css to the corresponding div names, and then the css worked at keeping the cart position block for example instead of hidden.
