HI all...I hated the fact that the Product details and options were on top of eachother - it was wasted space to me. I thought I'd post what my solution was that seems to work pretty well for me. You can check it out for an example here:
http://sustainableseedco.com/Golden-Self-Blanching-Celery-Seed.html
Code:
<table width="100%" border="0">
<tr>
<td width="50%" valign="top">
<table cellspacing="0" class="product-properties" summary="{$lng.lbl_description|escape}">
<tr>
<td colspan="3" class="product-subtitle">
<div>{$lng.lbl_details}</div>
</td>
</tr>
<tr>
<td class="property-name">{$lng.lbl_sku}</td>
<td class="property-value" id="product_code" colspan="2">{$product.productcode|escape}</td>
</tr>
{if $config.Appearance.show_in_stock eq "Y" and $config.General.unlimited_products ne "Y" and $product.distribution eq ""}
<tr>
<td class="property-name">{$lng.lbl_in_stock}</td>
<td class="property-value product-quantity-text" colspan="2">
{if $product.avail gt 0}
{$lng.txt_items_available|substitute:"items":$product.avail}
{else}
{$lng.lbl_no_items_available}
{/if}
</td>
</tr>
{/if}
{if $product.weight ne "0.00" or $variants ne ''}
<tr id="product_weight_box"{if $product.weight eq '0.00'} style="display: none;"{/if}>
<td class="property-name">{$lng.lbl_weight}</td>
<td class="property-value" colspan="2">
<span id="product_weight">{$product.weight|formatprice}</span> {$config.General.weight_symbol}
</td>
</tr>
{/if}
{if $active_modules.Extra_Fields}
{include file="modules/Extra_Fields/product.tpl"}
{/if}
{if $active_modules.Feature_Comparison}
{include file="modules/Feature_Comparison/product.tpl"}
{/if}
{if $active_modules.Subscriptions and $subscription}
{include file="modules/Subscriptions/subscription_info.tpl"}
{else}
<tr class="separator">
<td colspan="3"> </td>
</tr>
{if $product.appearance.has_market_price and $product.appearance.market_price_discount gt 0}
<tr>
<td class="property-name product-taxed-price">{$lng.lbl_market_price}:</td>
<td class="property-value product-taxed-price" colspan="2">{include file="currency.tpl" value=$product.list_price}</td>
</tr>
{/if}
<tr>
<td class="property-name product-price" valign="top">{$lng.lbl_our_price}:</td>
<td class="property-value" valign="top" colspan="2">
{if $product.taxed_price ne 0 or $variant_price_no_empty}
<span class="product-price-value">{include file="currency.tpl" value=$product.taxed_price tag_id="product_price"}</span>
<span class="product-market-price">{include file="customer/main/alter_currency_value.tpl" alter_currency_value=$product.taxed_price tag_id="product_alt_price"}</span>
{if $product.taxes}
<br />{include file="customer/main/taxed_price.tpl" taxes=$product.taxes}
{/if}
{else}
<input type="text" size="7" name="price" />
{/if}
</td>
</tr>
{if $product.forsale ne "B"}
<tr>
<td colspan="3">{include file="customer/main/product_prices.tpl"}</td>
</tr>
{/if}
{/if}
</table>
</td>
<td width="50%" valign="top">
<table cellspacing="0" class="product-properties" summary="{$lng.lbl_description|escape}">
<tr>
<td colspan="3" class="product-subtitle">
<div>{$lng.lbl_options}</div>
</td>
</tr>
<tr>
<td colspan="2">
{* Determine if product has variants *}
{if $variants}
<table class=inlineSpec width="100%">
{* Build table header *}
<tr class="specHeader">
{* Loop to handle multiple variant names *}
{foreach from=$product_options item=v}
{if $v.is_modifier eq ''}<TD>{if $usertype eq "A"}{$v.class}{else}{$v.classtext|default:$v.class}{/if}</TD>{/if}
{/foreach}
<td >{$lng.lbl_price}</td>
</tr>
{* Build table rows *}
{foreach item=variant from=$variants}
{assign var=exception value="0"}
{foreach key=ExceptionKey item=exceptionList from=$product_options_ex}
{assign var=found value=0}
{assign var=total value=0}
{foreach item=classException from=$exceptionList}
{math assign=total equation="x + 1" x=$total}
{foreach name=l1 item=variantOpt from=$variant.options}
{if $variantOpt.optionid eq $classException.optionid}{math assign=found equation="x + 1" x=$found}{/if}
{/foreach}
{/foreach}
{if $found eq $total}{assign var=exception value="1"}{/if}
{/foreach}
{if $exception ne "1"}
<tr class="specItemHeader{cycle values="1,2"}">
{* Loop to handle multiple variants *}
{foreach name=foo item=variantOpt key=key from=$product_options}
{if $variantOpt.is_modifier eq ''}
<TD>
{foreach name=bar item=varOpt from=$variant.options}
{if $varOpt.classid == $variantOpt.classid}{$varOpt.option_name}{/if}
{/foreach}
</TD>
{/if}
{/foreach}
<td>{include file="currency.tpl" value=$variant.price}</td>
</tr>
{/if}
{/foreach}
</table>
{/if}
{* END: Determine if product has variants *}
</td>
</tr>
{if $product.forsale neq "B" or ($product.forsale eq "B" and $smarty.get.pconf ne "" and $active_modules.Product_Configurator)}
{if $active_modules.Product_Options ne ""}
{include file="modules/Product_Options/customer_options.tpl" disable=$lock_options}
{/if}
<tr class="quantity-row">
{if $product.appearance.empty_stock and ($variants eq '' or ($variants ne '' and $product.avail le 0))}
<td class="property-name product-input">{$lng.lbl_quantity}</td>
<td class="property-value" colspan="2">
<script type="text/javascript">
//<![CDATA[
var min_avail = 1;
var avail = 0;
var product_avail = 0;
//]]>
</script>
<strong>{$lng.txt_out_of_stock}</strong>
</td>
{elseif not $product.appearance.force_1_amount and $product.forsale ne "B"}
<td class="property-name product-input">
{if $config.Appearance.show_in_stock eq "Y" and not $product.appearance.quantity_input_box_enabled and $config.General.unlimited_products ne 'Y'}
{$lng.lbl_quantity_x|substitute:quantity:$product.avail}
{else}
{$lng.lbl_quantity}
{/if}
</td>
<td class="property-value" colspan="2">
<script type="text/javascript">
//<![CDATA[
var min_avail = {$product.appearance.min_quantity|default:1};
var avail = {$product.appearance.max_quantity|default:1};
var product_avail = {$product.avail|default:"0"};
//]]>
</script>
<input type="text" id="product_avail_input" name="amount" maxlength="11" size="6" onchange="javascript: return check_quantity_input_box(this);" value="{$smarty.get.quantity|default:$product.appearance.min_quantity}"{if not $product.appearance.quantity_input_box_enabled} disabled="disabled" style="display: none;"{/if}/>
{if $product.appearance.quantity_input_box_enabled and $config.Appearance.show_in_stock eq "Y" and $config.General.unlimited_products ne 'Y'}
<span id="product_avail_text" class="quantity-text">{$lng.lbl_product_quantity_from_to|substitute:"min":$product.appearance.min_quantity:"max":$product.avail}</span>
{/if}
<select id="product_avail" name="amount"{if $active_modules.Product_Options ne '' and ($product_options ne '' or $product_wholesale ne '')} onchange="javascript: check_wholesale(this.value);"{/if}{if $product.appearance.quantity_input_box_enabled} disabled="disabled" style="display: none;"{/if}>
<option value="{$product.appearance.min_quantity}"{if $smarty.get.quantity eq $product.appearance.min_quantity} selected="selected"{/if}>{$product.appearance.min_quantity}</option>
{if not $product.appearance.quantity_input_box_enabled}
{section name=quantity loop=$product.appearance.loop_quantity start=$product.appearance.min_quantity}
{if %quantity.index% ne $product.appearance.min_quantity}
<option value="{%quantity.index%}"{if $smarty.get.quantity eq %quantity.index%} selected="selected"{/if}>{%quantity.index%}</option>
{/if}
{/section}
{/if}
</select>
</td>
{else}
<td class="property-name product-input">{$lng.lbl_quantity}</td>
<td class="property-value" colspan="2">
<script type="text/javascript">
//<![CDATA[
var min_avail = 1;
var avail = 1;
var product_avail = 1;
//]]>
</script>
<span class="product-one-quantity">1</span>
<input type="hidden" name="amount" value="1" />
{if $product.distribution ne ""}
{$lng.txt_product_downloadable}
{/if}
</td>
{/if}
</tr>
{if $product.min_amount gt 1}
<tr>
<td colspan="3" class="property-value product-min-amount">{$lng.txt_need_min_amount|substitute:"items":$product.min_amount}</td>
</tr>
{/if}
{/if}
</table>
</td>
</tr>
</table>
FAQ
12-05-2010, 03:49 PM
Details box and Options box inline with eachother
