Products listed side by side on cart.php

[KuJoe]

I already did a search with no luck so if this was asked and answered previously I apologize. I am trying to get all of my products listed on the cart.php page side by side instead of stacking on top of each other. I've looked in the products.tpl but I must be missing something as I can't see what to remove/edit.

[KuJoe]

Any ideas? $5 via Paypal to the first person to help.

[ChrisGooding]

I am also after finding out something similar in this thread - http://forum.whmcs.com/showthread.php?t=11196

 

If you come across the solution will you kindly let me know, and I will ensure I do the same.

 

Cheers

[BAJI26]

Look what I ran across:

[BAJI26]

Edit time ran out...

[KuJoe]

Wow, I didn't expect to ever get an answer after scouring for 3+ days and various programmers for hire declining my offers. I have since found an alternative, only offering 1 package. Thanks for the reply though, maybe Chris is still interested.

[ChrisGooding]

Edit time ran out...

 

I really like this one, its exactly what I was on about.....

 

So the question is, how did you do it, and how difficult was it?

 

Cheers

[BAJI26]

How does this look??

[Albahri65]

Please help us to do that?

[ChrisGooding]

Here is what Baji sent me.....

 

I hope I have all the .css.

What's your site?

 

 

<table style="width: 100%; border: 1px solid #e0e0e0;" cellpadding="2" cellspacing="20" >
<tr>
{foreach key=num item=product from=$products}
<td valign="top"><div class="cartboxproducts">
<p class="productname"><strong>{$product.name}</strong> {if $product.qty!=""}<em>({$product.qty} {$LANG.orderavailable})</em>{/if}</p>
<div class="surround">
{if $product.description}{$product.description}<br />{/if}
<div style="margin:5px;padding:2px;color:#cc0000;">
{if $product.paytype eq "free"}
{$LANG.orderfree}
{elseif $product.paytype eq "onetime"}
{$product.pricing.onetime} {$LANG.orderpaymenttermonetime}
{elseif $product.paytype eq "recurring"}
{if $product.pricing.monthly}{$product.pricing.monthly}<br />{/if}
{if $product.pricing.quarterly}{$product.pricing.quarterly}<br />{/if}
{if $product.pricing.semiannually}{$product.pricing.semiannually}<br />{/if}
{if $product.pricing.annually}{$product.pricing.annually}<br />{/if}
{if $product.pricing.biennially}{$product.pricing.biennially}<br />{/if}
{/if}
</div>
</div><br>
<div align="center"><input type="button" value="{$LANG.ordernowbutton}"{if $product.qty eq "0"} disabled{/if} onclick="window.location='{$smarty.server.PHP_SELF}?a=add&pid={$product.pid}'" /></div>
</div>
</td>
{if $num is not div by 2}
</tr>
<tr>
{/if}<br />
{/foreach}
</tr>
</table>
<p align="center"><input type="button" value="{$LANG.viewcart}" onclick="window.location='cart.php?a=view'" /></p>

 

 

.cartboxproducts {
 width: 100%;
 height:250px;
 margin-left: auto;
 margin-right: auto;
 padding: 10px;
 background-color: #f7f7f7;
 border: 1px dotted #cccccc;
}

.productname {
 font-size:14px;
}

.surround {
 border: 1px solid #D8D8DA;
 padding: 5px;
}

 

Let me know if this works!

 

Though I havent got round to testing it yet, and tbh I actuall like the layout I got by mixing up 2 sugestions I got in another thread......

 

I now have this

 

https://www.xtrgameservers.com/services/cart.php?gid=0000000006

 

Heres the thread, including how I ended up with my end result

 

http://forum.whmcs.com/showthread.php?t=11196

[Albahri65]

I followed all steps in that page, but still my server the hosting account does not upgraded!!

[ChrisGooding]

I followed all steps in that page, but still my server the hosting account does not upgraded!!

 

I feel you have stumbled into the wrong thread my friend

[waddy]

Hi,

 

I am trying to achieve the same sort of thing, I would like the Products side by side in one table. With order buttons underneath the product.

 

I have played around and cant seem to get it to work like that.

 

I have copied and pasted the example code to both the files, when i look at my site, nothing has changed, the products are listed below each other?

 

Can someone help me place 4 products into one table, if a fifth is added a new table below is made?

 

Product1 Product2 Product3 Product4

[BAJI26]

<<snipped removed post>>

 

Here is the code that I made awhile ago:

 

http://forum.whmcs.com/showpost.php?p=61586&postcount=10

 

And here is one to add images:

 

http://forum.whmcs.com/showthread.php?t=11196

[ChrisGooding]

Just thought I'd update this thread. I know its been a while since Baji26 pointed me in the direction, and since then I have done some major tweaking.

 

One thing is that the column system, is now set in div format. Making it even simpler to style.

 

To increase the number or columns change the below value to whatever you need.

{assign var=cols value=3}

 

Here's the code for the tpl file: - Works fully in 3.8.1

 

<link rel="stylesheet" type="text/css" href="templates/orderforms/cart/style.css" />

 

<p align="center" class="cartheading">{$LANG.cartbrowse}</p>

 

<div class="cartbox" align="center"><strong>

{foreach key=num item=productgroup from=$productgroups}

{if $gid eq $productgroup.gid}

{$productgroup.name} |

{else}

<a href="{$smarty.server.PHP_SELF}?gid={$productgroup.gid}">{$productgroup.name}</a> |

