Display product attributes in two columns (side by side)

[DivaVocals]

I've seen a few posts here asking about this or something similar. I got some help from a few sources to get this working for me.. I thought I'd share my solution in case anyone else is looking for something similar. You need to set up the appropriate override for the tpl_modules_attributes.php file (includes/templates/YOUR_TEMPLATE/templates)

Product attributes by default appear in a vertical format based on the sort order for each attribute. For a few attributes, this is cool, but for more than a few attributes, it can make the product pages a little unwielding.. I needed to have attributes appear in two columns side by side. I wanted to keep this simple.. I figured that using the existing sort order features would allow me to use the admin controls to place the attributes where I wanted them to appear and the order they should appear in. Even numbered attributes appear in the left column, while odd numbered attributes appear on the right. (by number I mean the sort order number)

There is only one caveat.. I had a friend helping me, and I didn't want to bug him too much.. His orginal solution got me part way there, but didn't split the odd and even sort order numbers the way I wanted.. I figured out how to get his orginal solution to split the attributes between odd and even sort order numbers in two columns.. However, I couldn't figure our how to get attributes with sort order "1" to appear correctly.. (This attribute always appeared in the left column with the even numbered attributes) So I worked around this by having my attibute sort order start with "2" (so now I am skipping/not using "1" or "0" as a sort order), and it solves the problem.. Even sort order numbers appear on the left, and odd sort order numbers appear on the right. Oh I also have the form field appear below the label just to make the final layout a little neater looking.

Hope someone else finds this useful..

Display product attributes in two columns (display attributes side by side)

[DivaVocals]

One additional caveat.. The attributes will appear in the shopping cart in a vertical list with the even numbered attributes followed by the odd numbered attributes... For me this is fine.. Just wanted to let anyone using this know just in case.. I may one day look into adding a two column attribute display in the shopping cart too..

Attributes layout horizontal
Attributes layout two columns
Attributes layout side by side
Attributes layout pairs

[Website Rob]

Not sure how useful this coding will be but your sharing is appreciated.

Who knows, maybe somebody will run with it and create a "must have" module.

[DivaVocals]

It's very useful IMO when you have product with over 10 attributes. My client didn't like the way the product pages looked with 10+ attributes lined up in a vertical stack. (and I tended to agree with her)

Many folks seem happy with the attributes layout as is (perhaps you are one of those satisfied folks), but IMO, for products with lots of attributes, the vertical stack looks a bit uninviting.. I shared my solution because in looking for a solution to this layout issue here on this forum, I found other people looking for somthing similar.. I'm sure it will be useful for someone who is looking to to what I was trying to do..

[dave7777]

Thanks Diva
Havent tried it yet but just what I was looking for

[DivaVocals]

You are very welcome.. Happy to share!

[innovafire]

Sorry, but I need to revive this thread.

I tried the above solution, but it didn't work.

I have a listing of pizza toppings that I wanted to put into two columns. And below that I have a text box. All this solution did was make the text box appear to the right of the toppings. The toppings all remained in one column.

Does anybody else have a way to address this?

Chris

[solarflare]

I'm a Zen-Newbie, so don't shoot me.

I recently created a Santa Letter item in my store, which featured 20 different background choices. I had setup background as a radio button item, but it would work for checkbox groups too. Since I had images for each, I had the option of setting the rows & columns.

Not sure if it would help you. But pizza toppings could have images.

Sorry, but I need to revive this thread.

I tried the above solution, but it didn't work.

I have a listing of pizza toppings that I wanted to put into two columns. And below that I have a text box. All this solution did was make the text box appear to the right of the toppings. The toppings all remained in one column.

Does anybody else have a way to address this?

Chris

[innovafire]

Yeah, they could. But I don't have images for them and don't want t go to the trouble. I'm really surprised that the option would be limited to making columns only out of image attributes.

Anybody else got an idea on this?

[innovafire]

OK, here's the code for that file that should have created the two colum attributes (from the ZIP file above). I'm only just learning PHP, so I'm hoping someone that knows better can spot what needs to be changed.

<?php
/**
* Module Template
*
* Template used to render attribute display/input fields
*
* @package templateSystem
* @copyright Copyright 2003-2005 Zen Cart Development Team
* @copyright Portions Copyright 2003 osCommerce
* @license http://www.zen-cart.com/license/2_0.txt GNU Public License V2.0
* @version $Id: tpl_modules_attributes.php 3208 2006-03-19 16:48:57Z birdbrain $
*/
?>
<div id="productAttributes">
<?php if ($zv_display_select_option > 0) { ?>
<h3 id="attribsOptionsText"><?php echo TEXT_PRODUCT_OPTIONS; ?></h3>
<?php } // show please select unless all are readonly ?>

<?php
for($i=0;$i<sizeof($options_name);$i++) {
?>
<?php
if ($options_comment[$i] != '' and $options_comment_position[$i] == '0') {
$output .= '<h3 class="attributesComments">'.$options_comment[$i].'</h3>';
}

$output .= '
<div class="wrapperAttribsOptions">
<h4 class="optionName back">'.$options_name[$i].':</h4>
<br class="clearBoth" />
<div class="back">' . $options_menu[$i].'</div>
<br class="clearBoth" />
</div>';

if ($options_comment[$i] != '' and $options_comment_position[$i] == '1') {
$output .= '<div class="ProductInfoComments">'.$options_comment[$i].'</div>';
}

if ($options_attributes_image[$i] != '') {
$output .= $options_attributes_image[$i];
}

$output .= '<br class="clearBoth" />';

if ($i%2) {
if($i==0){
$left_col .= $output;
} else {
$right_col .= $output;
}
} else {
$left_col .= $output;
}
$output ='';

}

?>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr valign="top">
<td width="50%"><?php echo $left_col; ?></td>
<td width="50%"><?php echo $right_col; ?></td>
</tr>
</table>


<?php
if ($show_onetime_charges_description == 'true') {
?>
<div class="wrapperAttribsOneTime"><?php echo TEXT_ONETIME_CHARGE_SYMBOL . TEXT_ONETIME_CHARGE_DESCRIPTION; ?></div>
<?php } ?>


<?php
if ($show_attributes_qty_prices_description == 'true') {
?>
<div class="wrapperAttribsQtyPrices"><?php echo zen_image(DIR_WS_TEMPLATE_ICONS . 'icon_status_green.gif', TEXT_ATTRIBUTES_QTY_PRICE_HELP_LINK, 10, 10) . '&nbsp;' . '<a href="javascriptopupWindowPrice(\'' . zen_href_link(FILENAME_POPUP_ATTRIBUTES_QTY_PRICES, 'products_id=' . $_GET['products_id'] . '&products_tax_class_id=' . $products_tax_class_id) . '\')">' . TEXT_ATTRIBUTES_QTY_PRICE_HELP_LINK . '</a>'; ?></div>
<?php } ?>
</div>