Adding Close Cart button to Orderform

I guess the default tabs_floatingdiv_extclass_orderform is closed using the left and right close icons on the tabs_floatingdiv_header.
We would like to display:none tabs_floatingdiv_header (easy enough) and add a Close Cart button in the window to be more consistent with the flow.

This is done in the view_cart area through html in Text Labels just fine. Can't get that to work for orderform. I believe because we don't know the correct onclick event?

<div id="closecart" align="center">
<input type="button" OnClick="main_display_area('panel_items');" value="Close Cart">
</div>

Is this possible?

You would need to emulate what the close button does.
Also, as the orderform is actually into a frame, you would need to transcode all calls to refer to parent.

This is the code normally attached to the CLOSE icons:

EnableAllPanels(); document.getElementById('tabs_floatingdiv').style.zIndex=100; document.getElementById('floatingdiv').innerHTML=''; document.getElementById('tabs_floatingdiv').style.display='none';keepfloatingvisible=0;

This is the same code by referring to parent instead. Also, we have to move the innerHTML at the end, because the code is executed from WITHIN it:

parent.EnableAllPanels(); parent.document.getElementById('tabs_floatingdiv').style.zIndex=100;parent.document.getElementById('tabs_floatingdiv').style.display='none'; parent.keepfloatingvisible=0;parent.document.getElementById('floatingdiv').innerHTML='';

So you whole code should be like this:

<div id="closecart" align="center">
<input type="button" value="Close Cart" Onclick="parent.EnableAllPanels(); parent.document.getElementById('tabs_floatingdiv').style.zIndex=100;parent.document.getElementById('tabs_floatingdiv').style.display='none'; parent.keepfloatingvisible=0;parent.document.getElementById('floatingdiv').innerHTML='';">
</div>

Just try and let us know!

Testing ....

Into Styles Setup => Direct CSS hides all floatingdiv headers.

#tabs_floatingdiv_header {
display: none !important;
}

How to target just the order form?
I see that you have that into the block of code for the Text Label (if that is the purpose there), but it isn't hiding.



Edited 2 time(s). Last edit at 02/17/2016 06:56AM by cos.

edited



Edited 1 time(s). Last edit at 02/17/2016 06:30AM by cos.

So, you want to hide the header, but ONLY for the orderform via DirectCSS?
Then this should do it:

.tabs_floatingdiv_extclass_orderform #tabs_floatingdiv_header {
display: none !important;
}

This line basically says to apply the style only to an element with ID tabs_floatingdiv_header which is contained into a class named tabs_floatingdiv_extclass_orderform.
Essentially, this kind of trick is the reason why CSS means Cascading Style Sheets, where "Cascading" is exactly the ability of targeting elements into a specific parent.

So that's it. I cascaded backwards. I guess we could call that ascended instead of cascaded. Thanks.