[UPDATED][MOD] Collapse/Expandable Modules

Quote

Post by dvio » Sat Nov 20, 2010 12:38 am

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
Last edited by dvio on Fri Dec 24, 2010 3:19 am, edited 17 times in total.

[Free - MOD] Collapse/Expandable Modules

User avatar
dvio
New member
Posts
25
Joined
Thu Aug 05, 2010 8:57 pm
Location - Jakarta
Top

Re: [MOD] Module with hide and expand ability

Quote

Post by justinv » Sat Nov 20, 2010 7:10 am

Cool! Good idea :)

Documentation: OpenCart User Guide
Mods: Total Import PRO | CSV Import PRO | Ecom Tracking | Any Feed | Autosuggest | OpenCart CDN
Image

justinv
Active Member
Posts
662
Joined
Tue Oct 12, 2010 1:24 pm
Top

Re: [MOD] Module with hide and expand ability

Quote

Post by dvio » Sat Nov 20, 2010 12:50 pm

Thanks justinv,
Last edited by dvio on Mon Nov 22, 2010 8:49 pm, edited 1 time in total.

[Free - MOD] Collapse/Expandable Modules

User avatar
dvio
New member
Posts
25
Joined
Thu Aug 05, 2010 8:57 pm
Location - Jakarta
Top

Re: [MOD] Module with hide and expand ability

Quote

Post by Qphoria » Sat Nov 20, 2010 1:24 pm

Great mod! Thanks

Image

User avatar
Qphoria
Administrator
Posts
20056
Joined
Tue Jul 22, 2008 3:02 am
Top

Re: [MOD] Module with hide and expand ability

Quote

Post by SapporoGuy » Sat Nov 20, 2010 6:07 pm

nice!

930sc ... because it is fun!

User avatar
SapporoGuy
Active Member
Posts
1131
Joined
Mon Nov 01, 2010 7:29 pm
Top

Re: [MOD] Module with hide and expand ability

Quote

Post by Qphoria » Sat Nov 20, 2010 11:33 pm

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

Image

User avatar
Qphoria
Administrator
Posts
20056
Joined
Tue Jul 22, 2008 3:02 am
Top

Re: [MOD] Module with hide and expand ability

Quote

Post by dvio » Sat Nov 20, 2010 11:50 pm

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)
Last edited by dvio on Sun Nov 21, 2010 2:17 am, edited 1 time in total.

[Free - MOD] Collapse/Expandable Modules

User avatar
dvio
New member
Posts
25
Joined
Thu Aug 05, 2010 8:57 pm
Location - Jakarta
Top

Re: [MOD] Module with hide and expand ability

Quote

Post by dvio » Sun Nov 21, 2010 1:46 am

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 !!!
Last edited by dvio on Sun Nov 21, 2010 11:21 am, edited 1 time in total.

[Free - MOD] Collapse/Expandable Modules

User avatar
dvio
New member
Posts
25
Joined
Thu Aug 05, 2010 8:57 pm
Location - Jakarta
Top

Re: [MOD] Module with hide and expand ability

Quote

Post by Qphoria » Sun Nov 21, 2010 4:32 am

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>

Image

User avatar
Qphoria
Administrator
Posts
20056
Joined
Tue Jul 22, 2008 3:02 am
Top

Re: [MOD] Module with hide and expand ability

Quote

Post by dvio » Sun Nov 21, 2010 11:19 am

Thx Q ... Now I see what you meant .... It was midnight over here :D

Updated post #1
Files attached

[Free - MOD] Collapse/Expandable Modules

User avatar
dvio
New member
Posts
25
Joined
Thu Aug 05, 2010 8:57 pm
Location - Jakarta
Top

Re: [MOD] Module with hide and expand ability

Quote

Post by HTMLCSSNoob » Sun Nov 21, 2010 3:35 pm

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...
HTMLCSSNoob
Active Member
Posts
157
Joined
Fri Aug 20, 2010 7:53 am
Top

Re: [MOD] Module with hide and expand ability

Quote

Post by dvio » Sun Nov 21, 2010 4:01 pm

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

[Free - MOD] Collapse/Expandable Modules

User avatar
dvio
New member
Posts
25
Joined
Thu Aug 05, 2010 8:57 pm
Location - Jakarta
Top

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

Quote

Post by Moggin » Mon Nov 22, 2010 1:26 am

Great mod dvio, thank you. I really like it!
Moggin
Active Member
Posts
1084
Joined
Wed May 05, 2010 4:56 am
Top

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

Quote

Post by dvio » Mon Nov 22, 2010 12:44 pm

Moggin wrote:Great mod dvio, thank you. I really like it!
Glad you like it :D

[Free - MOD] Collapse/Expandable Modules

User avatar
dvio
New member
Posts
25
Joined
Thu Aug 05, 2010 8:57 pm
Location - Jakarta
Top

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

Quote

Post by wandotshop » Sat Nov 27, 2010 3:08 am

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 :(
wandotshop
New member
Posts
38
Joined
Wed Oct 06, 2010 12:15 am
Top

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

Quote

Post by scanreg » Sat Nov 27, 2010 3:46 am

Would there be a way to exclude certain modules from being collapsible?

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

Thanks
scanreg
Active Member
Posts
737
Joined
Thu May 06, 2010 12:15 am
Top

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

Quote

Post by dvio » Sat Nov 27, 2010 4:01 am

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 ;)

[Free - MOD] Collapse/Expandable Modules

User avatar
dvio
New member
Posts
25
Joined
Thu Aug 05, 2010 8:57 pm
Location - Jakarta
Top

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

Quote

Post by dvio » Sat Nov 27, 2010 4:10 am

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 ;)

[Free - MOD] Collapse/Expandable Modules

User avatar
dvio
New member
Posts
25
Joined
Thu Aug 05, 2010 8:57 pm
Location - Jakarta
Top

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

Quote

Post by wandotshop » Sat Nov 27, 2010 11:50 pm

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
wandotshop
New member
Posts
38
Joined
Wed Oct 06, 2010 12:15 am
Top

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

Quote

Post by wandotshop » Sun Nov 28, 2010 9:51 am

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
wandotshop
New member
Posts
38
Joined
Wed Oct 06, 2010 12:15 am
Top
Post Reply
Return to “Modifications”
Who is online

Users browsing this forum: No registered users and 4 guests