OpenCart Community

OpenCart Community Forum - Discuss shopping cart and e-commerce solutions.
https://forum.opencart.com/

[UPDATED][MOD] Collapse/Expandable Modules

https://forum.opencart.com/viewtopic.php?t=22991

Page 1 of 2

[UPDATED][MOD] Collapse/Expandable Modules

Posted: Sat Nov 20, 2010 12:38 am
by dvio
Some time when you have a lot of modules installed on your OC installation, the page may look over crowded, so I wrote this little mod to give the modules the ability to hide or expand when it's header clicked

UPDATE
Please get the "toggle_module_0.4.zip" for updated mod from attachment.
Bug fixed:
- Bug on cart module

Updated:
Deleted old mod file attachment

Warning: Although it is safe to apply this mod, I recommend to do backup or make a copy of the replaced and updated files.

Updated files:
- catalog/view/theme/default/image/box_top.png

Added files:
- catalog/view/theme/javascript/jquery/toggle_module.js
- catalog/view/theme/default/stylesheet/toggle.css

File to be edited:
- catalog/view/theme/default/template/common/header.tpl


Applying this mod step by step:

1. Extract the archieve attached

2. Upload the extracted folder to your main OC installation

3. Open "catalog/view/theme/default/template/common/header.tpl" and find "</head>" (approximately at line 53)

4. Add this code before "</head>":

Code: Select all

<link rel="stylesheet" type="text/css" href="catalog/view/theme/<?php echo $template; ?>/stylesheet/toggle.css" />
5. Open "catalog/view/theme/default/template/common/footer.tpl" and find "</body>"

6. Add this code before "</body>":

Code: Select all

<script type="text/javascript" src="catalog/view/javascript/jquery/toggle_module.js"></script>
7. Done ... Now you have modules with the ability to hide or expand when it's header clicked

click here for live example -> click the module header

This mod can be downloaded here:
http://www.opencart.com/index.php?route ... ion_id=872


I hope this make a little contribution to this great community.

Cheers

Re: [MOD] Module with hide and expand ability

Posted: Sat Nov 20, 2010 7:10 am
by justinv
Cool! Good idea :)

Re: [MOD] Module with hide and expand ability

Posted: Sat Nov 20, 2010 12:50 pm
by dvio
Thanks justinv,

Re: [MOD] Module with hide and expand ability

Posted: Sat Nov 20, 2010 1:24 pm
by Qphoria
Great mod! Thanks

Re: [MOD] Module with hide and expand ability

Posted: Sat Nov 20, 2010 6:07 pm
by SapporoGuy
nice!

Re: [MOD] Module with hide and expand ability

Posted: Sat Nov 20, 2010 11:33 pm
by Qphoria
I'd recommend just putting this into an external file and then the only line to change would be to add the script in the header.tpl

Re: [MOD] Module with hide and expand ability

Posted: Sat Nov 20, 2010 11:50 pm
by dvio
Thx to all.
Qphoria wrote:I'd recommend just putting this into an external file and then the only line to change would be to add the script in the header.tpl
Thx for the recommendation, I just want to clarify, correct me if I do misunderstand.

Did you mean I should create a separated file for this mod? but how? since the only file to be edited is the header.tpl (the css thing can be merged in the header.tpl along with the toggle function), optionally a replacement image file if you want to add some kind of indicator.

or something like

Code: Select all

<?php include("something.php"); ?>
?

thanks before, I'll try to do what you recommended, but since I am new here, I'll have to learn a little more about how things works here, so give me some time :D (some hints will be very helpull :D)

Re: [MOD] Module with hide and expand ability

Posted: Sun Nov 21, 2010 1:46 am
by dvio
OK ... I have updated the mod ... :D
See the live example

Update:
- Seperated mod files (separated css files, a js file and some image files) to keep the installation clean
- Added indicators

Applying this mod step by step: ... See post #1 !!!

Re: [MOD] Module with hide and expand ability

Posted: Sun Nov 21, 2010 4:32 am
by Qphoria
I meant to put the js code into a js file.

Take:

Code: Select all

<script type="text/javascript">
    $(document).ready(function(){
        $(".box .top").click(function(){
            $(this).parent().toggleClass("hide");
            $(this).next(".box .middle").slideToggle("slow,");
        });
    });
</script>
and put that into a "toggle_module.js" file (you can remove the <script> tags)

Then you can simply do:

1. EDIT: catalog/common/view/theme/YOURTHEME/template/common/header.tpl

2. FIND:

Code: Select all

</head>
3. BEFORE, ADD (2 lines):

Code: Select all

<link rel="stylesheet" type="text/css" href="catalog/view/theme/<?php echo $template; ?>/stylesheet/toggle.css" />
<script type="text/javascript" src="catalog/view/javascript/jquery/toggle_module.js"></script>

Re: [MOD] Module with hide and expand ability

Posted: Sun Nov 21, 2010 11:19 am
by dvio
Thx Q ... Now I see what you meant .... It was midnight over here :D

Updated post #1
Files attached

Re: [MOD] Module with hide and expand ability

