Multiple Attributes per Row

[bangsters]

Hi. How do I make the attributes display in such a way that 3 attributes show per row. Right now attributes show 1 name per line.

I want to adjust it so that I get 3 drop downs in one row and another 3 dropdowns in the second row.

the dropdowns are for custom initials, hence I want 3 per row.

how can this be accomplished?

Thanks

[niccol]

A url really helps with this kind of question

Yes, it is perfectly possible. You are going to need to edit tpl_modules_attributes to add a unique id to the various attributes.

I worked through this with a couple of people so you could look at:

http://www.zen-cart.com/forum/showth...ght=attributes

and

http://www.zen-cart.com/forum/showth...ght=attributes

Both cases got a bit messy! I probably need to clean up the answer and make it clearer, so if you get confused let me know and I'll do that.

[niccol]

OK a bit of a clearer explanation.

First thing that you need to do is add a unique ID to all the divs that enclose the attributes. You do this by a simple edit to the file:

1. includes/templates/yourtemplate/templates/tpl_modules_attributes.php

or

2. includes/templates/default_template/templates/tpl_modules_attributes.php

(If the first option does not exist then you should create it by copying the second file into the first position and thus creating an override. Then edit the override version.)

Find where it says:

<div class="wrapperAttribsOptions">

And change it to:

<?php 
$temp= strip_tags($options_name[$i]);
$temp=str_replace(' ', '', $temp);
$temp=strtolower($temp);?> 
<div class="wrapperAttribsOptions" id="attributeBox-<?php echo $temp; ?>">

Save the file and upload it. Now your divs have unique IDs that are based on the name of the attribute in question. We will be able to style them to achieve what you want by using the stylesheet.

But a URL is going to help

[bangsters]

thanks! right now no url since it's sitting in my private box.

i tried removing the div tags and classes referencing to the css to remove the formatting completely, but for some reason the next attribute still displays in a new line or new row.

EDIT: on second thought, i missed the break at the bottom lol...now we're in business hehehe....

thanks again for pointing me to the right direction.

btw, i'm not good with css, but if I understand the ID thing you said, if I put IDs which then points to the attribute names, I can format the attributes based on the names??? like say if the attribute name is INITIALs, then I can have INITIALS1 INITIALS2, INITIALS3 all show up in one row. then if the name is like color, it can go on a totally different row???

[niccol]

Well if you have a look at the source code for your page (cntl U in firfox and something in the view menu in internet explorer) you will be able to see the IDs that you have created.

For instance from the demo instal of zen cart:

<div class="wrapperAttribsOptions" id="attributeBox-memory">
<div class="wrapperAttribsOptions">
<h4 class="optionName back"><label class="attribsSelect" for="attrib-4">Memory</label></h4>
<div class="back">
<select name="id[4]" id="attrib-4">
  <option value="1">4 mb</option>
  <option value="2">8 mb ( +$50.00 )</option>
  <option value="3">16 mb ( +$70.00 )</option>
</select>

</div>
<br class="clearBoth" />
</div>

Is one of the attributes (in this case for memory size of a graphics card). You can see where it says ' id="attributeBox-memory" '? That is the unique ID that we added in the last stage.

So, if I wanted to style that element I would use a rule in the stylesheet that looked something like:

#attributeBox-memory{
color: red;
}

So, the point of the first stage was to allow us to style each set of attributes independently of the others.

============

Now, as far as your situation goes, you need to find the IDs of the 6 attributes that you are concerned with by looking at the source code of the page as it stands at the moment.

Then you are going to make a set of rules that looks something like this :

#attributeBox-initial1{
width: 150px;
float:left;
}

#attributeBox-initial2{
width: 150px;
float:left;
}
#attributeBox-initial3{
width: 150px;
float:left;
}
#attributeBox-initial4{
width: 150px;
float:left;
clear:left;
}
#attributeBox-initial5{
width: 150px;
float:left;
}
#attributeBox-initial6{
width: 150px;
float:left;
}

Evidently I probably won't have guessed the name of your IDs exactly right so you will have to change that. (And yes, guys, I do know that this isn't the most streamlined way to do it but it is easy to understand)

This applies left floats to everything which means that it will float up against the previous element and not start a new line. Except for the fourth one which also has a clear:left; which means that it will start a new line ( this is a simplistic explanation of the idea of floats and is a bit flawed but will let you see what we are about). The fixed width is needed for the float to work and you might need to change the 150px to something that suits your layout better.

So, give that a try and post again if you have trouble.

[bangsters]

niccol,

here's what i have come up with. i ended up scripting the layout instead of css, and i think it looks nice. only issue i'm having now is it's a bit slow to load, considering there are 9 attributes, 6 of those have A-Z as values, the other 2 around 10 choices each for denomination.... couple that with around 1000 products and boom.. it's starting to crawl...any idea how I can speed up the loading (and no I cannot convert the 3 drop downs to 1 TEXT)? currently the table products_attributes has like 350K rows of data


http://www.thecustomchip.com/store/i...oducts_id=1363