Zen Cart Logo
Forums / Templates, Stylesheets, Page Layout / Display product attributes in two columns (side by side)

Display product attributes in two columns (side by side)

Locked

Views: 31,815

Results 61 to 73 of 73
This thread is locked. New replies are disabled.
31 Jan 2010, 12:33 AM
#61
divavocals avatar

divavocals

Totally Zenned

Join Date:
Jan 2007
Location:
Los Angeles, California, United States
Posts:
10,011
Plugin Contributions:
3

Display product attributes in two columns (side by side)

I really don't want to get this post off topic by answering your question here in this thread.. (Because this is REALLY apples and oranges..) Would you mind posting a separate topic on this so that you can get answers to your question and this post doesn't stray off-topic??

fairy:

Hi! I have been searching and searching. I have tried all of the fixes that I can find in the forums, but none seem to be working for me.

I understand the difference between the Attributes and the Option Values and I apologize to the original poster for asking the same thing again.

Can someone take a look at this page.

http://www.graphxfairy.com/auction-templates/bling-sparkle-auction-templates/glittering-borders-auction-template

I am trying to put my Options Values in columns. I have already set the area in the admin correctly to reflect 3 images per row with the attribute style to 4.

I know I am missing something or I have some template override affecting this, but I can't seem to locate it.

Any ideas?

31 Jan 2010, 3:00 PM
#62
fairy avatar

fairy

New Zenner

Join Date:
Aug 2008
Posts:
48
Plugin Contributions:
0

Re: Display product attributes in two columns (side by side)

Of Course, and BTW thank you for posting your solution to the Attribute columns. I had been looking for that for quite some time.

31 Jan 2010, 5:20 PM
#63
divavocals avatar

divavocals

Totally Zenned

Join Date:
Jan 2007
Location:
Los Angeles, California, United States
Posts:
10,011
Plugin Contributions:
3

Re: Display product attributes in two columns (side by side)

fairy:

Of Course, and BTW thank you for posting your solution to the Attribute columns. I had been looking for that for quite some time.
Thanks.. and you're very welcome!!

1 Feb 2010, 6:34 PM
#64
jsksathiya avatar

jsksathiya

New Zenner

Join Date:
Feb 2010
Posts:
3
Plugin Contributions:
0

Re: Display product attributes in two columns (side by side)

:blink:How to display 4 columns. Please help me!!!!!!!

1 Feb 2010, 8:05 PM
#65
divavocals avatar

divavocals

Totally Zenned

Join Date:
Jan 2007
Location:
Los Angeles, California, United States
Posts:
10,011
Plugin Contributions:
3

Re: Display product attributes in two columns (side by side)

jsksathiya:

:blink:How to display 4 columns. Please help me!!!!!!!The code I shared in the original post is only for two columns, and I while I understand how it was done, I didn't write the code (it was done for me). So I can't really help with this. You might try posting this as a NEW question so you can get assistance with this.. Feel free to reference this post if someone needs an example of how this was accomplished with two columns.

1 Feb 2010, 8:13 PM
#66
gjh42 avatar

gjh42

Black Belt

Join Date:
Jul 2005
Location:
Upstate NY
Posts:
21,876
Plugin Contributions:
8

Re: Display product attributes in two columns (side by side)

Don't know what happened to the post I thought I made a few minutes ago...

You can get the four-column effect by using the stylesheet code from post 55, adapted to
width: 24%;
so that the individual attributes will fit four to a row.

You also will need to add
height: ##px; (where ## is the height you want)
to the .wrapperAttribsOptions rule to ensure that the floating happens smoothly.

This is a generic method, and will not be suitable to every situation.

2 Feb 2010, 7:05 AM
#67
jsksathiya avatar

jsksathiya

New Zenner

Join Date:
Feb 2010
Posts:
3
Plugin Contributions:
0

Re: Display product attributes in two columns (side by side)

Thank you for your great replay

2 Apr 2010, 5:55 AM
#68
first_action avatar

first_action

New Zenner

Join Date:
Jan 2010
Posts:
16
Plugin Contributions:
0

Re: Display product attributes in two columns (side by side)

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.

