Ajax Order Form

[inthanet]

Hi there,

I wonder how I can show the product description after the product is selected.

 

Thanks for any information which bring me on the right way

[disgruntled]

there is a thread on this but i cant remember where it is. so here is how

 

replace whmcs/order/procuts.tpl with the following

 

<br />
<table width="90%" cellspacing="0" cellpadding="0" align="center">
<tr>
	<div class="orderbox">
		<td>
			{foreach from=$products item=product key=num}
				<input type="radio" name="pid" value="{$product.pid}" id="pid{$product.pid}" onclick="loadproductconfig('{$product.pid}')"{if $product.qty eq "0"} disabled{/if} class="buttongo" /> <label for="pid{$product.pid}"><b>{$product.name}</b></label>
				{if $product.qty!=""}<em>({$product.qty} {$LANG.orderavailable})</em>{/if}<br>
				{if $product.description}<em>{$product.description}</em><br>{/if}
				{if $num % 2}</td></tr><tr><td>{/if}
			{/foreach}
		</td>
	</div>
</tr>
</table>

 

just rename your existing products.tpl and create a new file, that way you have a back up..

 

 

in rereading i am thinking its not what your meaning but if it is glad to help lol.

 

Anyway id your wanting to show the info only after they select then you need to use more ajax with the above template. You need to capture the onclick event and have an invisible element that becomes visible on the capture of the onclick you would also need to make sure it hides the description and opens a new on should another product be clicked

Edited September 15, 2010 by disgruntled

[WilliamR]

Hi,

I tried this but there are a few products that load on the right side of the screen under the floating summary box, anyway of correcting ths?

 

regards

William

[chrismfz]

there is a thread on this but i cant remember where it is. so here is how

 

replace whmcs/order/procuts.tpl with the following

 

<br />
<table width="90%" cellspacing="0" cellpadding="0" align="center">
   <tr>
       <div class="orderbox">
           <td>
               {foreach from=$products item=product key=num}
                   <input type="radio" name="pid" value="{$product.pid}" id="pid{$product.pid}" onclick="loadproductconfig('{$product.pid}')"{if $product.qty eq "0"} disabled{/if} class="buttongo" /> <label for="pid{$product.pid}"><b>{$product.name}</b></label>
                   {if $product.qty!=""}<em>({$product.qty} {$LANG.orderavailable})</em>{/if}<br>
                   {if $product.description}<em>{$product.description}</em><br>{/if}
                   {if $num % 2}</td></tr><tr><td>{/if}
               {/foreach}
           </td>
       </div>
   </tr>
</table>

just rename your existing products.tpl and create a new file, that way you have a back up..

 

 

in rereading i am thinking its not what your meaning but if it is glad to help lol.

 

Anyway id your wanting to show the info only after they select then you need to use more ajax with the above template. You need to capture the onclick event and have an invisible element that becomes visible on the capture of the onclick you would also need to make sure it hides the description and opens a new on should another product be clicked

 

This will show all descriptions for all products in the list.

 

Is there any way to show the product description after the selection of one product ?

So, only the selected product will show its description right after the list and before the domain options ?

[chrismfz]

Nevermind, I couldn't make it work but at least I got rid

all the <table> junk and made it all with CSS containers.

 

At least it's pretty now

[rperez]

Anyone else cart summary off set ? if i open my browser FULL it lines up nice and doesnt cover anything up, if I semi open my browser screen, the SUMMARY box covers some of the menu. Any1 know how to fix?

[GoRhY]

For everyone who wants to show the description ONLY of the selected product, I have modified the code with a friend, here's the result:

 

Hiding options as you select other:

 

<br />
<table width="90%" cellspacing="0" cellpadding="0" align="center">
 <tr>
{foreach from=$products item=product key=num}
   <td width="50%" valign="top">
	<input type="radio" name="pid" value="{$product.pid}" id="pid{$product.pid}" {if $product.qty!="" && $product.qty<=0}disabled{/if} onclick="loadproductconfig('{$product.pid}');$.each($('.descripcion'),function(k,v){literal}{$(v).hide();}{/literal});$('#descripcion{$product.pid}').show()"><label for="pid{$product.pid}">{$product.name}{if $product.qty!="" && $product.qty<=0} ({$LANG.outofstock}){/if} {if $product.description}<div id="descripcion{$product.pid}" class="descripcion">{$product.description}</div><br>{/if}</label>
</td>
   {if $num % 2}</tr><tr>{/if}
{/foreach}
 </tr>
</table>

 

With no hiding:

 

<br />
<table width="90%" cellspacing="0" cellpadding="0" align="center">
 <tr>
{foreach from=$products item=product key=num}
   <td width="50%" valign="top">
	<input type="radio" name="pid" value="{$product.pid}" id="pid{$product.pid}" {if $product.qty!="" && $product.qty<=0}disabled{/if} onclick="loadproductconfig('{$product.pid}');$('#descripcion{$product.pid}').show()"><label for="pid{$product.pid}">{$product.name}{if $product.qty!="" && $product.qty<=0} ({$LANG.outofstock}){/if} {if $product.description}<div id="descripcion{$product.pid}" class="descripcion">{$product.description}</div><br>{/if}</label>
</td>
   {if $num % 2}</tr><tr>{/if}
{/foreach}
 </tr>
</table>

 

You have to add this to the style.css file:

 

.descripcion{

display:none;

}

[rperez]

For everyone who wants to show the description ONLY of the selected product, I have modified the code with a friend, here's the result:

 

Hiding options as you select other:

 

<br />
<table width="90%" cellspacing="0" cellpadding="0" align="center">
 <tr>
{foreach from=$products item=product key=num}
   <td width="50%" valign="top">
	<input type="radio" name="pid" value="{$product.pid}" id="pid{$product.pid}" {if $product.qty!="" && $product.qty<=0}disabled{/if} onclick="loadproductconfig('{$product.pid}');$.each($('.descripcion'),function(k,v){literal}{$(v).hide();}{/literal});$('#descripcion{$product.pid}').show()"><label for="pid{$product.pid}">{$product.name}{if $product.qty!="" && $product.qty<=0} ({$LANG.outofstock}){/if} {if $product.description}<div id="descripcion{$product.pid}" class="descripcion">{$product.description}</div><br>{/if}</label>
</td>
   {if $num % 2}</tr><tr>{/if}
{/foreach}
 </tr>
</table>

 

With no hiding:

 

<br />
<table width="90%" cellspacing="0" cellpadding="0" align="center">
 <tr>
{foreach from=$products item=product key=num}
   <td width="50%" valign="top">
	<input type="radio" name="pid" value="{$product.pid}" id="pid{$product.pid}" {if $product.qty!="" && $product.qty<=0}disabled{/if} onclick="loadproductconfig('{$product.pid}');$('#descripcion{$product.pid}').show()"><label for="pid{$product.pid}">{$product.name}{if $product.qty!="" && $product.qty<=0} ({$LANG.outofstock}){/if} {if $product.description}<div id="descripcion{$product.pid}" class="descripcion">{$product.description}</div><br>{/if}</label>
</td>
   {if $num % 2}</tr><tr>{/if}
{/foreach}
 </tr>
</table>

 

You have to add this to the style.css file:

 

.descripcion{

display:none;

}

 

Can you help me with my request?