{/if}

{/foreach}

{if $loggedin}<a href="{$smarty.server.PHP_SELF}?gid=addons">{$LANG.cartproductaddons}</a> | {/if}

{if $registerdomainenabled}<a href="{$smarty.server.PHP_SELF}?a=add&domain=register">{$LANG.registerdomain}</a> |{/if}

{if $transferdomainenabled}<a href="{$smarty.server.PHP_SELF}?a=add&domain=transfer">{$LANG.transferdomain}</a> |{/if}

<a href="{$smarty.server.PHP_SELF}?a=view">{$LANG.viewcart}</a>

</strong></div>

 

<br />

 

<div id="columnbox_main">

<div class="columnbox_list">

<div class="columnbox_row">

{assign var=cols value=3}

{foreach name=list key=num item=product from=$products}

 

<div class="columnbox_product">

<div class="columnbox_productholder">

<div class="columnbox_productinfo">

<center style="min-height: 30px;"><h3>{$product.name}</h3></center> {if $product.qty!=""}<em>({$product.qty} {$LANG.orderavailable})</em>{/if}

{if $product.description}{$product.description}<br />{/if}

</div>

<div class="columnbox_productprice">

<div style="margin:5px;padding:2px;color:#6ba806;">

{if $product.paytype eq "free"}

{$LANG.orderfree}

{elseif $product.paytype eq "onetime"}

{$product.pricing.onetime} {$LANG.orderpaymenttermonetime}

{elseif $product.paytype eq "recurring"}

{if $product.pricing.monthly}{$product.pricing.monthly}<br />{/if}

{if $product.pricing.quarterly}{$product.pricing.quarterly}<br />{/if}

{if $product.pricing.semiannually}{$product.pricing.semiannually}<br />{/if}

{if $product.pricing.annually}{$product.pricing.annually}<br />{/if}

{if $product.pricing.biennially}{$product.pricing.biennially}<br />{/if}

{/if}

</div>

<div align="center" style="margin-bottom: 10px;"><input type="button" value="{$LANG.ordernowbutton}"{if $product.qty eq "0"} disabled{/if} onclick="window.location='{$smarty.server.PHP_SELF}?a=add&pid={$product.pid}'"/></div>

</div>

</div>

</div>

 

{if not (($smarty.foreach.list.index +1) mod $cols)}

{if not $smarty.foreach.list.last}

</div><div class ="columnbox_row">

{/if}

{/if}

{if $smarty.foreach.list.last}

{* pad the cells not yet created *}

{math equation = "n - a % n" n=$cols a=$products|@count assign="cells"}

{if $cells ne $cols}

{section name=pad loop=$cells}

<div> </div>

{/section}

{/if}

</div>

{/if}

{/foreach}

</div>

</div>

<p align="right"><input type="button" value="{$LANG.viewcart}" onclick="window.location='cart.php?a=view'" /></p>

 

Here is the values to use in the .css file, though could be changed to whatever you want, obviously depending on your layout.

#columnbox_main { color:000}

.columnbox_row { margin-bottom:15px; overflow:auto;}

.columnbox_product {width:200px; float:left; margin: 0px 5px 0px 5px; }

.columnbox_productholder { background: #fff; padding: 5px; border: 1px dashed #000; text-align:center; }

.columnbox_productprice { overflow:auto;}

 

Big credits go to to BAJI26 for setting me on the path in the first place:D

[ChrisGooding]

Added image example:

 

 

Couldn't add to post above, time expired.

[sparky]

@ChrisGooding: Hey, I believe there is some of my code in there to display the multiple columns. Good to see it being used.

[ChrisGooding]

It's actually code that Balji26's gave me in April last year...Though he could have got it from you, not sure...

 

If he did, then obviously credit goes to you too

 

Incidentally, what do you think of the div layout tweak/mod....... I personally find it gives far more freedom when laying the products out.

 

Also, I'm currently working on making it so different product groups display differently, i.e our game servers in 3 column, merchandise 1 column, etc etc

 

Will post the code when I'm done.

[sparky]

If you check my cart the pages already do display diferent depending on the group

[ChrisGooding]

Ooooh, so they do Nice work

 

Presumably you did it using if's.......

 

Am I right in thinking that its a case of have something like:-

 

{if $gid eq "3"}

 

layout code

 

{elseif $gid eq "4"}

 

etc, etc

 

?

[sparky]

Yes done with if's but $gid will not work

[ChrisGooding]

Well at least I'm pn the right tracks.

 

I'll have a go, Im thinking it's going to be $productgroup.gid but once again I could be wrong.

 

I get there, just very slowly, lol.

[BAJI26]

Actually I didn't get it from sparky!

[ChrisGooding]

Well there you have it

 

As mentioned previosly BAJI26, couldn't have got there without you, thanks again.

[sparky]

I am referring to this part

{assign var=cols value=3}

and

{if not (($smarty.foreach.list.index +1) mod $cols)}

{if not $smarty.foreach.list.last}

</div><div class ="columnbox_row">

{/if}

{/if}

{if $smarty.foreach.list.last}

{* pad the cells not yet created *}

{math equation = "n - a % n" n=$cols a=$products|@count assign="cells"}

{if $cells ne $cols}

{section name=pad loop=$cells}

<div> </div>

{/section}

{/if}

I can't see that in the original given to you by BAJI26. Please point it out. Edited January 9, 2009 by sparky