Is there a way to do this with display only images. I have wooden swords that have many different styles that I want to display side by side instead of just vertically, but just can't figure it out. You can see it at the link below.

https://www.wholesalemartialartsequipment.com/index.php?main_page=product_info&cPath=3_17&products_id=261

3 Apr 2010, 3:23 AM
#69
divavocals avatar

divavocals

Totally Zenned

Join Date:
Jan 2007
Location:
Los Angeles, California, United States
Posts:
10,011
Plugin Contributions:
3

Re: Display product attributes in two columns (side by side)

First Action:

Is there a way to do this with display only images. I have wooden swords that have many different styles that I want to display side by side instead of just vertically, but just can't figure it out. You can see it at the link below.

https://www.wholesalemartialartsequipment.com/index.php?main_page=product_info&cPath=3_17&products_id=261The short answer is I don't know, and that's NOT what my posted code was meant to do, You should search the forum or start a new topic to address your specific question.

Here is my original response to the post you quoted:

DivaVocals:

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:

7 Oct 2010, 12:15 PM
#70
linusit avatar

linusit

New Zenner

Join Date:
Oct 2010
Posts:
7
Plugin Contributions:
0

Re: Display product attributes in two columns (side by side)

gjh42:

One thing that has occurred to me is that it should be possible to get a two-column layout from the stock file just by using CSS.```
/eliminate hard break between attributes/
.wrapperAttribsOptions+br.clearBoth {display: none;}/allow floated attributes to sit side by side if desired/
.wrapperAttribsOptions {float: left; width: 48%;}/float attributes and make them half the available width/

> This basic code should make the attributes sit two to a row. Some supplemental rules may well be needed to make the attribute group play well with its surroundings.
> 
> The attributes will all need to be set to the same height so there is no snagging in the float.

I've used the same method that gjh42 suggested and thought I'd share my code. The only problem with gjh42 code is that it doesn't display the .clearBoth meaning the floats aren't cleared.

CSS:

.wrapperAttribsOptions h4 { width: 75px;}
.wrapperAttribsOptions {float:left;width:48%;height:115px;margin:0.3em 0;}/115px for 5 product attributes/


Create tpl_modules_attributes.php in TEMPLATES/YOURTEMPLATE/TEMPLATES with the following code

<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') { ?> <h3 class="attributesComments"><?php echo $options_comment[$i]; ?></h3> <?php } ?> <div class="wrapperAttribsOptions"> <h4 class="optionName back"><?php echo $options_name[$i]; ?></h4> <div class="back"><?php echo "\n" . $options_menu[$i]; ?></div> </div> <?php if ($options_comment[$i] != '' and $options_comment_position[$i] == '1') { ?>
<div class="ProductInfoComments"><?php echo $options_comment[$i]; ?></div>
<?php } ?> <?php if ($options_attributes_image[$i] != '') { ?> <?php echo $options_attributes_image[$i]; ?> <?php } ?> <?php } ?> <?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 } ?> <br class="clearBoth" /> </div> ```

This will split the attribute groups into two columns.

7 Oct 2010, 1:11 PM
#71
gjh42 avatar

gjh42

Black Belt

Join Date:
Jul 2005
Location:
Upstate NY
Posts:
21,876
Plugin Contributions:
8

Re: Display product attributes in two columns (side by side)

Or you can just add a rule with {clear: both;} for whatever element comes next in your page, like
#productTellFriendLink {clear: both;}
and not have to have another override file in your template folder...

8 Nov 2010, 12:55 AM
#73
divavocals avatar

divavocals

Totally Zenned

Join Date:
Jan 2007
Location:
Los Angeles, California, United States
Posts:
10,011
Plugin Contributions:
3

Re: Display product attributes in two columns (side by side)

aftab1003:

i realy love to make product page tables like this page....

http://stockgsm.com/index.php?main_page=product_info&cPath=6&products_id=135&zenid=e3fe78fc970f5b65ef11a3a35bd6ef03

can any one help me?Your question is off-topic for this particular thread (which is discussing a different layout method/technique for the attributes section of the products page).

If you want help with your question, please re-post it in the appropriate section of the forum and I'm sure the members of this great community will be happy to help you..