Posted: Sun Nov 21, 2010 3:35 pm
by HTMLCSSNoob
Nice mod. Thanks for releasing it for free. :)

Is there anyway to make the side boxes remember if they are expanded or collapsed when you navigate to different sections of your site? As of now If I go to another page, all the side boxes are reset to their default status...

Re: [MOD] Module with hide and expand ability

Posted: Sun Nov 21, 2010 4:01 pm
by dvio
HTMLCSSNoob wrote:Nice mod. Thanks for releasing it for free. :)

Is there anyway to make the side boxes remember if they are expanded or collapsed when you navigate to different sections of your site? As of now If I go to another page, all the side boxes are reset to their default status...

Thanks for your feedback ... I'll work on it soon. Yes there are ways to do that (one way is using cookies... but it'll need some testing)

I'll update the mod as soon as I can :D

Cheers

Update:
- Done adding some code to make the modules remember their last state on navigation or page reload.
- See post #1 for step by step on installing the mod

Re: [UPDATED][MOD] Collapse/Expandable Modules

Posted: Mon Nov 22, 2010 1:26 am
by Moggin
Great mod dvio, thank you. I really like it!

Re: [UPDATED][MOD] Collapse/Expandable Modules

Posted: Mon Nov 22, 2010 12:44 pm
by dvio
Moggin wrote:Great mod dvio, thank you. I really like it!
Glad you like it :D

Re: [UPDATED][MOD] Collapse/Expandable Modules

Posted: Sat Nov 27, 2010 3:08 am
by wandotshop
Someone help me.. i try for this..but cant...suspected that i am using popupcategory.. could someone help me to modify which can fit with popupcategory.. i am really appreciate ur help... due to love this module so much..but i cant use :(

Re: [UPDATED][MOD] Collapse/Expandable Modules

Posted: Sat Nov 27, 2010 3:46 am
by scanreg
Would there be a way to exclude certain modules from being collapsible?

I'd like to keep the shopping cart module always expanded

Thanks

Re: [UPDATED][MOD] Collapse/Expandable Modules

Posted: Sat Nov 27, 2010 4:01 am
by dvio
wandotshop wrote:Someone help me.. i try for this..but cant...suspected that i am using popupcategory.. could someone help me to modify which can fit with popupcategory.. i am really appreciate ur help... due to love this module so much..but i cant use :(
For the popupcategory to be able to work with this mod, you have to edit "catalog/view/theme/default/template/module/popupcategory.tpl"

find:

Code: Select all

<div style="border-left:1px solid #ddd;border-right:1px solid #ddd;"><?php echo $category; ?></div>
replace with:

Code: Select all

<div class="middle" style="border-left:1px solid #ddd;border-right:1px solid #ddd; padding:0;"><?php echo $category; ?></div>
Now it should work ;)

Re: [UPDATED][MOD] Collapse/Expandable Modules

Posted: Sat Nov 27, 2010 4:10 am
by dvio
scanreg wrote:Would there be a way to exclude certain modules from being collapsible?

I'd like to keep the shopping cart module always expanded

Thanks

For the cart module to be always expanded you should edit "catalog/view/theme/default/template/module/cart.tpl"

Find:

Code: Select all

<div class="middle"> 
Replace with:

Code: Select all

<div style="border-left: 1px solid #DDDDDD; border-right: 1px solid #DDDDDD; background: #FFFFFF; padding: 10px;"> 
Do it to all of the modules you want to be always expanded ;)

Re: [UPDATED][MOD] Collapse/Expandable Modules

Posted: Sat Nov 27, 2010 11:50 pm
by wandotshop
dvio wrote:
wandotshop wrote:Someone help me.. i try for this..but cant...suspected that i am using popupcategory.. could someone help me to modify which can fit with popupcategory.. i am really appreciate ur help... due to love this module so much..but i cant use :(
For the popupcategory to be able to work with this mod, you have to edit "catalog/view/theme/default/template/module/popupcategory.tpl"

find:

Code: Select all

<div style="border-left:1px solid #ddd;border-right:1px solid #ddd;"><?php echo $category; ?></div>
replace with:

Code: Select all

<div class="middle" style="border-left:1px solid #ddd;border-right:1px solid #ddd; padding:0;"><?php echo $category; ?></div>
Now it should work ;)
ok that one is ok now :) but... :(
the major problem my box top not Collapse and expends :( would u visit my website www[dot]wandots[dot]com/shop Realy2 need you help now... maybe u can see its there any intefere..coz i already make some modification on footer and others.. plz..:( TQ

Re: [UPDATED][MOD] Collapse/Expandable Modules

Posted: Sun Nov 28, 2010 9:51 am
by wandotshop
Dear dvio...
i love ur module.. but i see some diffrent on the default page with after modi with your module...
could u see under categories or information..there are diffrent between before modify and after modify...could u make it as same as before...if u see that...before is default icon side the sub2 item...but for new is like a dot icon... can u get the default? TQ
All times are UTC+08:00
Page 1 of 2
Powered by phpBB® Forum Software © phpBB Limited
https://www.phpbb.com/