X-Cart forums - Alternating between 2- and 3-column layouts

X-Cart forums (https://forum.x-cart.com/index.php)

- Changing design (https://forum.x-cart.com/forumdisplay.php?f=51)

- - Alternating between 2- and 3-column layouts (https://forum.x-cart.com/showthread.php?t=16995)

Alternating between 2- and 3-column layouts

I would like to be able to alternate between 2- and 3-column layouts on my X-cart site. Although this topic has been discussed briefly, and although one member has graciously provided some help, I still am stuck.

I would like to display a 3-column layout on all pages _except_ the following, which are listed with the tpls that are invloved:

(1) Your Shopping Cart
A. customer/main/cart.tpl
B. customer/main/cart_totals.tpl

(2) Product Detail Page
A. customer/main/product.tpl

(3) Checkout
A. customer/main/checkout.tpl
B. customer/main/customer_details.tpl
C. customer/main/cart_details.tpl
D. customer/main/cart_contents.tpl
E. customer/main/cart_totals.tpl

(4) Wish List
A. modules/Wishlist/wishlist.tpl
B. modules/Wishlist/wl_products.tpl

I realize that what I am trying to achieve requires adding some if...then code to home.tpl. It is the specific if...then code I ned help with.

Thanks in advance to anyone who can assist.

John

www.bitsbytescomputer.com/store

In case it helps, here is my home.tpl file:

{* $Id: home.tpl,v 1.10.2.1 2003/12/02 11:33:47 svowl Exp $ *}
{ config_load file="$skin_config" }
<html>
<head>

<title>{$lng.txt_site_title}
{if $main eq "catalog"}
{$lng.txt_subtitle_home}
{elseif $main eq "help"}
{$lng.txt_subtitle_help}
{elseif $main eq "cart"}
{$lng.txt_subtitle_cart}
{elseif $main eq "checkout"}
{$lng.txt_subtitle_checkout}
{elseif $main eq "order_message"}
{$lng.txt_subtitle_thankyou}
{/if}
</title>

{ include file="meta.tpl" }
<link rel="stylesheet" href="{$SkinDir}/customer/style_customer.css">

{* JJH 04.02.05 *}
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
{* JJH 04.02.05 *}

{* AW suppport for categories tabs *}
{if $tab_cat}
{if $tab_cat == '1'}
{assign var="tab_nav" value="customer/tab_nav/software_nav.tpl"}
{elseif $tab_cat == '2'}
{assign var="tab_nav" value="customer/tab_nav/books_nav.tpl"}
{elseif $tab_cat == '3'}
{assign var="tab_nav" value="customer/tab_nav/audio_nav.tpl"}
{elseif $tab_cat == '4'}
{assign var="tab_nav" value="customer/tab_nav/kids_nav.tpl"}
{elseif $tab_cat == '5'}
{assign var="tab_nav" value="customer/tab_nav/services_nav.tpl"}
{elseif $tab_cat == '6'}
{assign var="tab_nav" value="customer/tab_nav/resources_nav.tpl"}
{else}
{assign var="tab_nav" value="customer/tab_nav/welcome_nav.tpl"}
{assign var="tab_cat" value=""}
{/if}
{else}
{if $current_category.categoryid == '' || preg_match("|^Welcome|", $current_category.category) }
{assign var="tab_nav" value="customer/tab_nav/welcome_nav.tpl"}
{assign var="tab_cat" value=""}
{/if}
{if $current_category.categoryid == '1' || preg_match("|^Software|", $current_category.category) }
{assign var="tab_nav" value="customer/tab_nav/software_nav.tpl"}
{assign var="tab_cat" value="1"}
{/if}
{if $current_category.categoryid == '2' || preg_match("|^Books|", $current_category.category) }
{assign var="tab_nav" value="customer/tab_nav/books_nav.tpl"}
{assign var="tab_cat" value="2"}
{/if}
{if $current_category.categoryid == '3' || preg_match("|^Audio|", $current_category.category) }
{assign var="tab_nav" value="customer/tab_nav/audio_nav.tpl"}
{assign var="tab_cat" value="3"}
{/if}
{if $current_category.categoryid == '4' || preg_match("|^Kid|", $current_category.category) }
{assign var="tab_nav" value="customer/tab_nav/kids_nav.tpl"}
{assign var="tab_cat" value="4"}
{/if}
{if $current_category.categoryid == '5' || preg_match("|^Services|", $current_category.category) }
{assign var="tab_nav" value="customer/tab_nav/services_nav.tpl"}
{assign var="tab_cat" value="5"}
{/if}
{if $current_category.categoryid == '6' || preg_match("|^Resources|", $current_category.category) }
{assign var="tab_nav" value="customer/tab_nav/resources_nav.tpl"}
{assign var="tab_cat" value="6"}
{/if}
{/if}
{* /AW *}

{ include file="customer/subtab_css.tpl" }

</head>

<body>

{include file="customer/logo_bar.tpl"}
{include file="customer/tab_bar.tpl"}

{*jjh -- 05.17.04 -- Do not add a style margin-right setting below because it introduces a horizontal scroll bar on all pages and whitespace to the right of the tab and subtab rows *}

<table border="0" width="100%" cellpadding="0" cellspacing="0" align="center">
<tr>

{* jjh -- 05.17.04 -- the first width setting below determines abount of whitespace to left of left edge of boxes in navigation menu column*}

{* jjh -- 05.17.04 -- the second width setting below determines the width of the items in the Navigation Menu column. Does the 168px width setting above need to match that in /customer/menu.tpl *}

<td width="1px" rowspan="2"><span class="space"><nobr>{**}</nobr></span>
</td>

<td width="168px" valign="top">

{* if isset($smarty.request.cat) && $smarty.request.cat neq '0' *}
{ if isset($smarty.request.cat) || isset($current_category) }
{* include file="customer/categories.tpl" --- Original *}
{ include file="customer/set_categories.tpl" }
{ include file="customer/set_categories_1.tpl" }
<div class="spaceafternavbox"></div>
{/if}

{if $current_category.categoryid == '' || preg_match("|^Welcome|", $current_category.category) }
{include file="customer/nav_home.tpl"}
{elseif $current_category.categoryid == '1' || preg_match("|^Software|", $current_category.category) }
{include file="customer/nav_software.tpl"}
{elseif $current_category.categoryid == '2' || preg_match("|^Books|", $current_category.category) }
{include file="customer/nav_books_bibles.tpl"}
{elseif $current_category.categoryid == '3' || preg_match("|^Audio|", $current_category.category) }
{include file="customer/nav_audio_video.tpl"}
{elseif $current_category.categoryid == '4' || preg_match("|^Kid|", $current_category.category) }
{include file="customer/nav_kids_stuff.tpl"}
{elseif $current_category.categoryid == '5' || preg_match("|^Services|", $current_category.category) }
{include file="customer/nav_services.tpl"}
{elseif $current_category.categoryid == '6' || preg_match("|^Resources|", $current_category.category) }
{include file="customer/nav_resources.tpl"}
{else}
{include file="customer/nav_other.tpl"}
{/if}

{* jjh - 05.19.04 -- I commented out the requirement about being logged in so that the Bestseller box always is displayed *}

{* jjh 09.24.05 moved bestsellers to right-hand column
{if $active_modules.Bestsellers ne "" and $config.Modules.bestsellers_menu eq "Y" }
{ include file="modules/Bestsellers/menu_bestsellers.tpl" }
{/if}
*}

{* include file="customer/quest.tpl" *}

{* jjh *}

{* jjh 09.24.05 moved recently-viewed items to right-hand column
{ include file="customer/mm_recent.tpl" }
<div class="spaceafternavbox"></div>
*}

{*

{literal}

<style type="text/css"></style><script language="JavaScript" src="http://www.bitsbytescomputer.com/live/web/admin/surveys.php?base_url=http://www.bitsbytescomputer.com/live"></script><script language="JavaScript" src="http://www.bitsbytescomputer.com/live/js/status_image.php?base_url=http://www.bitsbytescomputer.com/live&l=admin&x=1&deptid=1&btn=1&text=Live+Customer +Support"></script><div id="surveyDiv" style="visibility:hidden"></div>

{/literal}
</p>

*}

<font class=space>
</font>

</td>

{*jjh -- 05.17.04 -- the width setting below determines how much whitespace will appear to left of left vertical rule in main/central area *}

<td width="2px"><span class="space"><nobr></nobr></span></td>
{* <td class="space">[img]{$ImagesDir}/spacer.gif[/img]</td> *}

<td valign=top>{*<span class="space">*}

{*jjh*}

<TABLE border="0" width="100%" cellpadding="0" cellspacing="0" class="twelvepoint">
<TR>
<TD valign=top>

{include file="customer/home_main.tpl"}

{*span>*}

</TD>

<TD rowspan=2 width="2px"><span class="space"><nobr></nobr></span>
</TD>{* The width setting above determines amount of whitespace to left of right-hand nav column *}

<TD width="168px" valign="top">

{* jjh 09.30.05 *}
{if $main eq "pages"}"foo"
{else}
{ include file="customer/menu_cart.tpl" }
{/if}
{* jjh 09.30.05 *}

{ include file="customer/bb_resources.tpl" }
<div class="spaceafternavbox"></div>

{if $active_modules.Bestsellers ne "" and $config.Modules.bestsellers_menu eq "Y" }
{ include file="modules/Bestsellers/menu_bestsellers.tpl" }
{/if}

{ include file="customer/mm_recent.tpl" }
<div class="spaceafternavbox"></div>

{* jjh commented out all the rest of the right-hand column 09.24.05. *}

{* old commenting out *}
{* Auth.tpl = login panel; Menu_cart.tpl = Cart menu *}
{* AW: login box commented out (16.09.2004) *}
{* jjh -- 09.07.04 -- comment out next two lines if you want to suppress display of Authentication Box *}
{*
{if $login eq "" }
{ include file="auth.tpl" }
<div class=space style="margin-bottom:6px"></div>
{/if}
*}

{* 09.24.05
{ include file="customer/menu_cart.tpl" }
<div class="spaceafternavbox"></div>
*}

{*<div class=space style="margin-top:6px">
</div>*}
{* 09.24.05 { include file="customer/link_to_bits_bytes.tpl" }
*}

{* 09.24.05
<div class=space style="margin-top:6px">
</div>
{ include file="customer/email_friend_navbox.tpl" }
<div class=space style="margin-top:6px">
</div>
*}

{* jjh - 05.19.04 -- I commented out the requirement about being logged in so that the Newsletter box always is displayed *}

{* {if $login eq "" } *}

{* 09.24.05
{ include file="news.tpl" }
*}

{* {else} *}
{* {/if} *}
{* <div class="spaceafternavbox"></div> *}

{* 09.24.05
<div class=space style="margin-top:6px">
</div>
{ include file="customer/join_us.tpl" }
<div class=space style="margin-top:6px">
</div>

{ include file="customer/special.tpl" }

{ include file="customer/google_search.tpl" }
<div class="spaceafternavbox"></div>
*}

{*
<IFRAME name=I1 marginWidth=1 marginHeight=1 src="/store/poll/test_poll.php" frameBorder=0 width=169 scrolling=no height=220 style="background: white;"></IFRAME>
*}

</TD>
</TR>
</TABLE>

</td>

{*jjh -- 05.17.04 -- the width setting below determines how much whitespace will appear to right of right veritcal rule in main/central area *}

<td width="0px">{*<span class="space"></span>*}
</td>

</tr>
</table>

{* Bottom Area *}
{include file="customer/bottom.tpl" }

{if $smarty.get.debug eq '2' }
{php}
global $smarty;
$smarty->debug_tpl="file:debug.tpl";
{/php}
{debug}
{/if}

</body>

</html>

you would need to see the value of $main and use that to choose which template (2 or 3 column) is used

add this somewhere so you can see what main is on each page

this may help to see what vars are used

http://forum.x-cart.com/viewtopic.php?t=17601

Shan,

Thanks. Given the home.tpl page I posted, can you suggest one sample of code that would suppress the third column, e.g., if the current page = http://www.bitsbytescomputer.com/store/customer/product.php?productid=5&cat=1&page=1

Thanks,

John

You've got the answers in front of you ;o)

You need to surround your <td>'s that are in question with:

{if $main eq "cart"}<td></td>{/if}

and...

{if $main eq "checkout"}<td></td>{/if}

and...

{if $main eq "catalog" and $current_category.category ne ""}<td></td>{/if}

,etc.

See what I mean? Let me know if not, and I'll try to help more...

oh, and for wishlist, I believe {if $mode eq "wishlist"} will work, not positive though...

2 and 3 column layout

Instinctual,

Thanks so much. This one statement -- {if $main eq "catalog" and $current_category.category ne ""}<td></td>{/if} -- works wonderfully _except_ it suppresses the third column on the home page, which I do not want. How can the statement be modified so that I have 3 columns on the home page.

One more questions. Once the if...then is working properly, how can I have a fixed-width, flushleft home page but a variable-width, centered every other page?

Thanks,

John

This is an if/then I have in one of my sites that displays something only if it's the homepage:

{if $main eq "catalog" and $current_category.category eq ""}

That one works for me in home.tpl. Notice the difference being that the eq and ne are opposite ;o)

This does for the home page what I want but all other pages do not have 3rd column --> {if $main eq "catalog" and $current_category.category eq ""}

This does for all other pages what I want (alternating 2- and 3-column layout at appropirate places) but suppresses the 3rd column on the home page, which I do not want --> {if $main eq "catalog" and $current_category.category ne ""}

Thoughts?

Thanks!

I figured out a way to achieve what I want on the home page without using if...then statements. Thanks again for your help!

and to answer your homepage question, I'd just use that if/then I just posted and just have 2 totally different sets of html - one for the homepage solely, and then another with variations for all other pages.

Not sure exactly what you're trying to accomplish, but with our clients often they want a totally different homepage layout than what the rest of the "store" looks like, so we go ahead and use if/then's to manage that in that home.tpl file. But you could make other variations for cart, checkout, all those steps based on what I gave you above.

Hope that helps ;o)

YOu said: "2 totally different sets of html - one for the homepage solely, and then another with variations for all other pages" and "Not sure exactly what you're trying to accomplish."

(1) I am trying to have a home page that is different from the rest of the cart in terms of (a) what is displayed in the center section -- I have succeeded in this -- and (b) by being a fixed-width page--the _only_ fixed-width page in the cart.

(2) If having two differetn sets of html would solve (1)(b) above, then please provide advice on how to do this. If you can help me achieve a fixed-width home page in some other way, I am all ears!

Here is the current home page: http://www.bitsbytescomputer.com/store/customer/home.php

The content of the center section and the right hand column are both in one tpl that is called by an include statement from customer/main/welcome.tpl.

Thanks in advance for your help!

sure, first you gotta consider though that rectangle_top.tpl and rectangle_bottom.tpl ultimately decide alot of things about the "outside" table of your entire catalog...so that said, usually what I do in order to have a completely custom homepage vs. the rest of the catalog site is I get rid of everything in rectangle_top.tpl and put in my own "header" code in that file - also eliminating everything in head.tpl or head_customer.tpl except for keeping track of necessary tags like the categories include, ,etc. that we may want to include in the design somewhere else.

Then, in those files, I use the tag I last mentioned {if $main eq "catalog" and $current_category.category eq ""} to provide a totally different "header" for if it's the homepage, and then in the rectangle_bottom.tpl I use that tag again to provide my "footer" for the homepage and non-homepage pages.

{if $main eq "catalog" and $current_category.category eq ""}
Homepage html code - beginning from just below the body tag in your template, down to where you want your content to show up.
{else}
regular site html - however you want that setup.
{/if}

Sometimes, it's necessary to alter the <body> tag as well per homepage or deeper page, and that can be done in the same manner in home.tpl, or by calling in a different .css depending on homepage or not.

Make sense?

You said: "rectangle_top.tpl and rectangle_bottom.tpl ultimately decide alot of things about the "outside" table of your entire catalog"

My cart has been extensively modified so that changing the width statement in rectangle_top.tpl, for example, has no effect on the "customer side "my cart, though making a change to the width does affect the width of the admin side of the cart. I guess I will have to play around with the various tpls that control the width of the customer side of the cart and see if I can then figure out how to implement your sugestion

Thanks for your continued excellent help!

Thank you -- a happy ending

Special thanks to Instinctual from Instinctual for providing code that enabled me to have my site switch between 3-column and 2-column modes and to Norma from Rightminddesigns for providing code that enabled me to have a fixed-width home page and variable width all other pages.

Both of you have been immensely helpful, as are the X-Cart forums in general.

You can see the almost-completely-tweaked results here: www.bitsbytescomputer.com/store

John

Code for alternating 2- and 3-page layouts, fixed-width home

If you wish to have your X-Cart alternate between a 2- and a 3-page layout, or if you wish to have a fixed-width home

page and variable width all other pages, here is the code that Instinctual of Instinctual and Norma of

Rightminddesigns so kindly provided. My cart has successfully been modified to do both of these things.

(1) How to have your X-Cart alternate between a 2- and a 3-page layout.

A. These instructions assume that you have your cart set up with a 3-column default layout.

B. Open customer/home.tpl. This should be the only file you have to modify.

C. Locate this comment: . This comment designates the beginning of what will be displayed in the

three columns that define your cart's layout.

D. Scroll down from there until you find this comment: . This comment designates the end of

what will be displayed in the center, or middle, column of your cart's layout.

E. Now look a few lines below that last comment. You are looking for a <TD> statement. This <TD> statement designates

the beginning of the third column of your cart's layout.

F. Immediately before that <TD> statement, insert this line of code

Code:

{if $main eq "catalog" and $current_category.category ne ""}

G. Now scroll down and find the ending </TD> statement.

H. Insert {/if} immediately below that </TD> statement.

I. The results (in my cart, at least):
1. Home Page = 3 cols.
2. Featured Product pages = 3 cols
3. Top level categories = 3 cols.
4. Secondary level categories = 3 cols.
5. Thumbnails = 3 cols.
6. Searches = 2 cols.
7. Product Details = 2 cols
8. All checkout pages = 2 cols.
9. And so forth.

J. Go here to see what this looks like in my cart: www.bitsbytescomputer.com/store

(2) How to have your cart display a fixed-width home page and variable width all other pages.

A. These instructions assume that you have your cart set up with a 3-column default layout.

B. Open customer/home.tpl. This should be the only file you have to modify.

C. Locate this comment: . This comment designates the beginning of what will be displayed in the

three columns that define your cart's layout.

D. Scroll down from there until you find this comment: . This comment designates the beginning

of what will be displayed in the center, or middle, column of your cart's layout.

E. Now look a few lines below that last comment. You are looking for a <TABLE> statement. This <TABLE> statement

designates the beginning of the second and third column of your cart's layout.

F. Modify this <TABLE> statement so that it looks like this:

<TABLE border="0"

Code:

{if $main eq "catalog" and $current_category.category eq ""} width="650px" {else} width="100%" {/if}

cellpadding="0" cellspacing="0" class="twelvepoint">

G. Change the "650px" designation to whatever width you want your home page to be.

H. I also had to add this

Code:

{if $main eq "catalog" and $current_category.category eq ""} width="650px" {else}



width="100%" {/if}

logic in two other locations in my customer/home.tpl and I created tables to contain the include

statements in these locations (changing the fixed width to 833px to make everything look right):

1. <TABLE border="0"

Code:

{if $main eq "catalog" and $current_category.category eq ""} width="833px" {else} width="100%"



      {/if}

cellpadding="0" cellspacing="0" class="twelvepoint">
<TR>
<TD>
{include file="customer/logo_bar.tpl"}
{include file="customer/tab_bar.tpl"}
</TD>
</TR>
</TABLE>

2. <TABLE border="0"

Code:

{if $main eq "catalog" and $current_category.category eq ""} width="833px" {else}        



width="100%" {/if}

cellpadding="0" cellspacing="0" class="twelvepoint">
<TR>
<TD>
{include file="customer/bottom.tpl"}
</TD>
</TR>
</TABLE>

I. Go here to see what this looks like in my cart: www.bitsbytescomputer.com/store

Instinctual and Norma are far better qualified to explain the if...then logic than am I.