Pictures in Product Description & Different display methods

[ChrisGooding]

Hi,

 

We are going to be adding merchandise to our range, and although I know WHM isnt really designed for that kind of thing, I dont want a whole new cart just for a few items.

 

There are 2 things I cannot seem to get to grips with..

 

1) I am sure I have read or seen that you can use pictures within the product description, if this is so How do you do that, and is there ant instructions on how to do so.

 

2) When looking at the product groups in the cart, they are all listed 1 per row, 1 after the other, which is fine for our game servers and dedi servers. However it would be better if we could get a side by side box view (with pics if possible) for the merchandise group. Basically each row has 2 boxes on it, each with a different product, as opposed to a single product per row.

 

2a) If it is possible to do number 2, can you do this just for one product group and not the others, or do all the groups have to be viewed the same.

 

Many Many thanks in advance to anyone who can help.

[ChrisGooding]

No one have any ideas?

 

Even if it's to say whether it could be done or not....

[Zorro67]

Hi Chris, for Q1, yes you can do this.

 

there's another thread here which gives you more info

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

 

Basically you can add HTML to your product descriptions, so we added tables, formatting and an image reference to acheive the required result

 

Have a look at how we have applied at https://ozsmebusiness.com.au/support/cart.php

 

We've also moved the price & order now button to the right instead of below, to get back some screen real estate. which was done in the products template file in our cart layout

 

Re Q2 there's another thread about have products in 2 columns, so you could combine the approaches.

Whether you have 1 column for some & 2 columns for others depends on what the products are, or how good your understanding of smarty coding is.

 

PM me more specifics if you need to.

[ChrisGooding]

Thanks for that, that's most helpful. Im going to have a play around today and see what I come up with

 

And thanks for the offer of assistance, fingers crossed I'll get it, but there may be a pm coming your way

[ChrisGooding]

I have managed to get this - https://www.xtrgameservers.com/services/cart.php?a=add&pid=42

 

But I was hoping to have the text to the right of the image, similar to your layout. Is that something that is done within the description box, or is it a template issue?

 

Many thanks for your help btw:-)

 

p.s obviously thats not the pic I will be using, I don't have them back from photographer yet.

[Zorro67]

Chris,

 

look in templates/default (or custom)/cart/products.tpl

 

around line 22, change to

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

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

<h3>{$product.name}</h3> {if $product.qty!=""}<em>({$product.qty} {$LANG.orderavailable})</em>{/if}

<table>

<tr class="cartbox2">

<td class="cartboxdesc">

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

<td class="cartboxprice" style="margin:2px;padding:2px;color:#cc0000;">

{if $product.paytype eq "free"}

 

 

 

And around line 33

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

{/if}

</td>

<td class="cartboxorder"><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}'" /></td>

</tr>

</table>

</div>

<br />

{/foreach}

 

 

then add to your /cart/style.css

Aound line 22

 

.cartbox2 {

width: 100%;

align:left;

background-color: #E6EEFF;

}

 

 

.cartboxdesc {

width: 70%;

align:left;

background-color: #E6EEFF;

}

 

.cartboxprice {

width: 15%;

align:left;

background-color: #E6EEFF;

}

 

.cartboxorder {

width: 15%;

align:left;

background-color: #E6EEFF;

}

 

 

Oviously change the bg

Hope this helps

[ChrisGooding]

THanks.

 

Just one more question..... (Sorry)

 

Will this affect how all groups are displayed, or am I able to specify what products/groups to display this way?

 

Sorry it's just my codey skills are slim.

 

Cheers

[ChrisGooding]

OK - I've had a go, and all went well..... so well in fact I tweaked it slightly

 

I now have it displaying like this - https://www.xtrgameservers.com/services/cart.php?gid=6

 

It's still not quite how I want it unfortunately. I was blundering about trying to get the pic on the left of the description box with the text from the description on the right, but with no success. What I am after is essentially 3 boxes: -

 

left box - Picture

Centre box - Text Description

Right box - Prices and order button

 

I am begining to think that it isn't possible, as it does mean splitting the data inputed into the product description box.

 

If it is possible, could someone please put me out of my misery.. thanks.

[hoosierweb]

you would simply create the html with either a 2 column table (left column being the image) or with no tables, and align image left

 

his code is just the structure for the layout.. you have to supply the html for the correct layout of the description/image

[Zorro67]

Hi Chris, that looks better.

 

Actually think the price above the order button is better than my layout. perhaps i'll mod mine.

 

take a step back for a second.

 

With the edit to products.tpl, essentially you've got 2 boxes side by side one for product description, and one for price & order button.

 

