Thread

This is an archived forum and the content is probably no longer relevant, but is provided here for posterity.

The active forums are here.

Need your ideas on template design strategy

February 02, 2012 9:38am

Subscribe [5]

#1 / Feb 02, 2012 9:38am

orionlogic
18 posts

I made several sites with EE. I always try stick ‘No Add ons’ approach. However i always encounter these two issues. These are design considerations rather then technical issues. I really want to hear your opinion on this.

Include Header strategy is not so good for pages that need specific JS or HTML code. For example a page need different JS code on header, how do you pass that code? If i use conditionals the code became bloated. Is snippets suitable for this?

Another design consideration is Navigation. I don’t want to use categories as navigation. When a navigation system have sub-navigation items, it became quickly complex. What is your navigation design strategy?

Thanks.
#2 / Feb 06, 2012 5:04am
Steven Grant
894 posts
I usually only call 3 js files on a page.
```
<s*ript src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">[removed]
<s*ript src="/assets/js/plugins.js">[removed]
<s*ript src="/assets/js/functions.js">[removed]
```
so all of my jquery calls are added to functions.js and jquery plugins get added to plugins.js

I guess a lot would depend on whether you need to parse EE code into the JS as well. I haven’t had that need for a while.

I tend to use Structure now for the majority of sites that I do so it generates my nav for me. However, pre-Structure, I would create a channel for each section and each ‘page’ within that section would be an entry and from there just use channel entries tag to spit out the pages as required, no categories involved.

There’s a million ways to skin a cat.
#3 / Feb 06, 2012 6:39am

AndreiCurelaru
54 posts

Hi,

If you need specific javascript inclusion tag, depending on the page you are loading, using Snippets can be a good move.

That way, you can create a Snippet called something like {custom_js}, and inside that Snippet you can build a conditional structure, depending on the URL segment.

So now your snippet is aware of what page the template is loading, and can serve the right code fragment.

The beauty of all that, is that in your template, you will just have a {custom_js} within your <head>.

Give it a try, and tell us if it works for you.

Andrei
#4 / Feb 06, 2012 6:42am

Steven Grant
894 posts

That would work too - I guess my gripe there would be that snippet is in the database rather than as a flat file (unless you’re using Mountee or LibrarEE of course).

That’s the only reason I don’t like snippets. Of course the other route is to add some global vars to index.php and have it call your JS but that’s quite longwinded too.
#5 / Feb 06, 2012 6:48am

Boyink!
5011 posts

I use conditionals in the header template. Not sure why a few conditionals would be considered “bloated”? I have no issue with Snippets, but usually have a header template that I’m already passing in page titles and navigation states to so just do it there.

For navigation I’ve written a few tutorials:
http://www.train-ee.com/courseware/free-tutorials/category/static-content/

Mostly for EE1 but change weblog to channel and the code should all work.
#6 / Feb 06, 2012 6:52am

AndreiCurelaru
54 posts

Hi Steven,

That’s the point I don’t like nor understand about snippets and saving them as files.

As long as they are “parts” of the template and ee allow us to save the template as file, the work is half done if ee doesn’t permit to save as a file all the code composing that template.

That could be a good step forward for the next release, but I don’t know if they’re working on it.

Wait and see.
#7 / Feb 06, 2012 6:57am

orionlogic
18 posts

Thanks both of you. I’ll try snippet approach.

@Boyink! I use Google Website Optimizer codes and when you made several tests parallel i need to exclude/include other parts of the site from those in tests. Thats where code become bloated with conditionals. Thanks for the navigation tutorials.
#8 / Feb 06, 2012 7:05am
Boyink!
5011 posts
Another thought is to do something like:
```
{embed="embeds/{segment_2}_headercode"}
```
This way the URL would pre-determine what template was included so a long list of conditionals wouldn’t be needed.

May or may not make sense depending on your need.
#9 / Feb 06, 2012 7:27am

John St-Amand
865 posts

I know you’re aiming for a no-add-on approach, there are two add-ons I personally couldn’t live without right now, for accomplishing the very thing you’re talking about - Croxton’s switchee and ifelse. I use it in my ifelse for my main nav so that I can run an early parsed conditional to determine which menu section I’m in, therein adding a class to menu item to be highlighted based on which segment is active. I then also use snippet in a similar fashion to conditionally load any JS file I really only need in one section, for example, again based on the active segment or some other slightly smarter condition. The switchee technique definitely seems to run quite quickly compared to using native conditionals.

Low did an article a while back which outlined a technique for using preload replace variables to run a conditional in a snippet, parsing it exceptionally early. It may also be of use to you for this.
#10 / Feb 07, 2012 5:00am

orionlogic
18 posts

@Andrei Thanks a lot, snippets worked as i expected. Much cleaner code. However i think Snippets inside Snippets doesn’t work. I might gone a bit far. 😊

For the navigation i would try some plugins mentioned here. At the end of the day, navigation complexity depends on how much customization will developer give to their clients.

Thanks all of you.
#11 / Feb 07, 2012 10:22am

AndreiCurelaru
54 posts

Great to see that helped you.
Come back with other questions if needed 😉