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.