The picture box is actually your left box split into a further 2 boxes inside the product description area, using HTML

 

So to get your product layout right, you should add some more formatting to the product description. For a hint, have a look at the page source from my earlier link, that should give you a clue

 

if you aren't big on coding, use a code editor like NVU (I HATE fr*ntpage) to arrange some tables, and format them how you want them, then copy the HTML code that it creates, into your product description box

[hoosierweb]

I might also add, there is no need to add tables with his code.. one can just as easy add in one div and assign an id to the other.. then using CSS, have them display side by side (and not top/bottom as is default)

 

you could also assign an if argument if you wanted only certain products to display this way

 

Here is the code I used to get everything left/right

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

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

<h3>{$product.name}</h3> {if $product.qty!=""}<em>({$product.qty} {$LANG.orderavailable})</em>{/if}

<div id="LeftBox">{if $product.description}{$product.description}<br />{/if}</div>

<div id="RighBox" style="margin:5px;padding:2px;color:#cc0000;">

 

and add in this to the templates/yours/cart/style.css

#LeftBox {

float:left;

width:300px; /* or whatever value you want */

}

#RightBox {

float:right;

width:300px; /* Width of the box - may or may not be necessary*/

margin:-5px 0 0 0; /* positions the box next to the other. This will have to be adjusted depending on the LeftBox.*/

}

[Zorro67]

thanks, HW. thats definitely a better way of doing it.

 

Unfortunately (or fortuantely), I'm a marketing genius, not a coding genius.

 

I simply stand on the shoulders of giants such as yourself.

[ChrisGooding]

OK Now Im confused......

 

So, I now have 2 boxes, and to get the layout I want I use html code in the description box to split the layout further. Which is actually good, as That means I will be able to choose which products to display that way or not.

 

So, with that in mind, the code below, is that what I place in my product description, or does that go in the product.tpl?

 

Or is this just an easier way to achieve the layout I already have? And do I use it to replace the code I recently placed in products.tpl

 

Here is the code I used to get everything left/right

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

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

<h3>{$product.name}</h3> {if $product.qty!=""}<em>({$product.qty} {$LANG.orderavailable})</em>{/if}

<div id="LeftBox">{if $product.description}{$product.description}<br />{/if}</div>

<div id="RighBox" style="margin:5px;padding:2px;color:#cc0000;">

 

 

And, will this need to replace the earlier code I placed in my style.css, or is it in addition to the earlier code.

 

and add in this to the templates/yours/cart/style.css

#LeftBox {

float:left;

width:300px; /* or whatever value you want */

}

#RightBox {

float:right;

width:300px; /* Width of the box - may or may not be necessary*/

margin:-5px 0 0 0; /* positions the box next to the other. This will have to be adjusted depending on the LeftBox.*/

}

 

Thank you both for your continued help.

[ChrisGooding]

Actually guys...... Thank you both

 

Like Dr Frankenstein creating his monster, I have hacked all 3 code offerings together, and managed to achieve what I want. 2 boxes, but I've sussed how to split the pic and text using the description box in WHM...

 

Normal products - https://www.xtrgameservers.com/services/cart.php

 

3 way split products - https://www.xtrgameservers.com/services/cart.php?gid=6

 

Basically I have this now: -

 

This is in my products.tpl

{foreach key=num item=product from=$products}
<div class="cartbox" align="center">
<h3>{$product.name}</h3> {if $product.qty!=""}<em>({$product.qty} {$LANG.orderavailable})</em>{/if}
<table>
<tr class="cartbox2">
<td class="cartboxdesc">
{if $product.description}{$product.description}{/if}</td>
<td class="cartboxprice" style="margin:2px;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.bien nially}<br />{/if}
{/if}
<br /><br />
<input type="button" value="{$LANG.ordernowbutton}"{if $product.qty eq "0"} disabled{/if} onclick="window.location='{$smarty.server.PHP_SELF}?a=add&pid={$p roduct.pid}'" /></td>
</tr>
</table>
</div>
<br />
{/foreach}

 

This in my Style.css

.cartbox2 {
width: 650px;
align:left;
background-color: #DDFFD7;
}


.cartboxdesc {
width: 600px;
align:lef;
background-color: #DDFFD7;
}

.cartboxprice {
width: 100px;
border-left: 1px dashed #cccccc;
align:left;
text-align:center;
background-color: #DDFFD7;
}

#picBox {
float:left;
border-right: 1px dashed #cccccc;
width:200px; /* or whatever value you want */
}

