X-Cart forums - Rearranging Product Detail Page

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

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

- - Rearranging Product Detail Page (https://forum.x-cart.com/showthread.php?t=6972)

Rearranging Product Detail Page

Hey there,

I have a site I am working on that I would like to rearrange the product detail page a bit. His photos are really too big to be setup as it is but I am having a hard time changing the code -- it does bad things....

http://www.toofishy.com/customer/product.php?productid=19461&cat=0&page=

I would like to have it just like it is except have the photo and "save" star on one line and then have all of the other information below it; giving the photo more room. Can anyone help me out? Here is the current code:

Code:

{* $Id: product.tpl,v 1.78.2.2 2003/12/16 12:13:32 svowl Exp $ *}

{include file="check_product_options_js.tpl"}

{include file="location.tpl"}

{if $product.product_type eq "C"}

{include file="modules/Product_Configurator/pconf_customer_product.tpl"}

{else}

{capture name=dialog}

<table border=0 width=100%>

<form name=orderform method=post action="cart.php?mode=add">

<tr>

<td valign=top align=left rowspan=2 width=100>

{include file="product_thumbnail.tpl" productid=$product.productid image_x=$product.image_x image_y=$product.image_y product=$product.product tmbn_url=$product.tmbn_url}

</td>

<td valign=top>

{if $product.fulldescr ne ""}{$product.fulldescr}{else}{$product.descr}{/if}








<table width=100% cellpadding=0 cellspacing=0 border=0>

<tr><td colspan=2><font class=ProductDetailsTitle>{$lng.lbl_details}</font></td></tr>

<tr><td class=Line height="1" colspan=2>[img]{$ImagesDir}/spacer.gif[/img]</td></tr>

<tr><td colspan=2></td></tr>

{if $config.Appearance.show_in_stock eq "Y" and $config.General.unlimited_products ne "Y" and $product.distribution eq ""}

<tr><td width=30%>{$lng.lbl_quantity}</td><td nowrap>{if $product.avail gt 0}{$product.avail}{else}{$lng.txt_no}{/if} {$lng.txt_items_available}</td></tr>

{/if}

{if $product.weight ne "0.00"}<tr><td width=30%>{$lng.lbl_weight}</td><td nowrap>{$product.weight} {$config.General.weight_symbol}</td></tr>{/if}

{if $active_modules.Extra_Fields ne ""}

{include file="modules/Extra_Fields/product.tpl"}

{/if}

{if $active_modules.Subscriptions ne "" and $subscription}

{include file="modules/Subscriptions/subscription_info.tpl"}

{else}

<tr><td class=ProductPriceConverting>{$lng.lbl_price}:</td>

<td>

{if $product.price ne 0}

<font class=ProductDetailsTitle>{include file="currency.tpl" value=$product.price}</font><font class=MarketPrice> {include file="customer/main/alter_currency_value.tpl" alter_currency_value=$product.price}</font>{if $config.Taxes.use_vat eq "Y" and $product.vat gt "0"}, {$lng.lbl_including_vat} {$product.vat}%{/if}

{else}

<input type=text size=7 name=price>

{/if}

</td>

</tr>

{/if}

</table>








<table border=0 width=100% cellpadding=0 cellspacing=0>

<tr><td colspan=2>

<font class=ProductDetailsTitle>{$lng.lbl_options}</font>

</td></tr>

<tr><td class=Line height="1" colspan=2>[img]{$ImagesDir}/spacer.gif[/img]</td></tr>

<tr><td colspan=2></td></tr>

{if $active_modules.Product_Options ne ""}

{ include file="modules/Product_Options/customer_options.tpl"}

{/if}

<tr><td height=25 width=30%>{$lng.lbl_quantity}{if $product.min_amount gt 1}

<FONT class=ProductDetailsTitle>{$lng.txt_need_min_amount} {$product.min_amount} {$lng.lbl_items}</FONT>{/if}</td>

<td>

{if $config.General.unlimited_products eq "N" and ($product.avail le 0 or $product.avail lt $product.min_amount)}

{$lng.txt_out_of_stock}

{else}

{if $config.General.unlimited_products eq "Y"}

{math equation="x+1" assign="mq" x=$config.Appearance.max_select_quantity}

{else}

{math equation="x/y" x=$config.Appearance.max_select_quantity y=$product.min_amount assign="tmp"}

{if $tmp<2}

{assign var="minamount" value=$product.min_amount}

{else}

{assign var="minamount" value=0}

{/if}

{math equation="min(maxquantity+minamount, productquantity)+1" assign="mq" maxquantity=$config.Appearance.max_select_quantity minamount=$product.min_amount productquantity=$product.avail}

{/if}

{if $product.distribution eq ""}

<select name=amount>

{if $product.min_amount le 1}

{assign var="start_quantity" value=1}

{else}

{assign var="start_quantity" value=$product.min_amount}

{/if}

{section name=quantity loop=$mq start=$start_quantity}

<option value="{%quantity.index%}" {if $smarty.get.quantity eq %quantity.index%}selected{/if}>{%quantity.index%}</option>

{/section}

</select>

{else}

<font class=ProductDetailsTitle>1</font><input type=hidden name=amount value=1> {$lng.txt_product_downloadable}

{/if}

{/if}

</td></tr>

<tr><td colspan=2>

<input type=hidden name=mode value=add>

{include file="customer/main/product_prices.tpl"}

{if $config.General.unlimited_products eq "Y" or ($product.avail gt 0 and $product.avail ge $product.min_amount)}

{if $js_enabled}






{if $smarty.get.pconf ne ""}

<INPUT type=hidden name="slot" value="{$smarty.get.slot}">

<INPUT type=hidden name="addproductid" value="{$product.productid}">

{include file="buttons/pconf_add_to_configuration.tpl" style="button"}








{/if}

{if $product.forsale ne "B"}

{include file="buttons/add_to_cart.tpl" style="button"}



{if $login ne "" and $active_modules.Wishlist ne ""}

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

{/if}

{else}

{$lng.txt_pconf_product_is_bundled}

{/if}

{else}

{include file="submit_wo_js.tpl" value=$lng.lbl_add_to_cart}

{/if}

{/if}



<input type=image src="{$ImagesDir}/null.gif" width=10 height=10 border=0 align=top>




</td>

</tr></table>

</td>

<td align=right valign=top width=60>

{if $product.list_price gt 0 and $product.price lt $product.list_price}<table border=0 width=60><tr><td width=55 height=56 class="SaveMoneyLabel" background="{$ImagesDir}/save_money.gif" align=center valign=middle>






{math equation="100-(price/lprice)*100" price=$product.price lprice=$product.list_price format="%d" assign=discount}

{ $discount }%

</td></tr></table>{/if}

</td>

</tr>

<input type=hidden name=productid value="{$product.productid}">

<input type=hidden name=cat value="{$smarty.get.cat|escape:"html"}">

<input type=hidden name=page value="{$smarty.get.page|escape:"html"}">

</form>

</table>

{/capture}

{include file="dialog.tpl" title=$product.producttitle content=$smarty.capture.dialog extra="width=100%"}

{/if}

{if $active_modules.Detailed_Product_Images ne ""}








{include file="modules/Detailed_Product_Images/product_images.tpl" }

{/if}

{if $active_modules.Upselling_Products ne ""}








{include file="modules/Upselling_Products/related_products.tpl" }

{/if}

{if $active_modules.Recommended_Products ne ""}








{include file="modules/Recommended_Products/recommends.tpl" }

{/if}

{if $active_modules.Customer_Reviews ne ""}








{include file="modules/Customer_Reviews/vote_reviews.tpl" }

{/if}

I appreciate any help, this is making me crazy! 8O

Try this, just did it quickly, haven't tested it yet, it should put the picture and star above everything else, description below.

Might work might not, if it does it'll put you on the right track :wink:

Code:

{* $Id: product.tpl,v 1.78.2.2 2003/12/16 12:13:32 svowl Exp $ *} 

{include file="check_product_options_js.tpl"} 

{include file="location.tpl"} 

{if $product.product_type eq "C"} 

{include file="modules/Product_Configurator/pconf_customer_product.tpl"} 

{else} 

{capture name=dialog} 

<table border=0 width=100%>

  <form name=orderform method=post action="cart.php?mode=add">

    <tr> 

      <td valign=top>{include file="product_thumbnail.tpl" productid=$product.productid 

        image_x=$product.image_x image_y=$product.image_y product=$product.product 

        tmbn_url=$product.tmbn_url} {if $product.list_price gt 0 and $product.price 

        lt $product.list_price} 

        <table border=0 width=60>

          <tr> 

            <td width=55 height=56 class="SaveMoneyLabel" background="{$ImagesDir}/save_money.gif" align=center valign=middle> 

              




              {math equation="100-(price/lprice)*100" price=$product.price lprice=$product.list_price 

              format="%d" assign=discount} { $discount }% </td>

          </tr>

        </table>

        {/if} </td>

    </tr>

    <tr> 

      <td valign=top> {if $product.fulldescr ne ""}{$product.fulldescr}{else}{$product.descr}{/if} 

        

 <table width=100% cellpadding=0 cellspacing=0 border=0>

          <tr> 

            <td colspan=2><font class=ProductDetailsTitle>{$lng.lbl_details}</font></td>

          </tr>

          <tr> 

            <td class=Line height="1" colspan=2>[img]{$ImagesDir}/spacer.gif[/img]</td>

          </tr>

          <tr> 

            <td colspan=2></td>

          </tr>

          {if $config.Appearance.show_in_stock eq "Y" and $config.General.unlimited_products 

          ne "Y" and $product.distribution eq ""} 

          <tr> 

            <td width=30%>{$lng.lbl_quantity}</td>

            <td nowrap>{if $product.avail gt 0}{$product.avail}{else}{$lng.txt_no}{/if} 

              {$lng.txt_items_available}</td>

          </tr>

          {/if} {if $product.weight ne "0.00"} 

          <tr> 

            <td width=30%>{$lng.lbl_weight}</td>

            <td nowrap>{$product.weight} {$config.General.weight_symbol}</td>

          </tr>

          {/if} {if $active_modules.Extra_Fields ne ""} {include file="modules/Extra_Fields/product.tpl"} 

          {/if} {if $active_modules.Subscriptions ne "" and $subscription} {include 

          file="modules/Subscriptions/subscription_info.tpl"} {else} 

          <tr> 

            <td class=ProductPriceConverting>{$lng.lbl_price}:</td>

            <td> {if $product.price ne 0} <font class=ProductDetailsTitle>{include 

              file="currency.tpl" value=$product.price}</font><font class=MarketPrice> 

              {include file="customer/main/alter_currency_value.tpl" alter_currency_value=$product.price}</font>{if 

              $config.Taxes.use_vat eq "Y" and $product.vat gt "0"}, {$lng.lbl_including_vat} 

              {$product.vat}%{/if} {else} 

              <input type=text size=7 name=price>

              {/if} </td>

          </tr>

          {/if} 

        </table>

        

 <table border=0 width=100% cellpadding=0 cellspacing=0>

          <tr> 

            <td colspan=2> <font class=ProductDetailsTitle>{$lng.lbl_options}</font> 

            </td>

          </tr>

          <tr> 

            <td class=Line height="1" colspan=2>[img]{$ImagesDir}/spacer.gif[/img]</td>

          </tr>

          <tr> 

            <td colspan=2></td>

          </tr>

          {if $active_modules.Product_Options ne ""} { include file="modules/Product_Options/customer_options.tpl"} 

          {/if} 

          <tr> 

            <td height=25 width=30%>{$lng.lbl_quantity}{if $product.min_amount 

              gt 1}

 <FONT class=ProductDetailsTitle>{$lng.txt_need_min_amount} 

              {$product.min_amount} {$lng.lbl_items}</FONT>{/if}</td>

            <td> {if $config.General.unlimited_products eq "N" and ($product.avail 

              le 0 or $product.avail lt $product.min_amount)} {$lng.txt_out_of_stock} 

              {else} {if $config.General.unlimited_products eq "Y"} {math equation="x+1" 

              assign="mq" x=$config.Appearance.max_select_quantity} {else} {math 

              equation="x/y" x=$config.Appearance.max_select_quantity y=$product.min_amount 

              assign="tmp"} {if $tmp<2} {assign var="minamount" value=$product.min_amount} 

              {else} {assign var="minamount" value=0} {/if} {math equation="min(maxquantity+minamount, 

              productquantity)+1" assign="mq" maxquantity=$config.Appearance.max_select_quantity 

              minamount=$product.min_amount productquantity=$product.avail} {/if} 

              {if $product.distribution eq ""} 

              <select name=amount> 

