Jump to content

Recommended Posts

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:

  1. Home Page
     
  2. Product Listing Pages
     
  3. Product Info Pages
     
  4. User/Account Pages
     
  5. Static Pages
     
  6. 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:

  1. 2 Column 1 Sidebar Left
     
  2. 2 Column 1 Sidebar Right
     
  3. 3 Column Sidebars Both
     
  4. 3 Column 2 Sidebars Left
     
  5. 3 Column 2 Sidebars Right
     
  6. 1 Column Sidebars Bottom
     
  7. 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:

  1. Upload 2 files into header tags directory
     
  2. Upload 1 file to header tags language directory
     
  3. Upload 1 new stylesheet
     
  4. Make slight changes to template_top
     
  5. 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.

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.


Follow the community build:

BS3 to osCommerce Responsive from the Get Go!

Check out the new construction:

Admin Gone to Total BS!

Share this post


Link to post
Share on other sites

@ - it looks awesome, and is something sorely needed as it's so difficult to change the look from page to page. Will be happy to beta test this...

 

...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.

 

:thumbsup:

Edited by burt

This is a signature that appears on all my posts.  
IF YOU MAKE A POST REQUESTING HELP...please state the exact version
of osCommerce that you are using. THANKS

 
Get the latest Responsive osCommerce CE (community edition) here

Share this post


Link to post
Share on other sites

Template dynamic system do that, both, left, right, choice on the page.

What's new ?



Regards
-----------------------------------------
Loïc

Contact me by skype for business
Contact me @gyakutsuki for an answer on the forum

Tuto for 2.4 :
- How to Display a new page with app
- How to make Header Tags under app APP
- How to make a
boostrap modal with external element
 

 

Share this post


Link to post
Share on other sites

@@Gyakutsuki

 

The contribution you mentioned does not do what this sytem does, it appears to control box placement. The one I am developing controls column placement, right, left, and center, as well as add a strating point for design.

 

It could be used in combination with the dynamic template system if need be.

 

I had never seen that contribution untill today, it appears to take a lot of modifications, while the one I have built will take about 5 minutes to install with only modifications to 2 files.


Follow the community build:

BS3 to osCommerce Responsive from the Get Go!

Check out the new construction:

Admin Gone to Total BS!

Share this post


Link to post
Share on other sites

Yes it does that, this a features that I have propose at HPDL to include in 2.3 is born with the box, Fox2p has reallize this contribution :

 

http://mulium.wsfive.com/

http://mulium.wsfive.com/product_info.php?cPath=3_10&products_id=11

http://mulium.wsfive.com/index.php?cPath=3_10

http://mulium.wsfive.com/shopping_cart.php

 

Also it's possible to use in the header, footer also.

 

 

the modification must be :

admin ==> new function

modules ==> a little upgrade

 

in catalogue

Boxe : need a var pages and insert database

function : i don't remember

 

it doesn't do but this ption has no more value :

http://mulium.wsfive.com/login.php

http://mulium.wsfive.com/conditions.php

 

But I am curious to see your development, it's also interesting and an alternative.

Congratulation for your initiative.

Edited by Gyakutsuki


Regards
-----------------------------------------
Loïc

Contact me by skype for business
Contact me @gyakutsuki for an answer on the forum

Tuto for 2.4 :
- How to Display a new page with app
- How to make Header Tags under app APP
- How to make a
boostrap modal with external element
 

 

Share this post


Link to post
Share on other sites

Now have added 1 more page type, the nested category.

 

I have an example using the 1 Column Sidebars Bottom layout here: http://mulium.wsfive.com/index.php?cPath=1

 

I have also changed the code top use 2 spaces rather than a tab for indent.

 

I will be uploading soon.

 

Thanks to @@burt and @@Gyakutsuki for testing and input.


Follow the community build:

BS3 to osCommerce Responsive from the Get Go!

Check out the new construction:

Admin Gone to Total BS!

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×