Product price align

Davidh · #1 07-08-2006, 09:36 AM

Just finishing of the template for our store when I noticed a slight align problem on the product page.
Its only a minor problem although but id like it fixed.

Below is a link to a product on the site, ive moved the image above the text as we use large images and it didnt look right with the normal xcart layout.
if you look at the price its aligned to the center and no matter what ive tried nothing works.

any suggestions?

http://chaddesdenanglingcentre.co.uk/store/product.php?productid=143&cat=3&page=1

robf · #2 07-11-2006, 10:53 AM

Hey there, if you posted your product.tpl code I would take a look and see if I could help you.

Davidh · #3 07-12-2006, 04:21 AM

would be an idea would'nt it

here you go, much appreciated

Code:

{* $Id: product.tpl,v 1.96.2.25 2005/11/17 11:40:11 max Exp $ *}
{if $active_modules.Special_Offers}
{include file="modules/Special_Offers/customer/product_offers_short_list.tpl" product=$product}
{/if}
{include file="form_validation_js.tpl"}
{if $product.product_type eq "C" && $active_modules.Product_Configurator}
{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" onsubmit="javascript: return FormValidation();">
<TR>
<TD valign="top" align="left" rowspan="2" width="100">

</TD>
<TD valign="top" width="100%">
  <p align="center">{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 id="product_thumbnail"} </p>
  <p align="left">{if $product.fulldescr ne ""}{$product.fulldescr}{else}{$product.descr}{/if} </p>
  


<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><SPAN id="product_avail_txt">{if $product.avail gt 0}{$product.avail}</SPAN>{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><SPAN id="product_weight">{$product.weight}</SPAN> {$config.General.weight_symbol}</TD></TR>{/if}
{if $active_modules.Extra_Fields ne ""}
{include file="modules/Extra_Fields/product.tpl"}
{/if}
{if $active_modules.Feature_Comparison ne ""}
{include file="modules/Feature_Comparison/product.tpl"}
{/if}
{if $active_modules.Subscriptions ne "" and $subscription}
{include file="modules/Subscriptions/subscription_info.tpl"}
{else}
<TR><TD class="ProductPriceConverting" valign="top">{$lng.lbl_price}:</TD>
<TD valign="top">
{if $product.taxed_price ne 0 || $variants ne ''}
<FONT class="ProductDetailsTitle"><SPAN id="product_price">{include file="currency.tpl" value=$product.taxed_price}</SPAN></FONT><FONT class="MarketPrice"> <SPAN id="product_alt_price">{include file="customer/main/alter_currency_value.tpl" alter_currency_value=$product.taxed_price}</SPAN></FONT>
{if $product.taxes}
{include file="customer/main/taxed_price.tpl" taxes=$product.taxes}{/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) and $variants eq ''}
<SCRIPT type="text/javascript" language="JavaScript 1.2">
var min_avail = 1;
var avail = 0;
var product_avail = 0;
</SCRIPT>
{$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=1}
{/if}
{math equation="min(maxquantity+minamount, productquantity+1)" assign="mq" maxquantity=$config.Appearance.max_select_quantity minamount=$minamount productquantity=$product.avail}
{/if}
{if $product.distribution eq "" and !($active_modules.Subscriptions ne "" and $subscription)}
{if $product.min_amount le 1}
{assign var="start_quantity" value=1}
{else}
{assign var="start_quantity" value=$product.min_amount}
{/if}
<SCRIPT type="text/javascript" language="JavaScript 1.2">
var min_avail = {$start_quantity|default:1};
var avail = {$mq|default:1}-1;
var product_avail = {$product.avail|default:"0"};
</SCRIPT>
<SELECT id="product_avail" name="amount"{if $active_modules.Product_Options ne '' && $product_options ne ''} onchange="check_options();"{/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}
<SCRIPT type="text/javascript" language="JavaScript 1.2">
var min_avail = 1;
var avail = 1;
var product_avail = 1;
</SCRIPT>
<FONT class="ProductDetailsTitle">1</FONT><INPUT type="hidden" name="amount" value="1"> {if $product.distribution ne ""}{$lng.txt_product_downloadable}{/if}
{/if}
{/if}
</TD></TR>
<TR><TD colspan="2">
<INPUT type="hidden" name="mode" value="add">
{if $variants eq ''}
{include file="customer/main/product_prices.tpl"}
{/if}
{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/button.tpl" button_title=$lng.lbl_pconf_add_to_configuration style="button" href="javascript:if (FormValidation()) `$ldelim`document.orderform.productid.value='`$smarty.get.pconf`';document.orderform.action='pconf.php';document.orderform.submit()`$rdelim`"}



{/if}
{if $product.forsale ne "B"}
{include file="buttons/add_to_cart.tpl" style="button" href="javascript: if(FormValidation()) document.orderform.submit();"}

{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}
{if $active_modules.Feature_Comparison ne ""}
{include file="modules/Feature_Comparison/product_buttons.tpl"}
{/if}



</TD>
</TR></TABLE></TD>
<TD align="right" valign="top" width="60">
{if $product.taxed_price gt 0 and $product.list_price gt 0 and $product.taxed_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.taxed_price lprice=$product.list_price format="%3.0f" assign=discount}
<SPAN id="save_percent">{ $discount }</SPAN>%
</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.product 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}
{if $active_modules.Product_Options ne '' && $product_options ne ''}
<SCRIPT type="text/javascript" language="JavaScript 1.2">
check_options();
</SCRIPT>
{/if}

Davidh · #4 07-18-2006, 01:21 AM

Sorry to do a bump but dropped down quite far without reply

robf · #5 07-18-2006, 02:33 AM

Hey there, I'm sorry I didn't get back to you like I said I would, I completely forgot.

Ok, I checked out the code and here are a few things to try. This is the code I think you want to play with, its the cell that holds the 16.99.

Code:

<TD valign="top">
{if $product.taxed_price ne 0 || $variants ne ''}
<FONT class="ProductDetailsTitle"><SPAN id="product_price">{include file="currency.tpl" value=$product.taxed_price}</SPAN></FONT><FONT class="MarketPrice"> <SPAN id="product_alt_price">{include file="customer/main/alter_currency_value.tpl" alter_currency_value=$product.taxed_price}</SPAN></FONT>
{if $product.taxes}
{include file="customer/main/taxed_price.tpl" taxes=$product.taxes}{/if}
{else}
<INPUT type="text" size="7" name="price">
{/if}
</TD>

I would first try changing the first line <TD valign="top"> to <TD valign="top" align="left">

If that doesn't work try adding class="ProductPriceConverting to that same line instead of the align tag. Then open your skin1.css file and find the line that says .ProductPriceConverting and add, text-align: left;.

If that doesn't work we'll go farther, it can be hard to find small issues like this but if you keep going it will show up.

robf · #6 07-18-2006, 03:01 AM

me again, I was looking at your code harder and I don't think it was a centering problem, I re-did how the page was laid out, just copy this code and see how it looks, I have no way to test it as I'm running 4.1

You may have to change how wide the column is for price, option and quanity, they all have to be the same in order to see the difference on the screen that was the orginal problem, some were set to 30% and a few tables were layed out wrong. I set the width to 125px, you will see 125 4 times in the TD tag's, change them all the the width you want on screen. I think it will be close but hard to tell without posting it and playing.

Let me know how you make out.

Code:

{* $Id: product.tpl,v 1.96.2.25 2005/11/17 11:40:11 max Exp $ *}
{if $active_modules.Special_Offers}
{include file="modules/Special_Offers/customer/product_offers_short_list.tpl" product=$product}
{/if}
{include file="form_validation_js.tpl"}
{if $product.product_type eq "C" && $active_modules.Product_Configurator}
{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" onsubmit="javascript: return FormValidation();">
<TR>

<TD valign="top" width="100%">

<TABLE width="100%" cellpadding="0" cellspacing="0" border="0">
<TR><td colspan="2" align="center" style="padding-bottom: 15px;">{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 id="product_thumbnail"}</td>
<tr><td colspan="2" align="left" style="padding-bottom: 15px;">{if $product.fulldescr ne ""}{$product.fulldescr}{else}{$product.descr}{/if}</td></tr>
<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="125">{$lng.lbl_quantity}</TD><TD nowrap><SPAN id="product_avail_txt">{if $product.avail gt 0}{$product.avail}</SPAN>{else}{$lng.txt_no}{/if} {$lng.txt_items_available}</TD></TR>
{/if}
{if $product.weight ne "0.00"}<TR><TD width="125">{$lng.lbl_weight}</TD><TD nowrap><SPAN id="product_weight">{$product.weight}</SPAN> {$config.General.weight_symbol}</TD></TR>{/if}
{if $active_modules.Extra_Fields ne ""}
{include file="modules/Extra_Fields/product.tpl"}
{/if}
{if $active_modules.Feature_Comparison ne ""}
{include file="modules/Feature_Comparison/product.tpl"}
{/if}
{if $active_modules.Subscriptions ne "" and $subscription}
{include file="modules/Subscriptions/subscription_info.tpl"}
{else}
<TR><TD width="125" class="ProductPriceConverting" valign="top">{$lng.lbl_price}:</TD>
<TD valign="top">
{if $product.taxed_price ne 0 || $variants ne ''}
<FONT class="ProductDetailsTitle"><SPAN id="product_price">{include file="currency.tpl" value=$product.taxed_price}</SPAN></FONT><FONT class="MarketPrice"> <SPAN id="product_alt_price">{include file="customer/main/alter_currency_value.tpl" alter_currency_value=$product.taxed_price}</SPAN></FONT>
{if $product.taxes}
{include file="customer/main/taxed_price.tpl" taxes=$product.taxes}{/if}
{else}
<INPUT type="text" size="7" name="price">
{/if}
</TD>
</TR>
{/if}

<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="125">{$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) and $variants eq ''}
<SCRIPT type="text/javascript" language="JavaScript 1.2">
var min_avail = 1;
var avail = 0;
var product_avail = 0;
</SCRIPT>
{$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=1}
{/if}
{math equation="min(maxquantity+minamount, productquantity+1)" assign="mq" maxquantity=$config.Appearance.max_select_quantity minamount=$minamount productquantity=$product.avail}
{/if}
{if $product.distribution eq "" and !($active_modules.Subscriptions ne "" and $subscription)}
{if $product.min_amount le 1}
{assign var="start_quantity" value=1}
{else}
{assign var="start_quantity" value=$product.min_amount}
{/if}
<SCRIPT type="text/javascript" language="JavaScript 1.2">
var min_avail = {$start_quantity|default:1};
var avail = {$mq|default:1}-1;
var product_avail = {$product.avail|default:"0"};
</SCRIPT>
<SELECT id="product_avail" name="amount"{if $active_modules.Product_Options ne '' && $product_options ne ''} onchange="check_options();"{/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}
<SCRIPT type="text/javascript" language="JavaScript 1.2">
var min_avail = 1;
var avail = 1;
var product_avail = 1;
</SCRIPT>
<FONT class="ProductDetailsTitle">1</FONT><INPUT type="hidden" name="amount" value="1"> {if $product.distribution ne ""}{$lng.txt_product_downloadable}{/if}
{/if}
{/if}
</TD></TR>
<TR><TD colspan="2">
<INPUT type="hidden" name="mode" value="add">
{if $variants eq ''}
{include file="customer/main/product_prices.tpl"}
{/if}
{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/button.tpl" button_title=$lng.lbl_pconf_add_to_configuration style="button" href="javascript:if (FormValidation()) `$ldelim`document.orderform.productid.value='`$smarty.get.pconf`';document.orderform.action='pconf.php';document.orderform.submit()`$rdelim`"}



{/if}
{if $product.forsale ne "B"}
{include file="buttons/add_to_cart.tpl" style="button" href="javascript: if(FormValidation()) document.orderform.submit();"}

{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}
{if $active_modules.Feature_Comparison ne ""}
{include file="modules/Feature_Comparison/product_buttons.tpl"}
{/if}



</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.product 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}
{if $active_modules.Product_Options ne '' && $product_options ne ''}
<SCRIPT type="text/javascript" language="JavaScript 1.2">
check_options();
</SCRIPT>
{/if}

Davidh · #7 07-20-2006, 01:48 AM

Strange, in IE it sends the price even further to the right of the page.

Firefox works perfect pulls it next to the left how I wanted it too.

robf · #8 07-20-2006, 04:28 PM

ahh, that stinks.

I know I could fix the problem but without trying it myself we could be here a long time. I'm guessing your site it live as the changes aren't there for me to see. I don't think I can do much without access to your files, I think a lot of the formating code has to be moved to the CSS page to be more compatible, there's obviously a tag there IE doesn't like. If you want me to continue to help I suggest creating a temporary account to your FTP access so I can log in and change the files. If you want you can PM me the info.

Wish there was another way.