#textBox {
float:right;
width:250px; /* Width of the box - may or may not be necessary*/
margin:-5px 0 0 0; /* positions the box next to the other. This will have to be adjusted depending on the LeftBox.*/
}

 

And this is in the product description box in WHM (which can be used just for the products with pics)

<div id="picBox"><img width="150" border="0" Height="200" src="images/Merchandise/xtr_logo.gif"/></div><br />
<div id="textbox"> - Black Continental style rugby shirt,<br />    with white piping and XTR logo<br /> - 100% Cotton<br /> - Available in sizes S, M, L, XL<br /> - <strong>Includes Free Delivery</strong> <em>(Please allow up to 28 days for free delivery)</em></div>

 

Thank you both for you help, and inspiring me. I would never have sussed it without you :D

[ChrisGooding]

New improved code, for even better layout, as before it affected other layouts that used the 'cartbox' div. It actually looks a bit better too

 

Normal products - https://www.xtrgameservers.com/services/cart.php

 

3 way split products - https://www.xtrgameservers.com/services/cart.php?gid=6

 

Basically I have this now: -

 

This is in my products.tpl

{foreach key=num item=product from=$products}
<div class="cartbox" align="center">
<h3>{$product.name}</h3> {if $product.qty!=""}<em>({$product.qty} {$LANG.orderavailable})</em>{/if}
<table>
<tr class="cartbox2">
<td class="cartboxdesc">
{if $product.description}{$product.description}{/if}</td>
<td class="cartboxprice" style="margin:2px;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 /><br />{/if}
{if $product.pricing.quarterly}{$product.pricing.quarterly}<br /><br />{/if}
{if $product.pricing.semiannually}{$product.pricing.semiannually}<br /><br />{/if}
{if $product.pricing.annually}{$product.pricing.annually}<br />{/if}
{if $product.pricing.biennially}{$product.pricing.bien nially}<br />{/if}
{/if}
<br /><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>
</tr>
</table>
</div>
<br />
{/foreach}

 

This in my Style.css

.cartbox {
width: 90%;
margin-left: auto;
margin-right: auto;
padding: 10px;
background-color: #dbefbb;
border: 1px dashed #cccccc;
}

.cartbox2 {
width: 650px;
align:left;
background-color: #DDFFD7;
}


.cartboxdesc {
width: 600px;
align:lef;
background-color: #DDFFD7;
}

.cartboxprice {
width: 100px;
border-left: 1px dashed #cccccc;
align:left;
text-align:center;
background-color: #DDFFD7;
}

#picBox {
float:left;
width:200px;
}

#textBox {
float:right;
width:250px;
margin:-5px 0 0 0;
}

 

See guys you have created a monster now... I'll be at this all day

 

p.s I would have edited my last post, but the time had expired

[BAJI26]

You could probably do something like:

 

{if $product.id=' '}<img src="images.png" alt=""> {/if}

 

I think product.id is the productid if someone can verify.

[ChrisGooding]

Where? and what for?

 

Cheers

[Zorro67]

Hi Chris, looking good.

 

you might want to check the height of your image in gid=6; it looks like its streched down a bit, compared to your logo.

 

thanks also to hoosierweb for the <div> code syntax.

 

Cheers

[BAJI26]

Where? and what for?

 

Cheers

 

I thought someone asked how to make different description images show on different products.

[hoosierweb]

yes.. you only need to do that on the product description html box.. no special coding required..

 

our add on code just changes the way the product description and pricing/buttons are laid out

[BAJI26]

True... sorry!

[ChrisGooding]

Yes, but it did help.

 

I now have a problem, whcih appears to be caused by the changes I have made....

 

although the products are displaying EXACTLY how I want them to when looking at the cart view, when I click the order now button I get this :-

 

https://www.xtrgameservers.com/services/cart.php?a=add&pid=0000000047

 

I knew it was going too well lol

 

Any ideas on what I should be changing, as it appears to be using the same info I have just changed, so if I change it, I lose the layout I want on the cart page

 

Thnaks again.

[BAJI26]

Isn't that not the product id there, I went through the shopping proccess up to the registration.

[ChrisGooding]

If you go from here - https://www.xtrgameservers.com/services/cart.php?gid=0000000006

 

and click the order now button, thats what takes you to the page I am having problems with.

 

Actually as Im typing I have had a thought....and tested my suspicion.

 

I am using firefox, and after chacking it on IE, it displays correctly.

 

So it seems to be an issue with how FF is displaying the page

[BAJI26]

I just tried it in FF and compared to IE7 its the same except the registration box is alittle bigger in FF but its just the .css that would need adjusting. I think!