{if $product.min_amount le 1} 

{assign var="start_quantity" value=1} 

{else} 

{assign var="start_quantity" value=$product.min_amount} 

{/if} 

{section name=quantity loop=$mq start=$start_quantity} 

                <option value="{%quantity.index%}" {if $smarty.get.quantity eq %quantity.index%}selected{/if}>{%quantity.index%}</option> 

{/section} 

              </select>

              {else} <font class=ProductDetailsTitle>1</font> <input type=hidden name=amount value=1>

              {$lng.txt_product_downloadable} {/if} {/if} </td>

          </tr>

          <tr> 

            <td colspan=2> <input type=hidden name=mode value=add>

              {include file="customer/main/product_prices.tpl"} {if $config.General.unlimited_products 

              eq "Y" or ($product.avail gt 0 and $product.avail ge $product.min_amount)} 

              {if $js_enabled} 




              {if $smarty.get.pconf ne ""} 

              <INPUT type=hidden name="slot" value="{$smarty.get.slot}"> <INPUT type=hidden name="addproductid" value="{$product.productid}"> 

              <a href="javascript:if (FormValidation()) {ldelim}document.orderform.productid.value='{$smarty.get.pconf}';document.orderform.action='pconf.php';document.orderform.submit(){rdelim}">{include 

              file="buttons/pconf_add_to_configuration.tpl" style="button"}</a> 

              

 




              {/if} {if $product.forsale ne "B"} <a href="javascript:if (FormValidation()) document.orderform.submit()">{include 

              file="buttons/add_to_cart.tpl" style="button"}</a>  

              {if $login ne "" and $active_modules.Wishlist ne ""} {include file="customer/add2wl.tpl"} 

              {/if} {else} {$lng.txt_pconf_product_is_bundled} {/if} {else} {include 

              file="submit_wo_js.tpl" value=$lng.lbl_add_to_cart} {/if} {/if} 

              

 <input type=image src="{$ImagesDir}/null.gif" width=10 height=10 border=0 align=top> 

              

 </td>

          </tr>

        </table></td>

    </tr>

    <input type=hidden name=productid value="{$product.productid}">

    <input type=hidden name=cat value="{$smarty.get.cat|escape:"html"}">

    <input type=hidden name=page value="{$smarty.get.page|escape:"html"}">

  </form>

</table> 

{/capture} 

{include file="dialog.tpl" title=$product.producttitle content=$smarty.capture.dialog extra="width=100%"} 

{/if} 

{if $active_modules.Detailed_Product_Images ne ""} 



 

{include file="modules/Detailed_Product_Images/product_images.tpl" } 

{/if} 

{if $active_modules.Upselling_Products ne ""} 



 

{include file="modules/Upselling_Products/related_products.tpl" } 

{/if} 

{if $active_modules.Recommended_Products ne ""} 



 

{include file="modules/Recommended_Products/recommends.tpl" } 

{/if} 

{if $active_modules.Customer_Reviews ne ""} 



 

{include file="modules/Customer_Reviews/vote_reviews.tpl" } 

{/if}

Thanks Groovico! I had to make a tweak or two, the star ended up under the product, but I got it working!