Search the Community

This thread is a discussion area for a header tag module that will dynamically control a shops layout by page type. The module divides the shops various pages into 6 types: Home Page Product Listing Pages Product Info Pages User/Account Pages Static Pages Checkout pages The administrator has the ability to assign a layout to each of these page types, including a default fallback. Each page type can have an individual layout or they may all have the same layout. No one would really want to change the layout from page to page that much, but there are certain situations where mixing layouts could work out well. For instance, one may want the checkout pages to be full page with no side columns in order to avoid distracting a customer during the order process. Another instance could be that you want to limit distractions during account sign up. And yet another, maybe a shop would do well to have the home page formatted differently than the rest of the site so as to have room to really work that canvas into something appealing. As Ive read here recently, sometimes the product listing areas just need to show a lot of information across the board. So while viewing a page full of products, one may see a lot of information, but once they click to view the actual product info page, then they may be greeted by a much simpler page that presents the product fully with no ongoing clutter or other distractions. There are 7 different layout styles available: 2 Column 1 Sidebar Left 2 Column 1 Sidebar Right 3 Column Sidebars Both 3 Column 2 Sidebars Left 3 Column 2 Sidebars Right 1 Column Sidebars Bottom Full Page (No Sidebars) So how does it work? The header tag module assigns a class to the body tag in order to use the relevant css style to load the desired layout. There are changes to template top and template bottom in order to get things going. An additional div is placed and the grid_* are removed from the left and right columns. With these changes the complete structure becomes very flexible. There is one dilemma, and that is the 960gs. It is not bad to have the 960 grid in place, it makes a perfectly fine wrapper, but really, thats about it. Of course thats not a big deal, as there are only a few spots that really call upon it, and 2 have already been removed. I do not want to write a contribution that tells people to remove the 960 grid in order to use it, so I will not touch much further on that, but will leave this in mind: If removed, and the #bodyWrapper div is assigned a max-width of XXXpx and width of 100% - then the complete framework becomes responsive. Since this module is basically a tool to aid in layout and design, it also goes a step further to lend towards the designer. Maybe theres a hot new product and it just needs to pop out from the other listings - maybe a store has need for landing pages that have their own overall look and feel. It would be nice to do these things and still hook into the primary functions of the cart software, without practically building a whole new set of pages and assets chained thereof. So -- the answer, and I have tested this here and there through the years, add a unique css ID to the body tag as well. Now every thing on a page can be manipulated through the stylesheet alone. Design wise that is! Move things out of the way, hide things, recolor things, take something from the description, move it elsewhere - - The module pulls the category name, manufacturer name, product name, HEADING_TITLE || NAVBAR || NAVBAR_2, and outputs that as a css friendly id. It may not sound like much, but it goes a long way. Its not something useful to all, but those that could make use of it would find it indispensable. Installation is very simple: Upload 2 files into header tags directory Upload 1 file to header tags language directory Upload 1 new stylesheet Make slight changes to template_top Make slight changes to template_bottom Here are some examples using a standard osCommerce 2.3.4 setup. Besides the Dynamic Frame Controller installation, the only other change has been to remove the store logo to allow room to print the CSS ID and Class to screen. HomePage => 2 Column 1 Sidebar Left => http://mulium.wsfive.com/ Product Info Pages => 2 Column 1 Sidebar Right => http://mulium.wsfive.com/product_info.php?cPath=3_10&products_id=11 Product Listing Pages => 3 Column Sidebars Both => http://mulium.wsfive.com/index.php?cPath=3_10 User/Account Pages => 3 Column 2 Sidebars Left => http://mulium.wsfive.com/login.php Static Pages => 3 Column 2 Sidebars Right => http://mulium.wsfive.com/conditions.php Checkout pages => Full Page (No Sidebars) => http://mulium.wsfive.com/shopping_cart.php 1 Column Sidebars Bottom <!-- no more pages groups available to show this one, but it is probably the least to ever be used. --> If you resize your browser while looking at the examples, you'll find that it wants to take on a responsive form, but the grid has it trapped. I dont have an install file written yet, but will be getting that together and would like to know if anyone would like to beta test. All input on this idea would be greatly appreciated. It can be expanded even further, but I wish to make the most with less, and not create something that just goes too far.