Floating order summary box

[glenn]

Hello,

 

We're using the standard cart order form and a custom template based on the six template. The custom template comes with a fixed header. Therefore, the "floating" order summary box (the one that scrolls down when you scroll down on the page) is not completely shown. I believe it's party hidden behind the fixed header.

Is there a way to take into account the fixed header when defining the position of that order summary box?

 

Thanks!

 

[brian!]

17 hours ago, glenn said:

Is there a way to take into account the fixed header when defining the position of that order summary box?

i'm tempted to suggest that if this is a commercial custom, then it's developers should have dealt with this during the design! 🙄

it's a JS issue I think and specifically some of the settings in scripts.min.js in standard cart - topPadding and marginTop - so if I set their values at 150, then I see this...

so it might require some experimentation, depending on the size of the fixed header, to find suitable value(s).

possibly, you could do this as a hook, but I modified scripts.min.js directly for the above demo... that would cause a potential issue for updating (so might a hook) -  who knows whether v8 will even use standard_cart?

[glenn]

Thanks Brian, I'll have a look at it. The WHMCS integration was completed by WHMCS, but they couldn't find a perfect solution to fix that issue.

[brian!]

2 hours ago, glenn said:

The WHMCS integration was completed by WHMCS, but they couldn't find a perfect solution to fix that issue.

oh boy! 🙄

hopefully the above gets you closer to the solution, but if not, i'd really need to see what the header looks like as i'm working blind otherwise.

[yggdrasil]

Take a look at this:

https://www.w3schools.com/cssref/pr_pos_z-index.asp

That will fix it. You need to change the priority of the index on the CSS files. There are other ways to avoid elements from hiding or floating over others assuming you want that. It's not hard to solve at all. Any front end developer will fix this in less than one hour unless there is something really bugged with how the code works.

Edited July 11, 2020 by yggdrasil

[glenn]

This has been solved thanks to @brian!

[yggdrasil]

3 hours ago, glenn said:

This has been solved thanks to @brian!

You might share the fix for the rest of the community 😁

I'm not sure I would still be using WHMCS if it was not for other people helping out each other. In most cases it's the only help you will get.

Edited July 11, 2020 by yggdrasil

[glenn]

The trick was to change the value of the topPadding in the standard_cart/js/scripts.js file and minify it (or edit directly in the scripts.min.js file).

[brian!]

1 hour ago, yggdrasil said:

You might share the fix for the rest of the community

as I said in the earlier post, it was just setting a different value forTopPadding.

[yggdrasil]

39 minutes ago, brian! said:

as I said in the earlier post, it was just setting a different value forTopPadding.

I see, I was not aware that was the solution. Thanks for sharing!

[yggdrasil]

42 minutes ago, glenn said:

The trick was to change the value of the topPadding in the standard_cart/js/scripts.js file and minify it (or edit directly in the scripts.min.js file).

Happy to see it works now.