Display product attributes in two columns (side by side)

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..:smartalec: 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)

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

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. :D

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:smile:), 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..

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

You are very welcome.. Happy to share!

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

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.

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

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?

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) . ' ' . '<a href="javascript:popupWindowPrice(\'' . 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>

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
If your toppings are Option Values, this solution won't split those into two columns. This is meant to take the Option Names (along with their associated values) and place them into two columns.

Honestly this is ALL this solution was supposed to do.. My client has products that have MANY attributes (More than 10). Because there are so many attributes, it makes the product detail page quite long and unattractive. We wanted a way to display the attributes (and values) in two columns using the sort order for the Option Names as a simple method to help control the placement of the attributes (and values) within the two columns.

So in effect it takes a list like this:
Attribute 1
Attribute 2
Attribute 3
Attribute 4
Attribute 5
Attribute 6
Attribute 7

And displays it like this:
Attribute 1 Attribute 2
Attribute 3 Attribute 4
Attribute 5 Attribute 6
Attribute 7

Here's a sample of that illustrates what my client's website looked like before I applied this change (this is not my client's site, but a similar site):
http://www.lacelocs.com/custom-lace-wigs-order-form-p-71.html

This is a test website, but you can see what this modification does when applied:
http://clients.overthehillweb.com/mymaneattractions/index.php?main_page=product_info&cPath=2&products_id=36

It is my understanding that the placement of Options Values is controlled via the admin. I saw LOTS of threads on that.. I was looking for something else, and hence why I had my friend help me create this down and dirty mod..

I hope that clarifies things for everyone..

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.

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?

I was re-reading this, and wanted to add a few additional comments. Each single product attribute consists of two parts:

1. Option (Attribute) Name (i.e. Color)
2. Option (Attribute) Value (i.e. Blue, Red, Green)

My solution will place the attributes+it's associated values in two columns. (As you have already seen) It will not do anything about the layout of the attribute values.

You are looking for a solution that takes and individual attribute and change the default display from this:

Attribute (Color)
--- Attribute Value (Green)
--- Attribute Value (Blue)
--- Attribute Value (Red)
--- Attribute Value (Purple)

And display it like this:
Attribute Name (Color)
--- Attribute Value (Green) ----- --- Attribute Value (Blue)
--- Attribute Value (Red) -------- --- Attribute Value (Purple)

or something similar...

Solarflare is absolutely right. The way to achieve what you want is to use images for your attribute values. Once you have images for your attribute values, you can easily achieve what you want using the admin controls. If you don't want to use images, then you are looking at custome code.

I'm not sure you're gonna find help on this forum to create the code you want. I sought an outside resource to help me with the code I attached to the O/P because I never saw anyone post a solution. You may have to do the same if you REALLY don't want to use images and the existing admin controls/features. From my searches, I got the impression that the general consensus is that this is not a desireable/needed feature since there is a way to do what you want by creating and associating images with your attribute (options) values.

Good luck with your store!:smile:

I dropped this right in and it worked for me. Thanks a lot. :-)

Glad ya liked it.. :smile:

Really great, thank you!

One question, now that my size and colour attributes are side by side (ace!) there is a large space between 'Please choose:' and the the actual attributes. Any way to get rid of this space?

Thanks.

This is a little off topic, but I thought that possibly someone could answer this for me. In the product_info layout, the drop down on the attributes has a huge margin between them (100px). I've looked carefully at the layout and the style sheet and nothing I try seems to reduce this. I have the drop downs in a vertical format and I only want the margin about 25px between them. The top drop down should be able to go right over the top of the second when selected if necessary.

The other alternative was to get them into a two column layout, where the drop downs would appear side by side, but after reading this thread I don't believe this module will help in that area.

Are there any suggestions or could someone tell me what in the .css is controlling that margin.

Thanks in advance.

Busymum & rwoody

Since neither of you included a link to your site, I am only making a guess here, but both of your issues sound like stylesheet modifications are needed to correct your layout issues.. As you can see in my test site where I have this working, I don't have the spacing issues you are both referring to.

http://clients.overthehillweb.com/mymaneattractions/index.php?main_page=product_info&cPath=2&products_id=36

I would suggest creating a thread in the stylesheet forum, and seeing if one of the experts there can help you figure out what changes are needed to get the layout to look the way you want.

Thank you for your response. In doing further research on the forums I did in fact find another person with a similar issue.

I edited the tpl_moduless_attributes.php to include a div ID for the div containing the class wrapperAttribsOptions. In the style sheet, I added a height to that div, setting it to my desired height; however, I noted that the first dropdown was still hung up. This is where the other post helped me. It was necessary to go into the product_info_display and modify the cart_display to absolute positioning, as the add to cart div was keeping the first dropdown from lining up the way I wanted it to.

The end result is that now on pages where I have multiple dropdowns, they are lined up very nicely allowing for a much nicer look on the page.

Here is a link to the site (we are still under construction), to the particular page that was really causing an issue for me. Site Example As you can see I have five attribute selections here, four drop downs and one text entry. With the old layout this page stretched out forever!!

Once again, thank you for your reply and I hope my solution helps someone else.

Thanks

Ruth

rwoody -- First off.. LOVE your site.. and I am very happy you found a solution to your product page layout issues..

However, I want to make sure it's clear to anyone reading this thread that your solution is unrelated to my two column attribute mod.. Your product pages are not using this mod, and so I feel it's important for me to note this for anyone reading this thread, who might visit your site..

Just want to make sure everyone reading this thread is on the same page..:smile:

You are correct, thus the reason in my first post I admitted I was off topic, but you folks were soooo close to my issue at the time, I just had to jump in.

Thanks for the kudos on the site. I have to tell you this has been "the" most challenging design I've ever done. Each of the main cats have a different flash image so it was really tough to come up with a way to make that happen. Waaaaay too many categories to even try to use individual style sheets and that really wouldn't have helped load all those flash modules.

Take care and thanks again for the mod. I did grab it for another site that I'm building and it works perrrrrrrfect !!! :smile: