How To Reposition Attributes?

[youshine]

Dear Zencart masters,

I have created a product page adding the attributes in rows as shown at the link below for that's how I know to do for now.

http://phoup.com/zencart1/index.php?...products_id=17

My friend whom I am helping with Zen-Cart wants it to look as follows.




Which file should I work on to reposition the attributes?

Thanks in advance...

[niccol]

You could read:

http://www.zen-cart.com/forum/showthread.php?t=130226

We did it by editing includes / templates / yourtemplate / templates / tpl_modules_attributes.php first. This edit was just to put invidual IDs for the attributes.

Then, we used the css file to style these elements to wherever we wanted.

Be aware that if you have different attributes on different product pages then you want to be careful because these IDs are numbered from the first on the page incrementally. With hindsight, it would have been better to add the ID including the attribute name. This is pretty easily done but just didn't occur to me at the time


The line you would want to change (in our edited version of the file) is the one that reads:

<div class="wrapperAttribsOptions" id="attributeBox-<?php echo $i ?>">

You might change it too:

<div class="wrapperAttribsOptions" id="attributeBox-<?php echo $options_name[$i] ?>">

That should be fine if your attributes names do not have spaces or funky characters in them. If they do then you would need to write a bit of php to strip these out.

[youshine]

Thanks Niccol for helping me again.

I did all you suggested at the given link: http://www.zen-cart.com/forum/showthread.php?t=130226 .

And so my page looks now like here: http://phoup.com/zencart1/index.php?...69e08121a1385a

I finished the last code you suggested and am waiting for the next instruction.

I would like to make the line height between each attribute narrower if it's possible.

I tried to make Photo 1 etc. a bit wider and gave OptionName: width:35em but it appears to me that it does not work beyond 20em...

I would like to put last 4 attributes side by side as in the red box.
And also I would like to have "AddTo Cart" moved to where I copied it over as shown on photo below.

[youshine]

Adding last code makes the attribute names displayed twice.....

[niccol]

OK. We do need to add a bit of php to strip some of the stuff out of the option name. I had forgotten that the variable $options_name actually includes some tags. And that is what is causing the double name etc.

For instance ---- $options_name = <label>then the option name</label>

Edit includes / templates / yourtemplate / templates / tpl_modules_attributes.php again!
Replace:

<div class="wrapperAttribsOptions" id="attributeBox-<?php echo $options_name[$i] ?>">

With

<?php $new2= strip_tags($options_name[$i]);?>
<?php $new3=str_replace(' ', '', $new2);?>
<?php $new4=strtolower($new3);?> 

<div class="wrapperAttribsOptions" id="attributeBox-<?php echo $new4 ?>">

That will strip out the tags, remove any spaces, and make lowercase.

I'll attach the complete file too.

Get that far and then we can start adjusting the layout with css.

[niccol]

Regarding the add to cart box:

You have two stylesheets that are being loaded. stylesheet090728.css and stylesheet.css. They contain some of the same rules at least so you need to be careful about which you alter. The stylesheet090728.css gets loaded after the stylesheet.css so will over-write the other one where that happens.

Fisrt you need to add a new rule:

#productTellFriendLink{clear:both;}

Then you need to float the #addCart left instead of right. As it stands you need to do this in stylesheet090728

#cartAdd{float:left;}

It would be better to find the existing rule and alter that accordingly.

[youshine]

Thanks Niccol for all your help so far.

My page looks like the following now.



I took out stylesheet090728.css from my remote site. When I revise any file I usually kept a copy before change with the date added to the name so that I could fall back if the new file doesn't work. I did not know that Zencart picks up that file with a new different name also. No wonder why sometimes I felt frustrated not seeing the change I had made. Now I know why...thanks to your careful observation.

"Add To Cart" icon appears where my friend wants it but those attributes that he wants to appear side by side have not.

And after loading the unzipped tpi_module_attrribute.php file, attribute names such as Photo1 etc. appears above input boxes... why?

And is there any way the line height could be squeezed down a bit?

Thanks again for helping your neighbour ()...

[niccol]

OK. This is great. Now we are rolling!

Do you by any chance use firefox? If so an addon called web developer toolbar is going to help you.

Let me know...

[niccol]

Just to get going add this to the bottom of your stylesheet:

#attributeBox-photo1{height:1em;}
#attributeBox-photo1 .optionName{width:14em;}
#attributeBox-photo2{height:1em;}
#attributeBox-photo2 .optionName{width:14em;}
#attributeBox-photo3{height:1em;}
#attributeBox-photo3 .optionName{width:14em;}
#attributeBox-backgroundphoto4{height:1em;}
#attributeBox-backgroundphoto4 .optionName{width:14em;}
#attributeBox-photo5{height:1em;}
#attributeBox-photo5 .optionName{width:14em;}

[niccol]

If you have done the previous post you can see that what we have achieved so far is to put an ID into each block so we can style them individually. It works well.

BUT....

You missed out one of the steps in the other thread I am afraid. We need to remove some <br class="clearBoth" /> from the code because they are going to limit what we can do. It is post 14 in the other thread

It will make a mess of the layout for the time being but don't worry - it will give us complete control through the css.

At the moment each attribute looks like this in the HTML:

<div class="wrapperAttribsOptions" id="attributeBox-photo1">

<h4 class="optionName back"><label class="attribsUploads" for="attrib-1-0">Photo 1</label></h4>

<div class="back">
<input type="file" name="id[txt_1]"  id="attrib-1-0" /><br />
<input type="hidden" name="upload_1" value="1" />
<input type="hidden" name="txt_upload_1" />
</div>
<br class="clearBoth" />
</div>

<br class="clearBoth" />

You can see the <br> that we want to get rid of. You can also see the new ID, in this case #attributeBox-photo1