Changing Product Info Layout

Hi!
I looked in the tutorials and forums and tried several things including relocating the Attributes Module --> section but I can't work out what I need to change.

As it is the Add to Cart section looks like this (as this product has an attribute the customer much choose)

[SCR]http://www.lemongrassmedia.com/zc_01.jpg[/SCR]

I want the Attributes Options section to be allighned right so it has more chance of being seen than it is now.

I have managed to align the Please Choose text right but can't align the rest.

eg

[SCR]http://www.lemongrassmedia.com/zc_02.jpg[/SCR]

I'm guessing it's something in tpl_modules_attributes.php - here is what I have now

<?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 $

 */

?>
<style type="text/css">
#productAttributes {
	text-align: right;
}
</style>


<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

  }

?>

<style type="text/css">
#wrapperAttribsOptions {
	text-align: right;
}
</style>
<div class="wrapperAttribsOptions">

<h4 class="optionName back"><?php echo $options_name[$i]; ?></h4>

<div class="back"><?php echo "\n" . $options_menu[$i]; ?></div>

<br class="clearBoth" />

</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

}

?>

<br class="clearBoth" />

<?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 } ?>

</div>

Can someone please point me in the right direction or change the code for me (my head hurts)

Why are you hard-coding css into a template PHP file?

Hi

Hmm good question, I think I just did it to get it to work - well almost.

I'm just trying to get the purchase option in the same area of the product page, rather than one justified left and the add to cart justified right

OK, first take css code out of your php file.

Open you template>templates>tpl_modules_attributes.php and find this code:

<div class="wrapperAttribsOptions">
<h4 class="optionName back"><?php echo $options_name[$i]; ?></h4>
<div class="back"><?php echo "\n" . $options_menu[$i]; ?></div>
<br class="clearBoth" />
</div>

and change to this

<div class="wrapperAttribsOptions">
<h4 class="forward"><?php echo $options_name[$i]; ?></h4>
<div class="forward"><?php echo "\n" . $options_menu[$i]; ?></div>
<br class="clearBoth" />
</div>

Hi usernameone:

Thanks for the help, it's almost what I need

[SCR]http://www.lemongrassmedia.com/ti_03.jpg[/SCR]

The `Select Flavour' and `Please Choose' are aligned incorrectly.

I probably need to change another section in the same file and I tried but messed it up more !

Then I thought is it possible to put it all in the Add to Cart bordered box - so it's all in the one section and almost no chance of the customer missing it?

Thanks again for your help
Ernie

To be able to help further a link to you site is needed. I don't know without looking.

Hi!

Here is a link to the page where the Add to Cart is off alignment.

http://goo.gl/FU4XF

(I used a shortener to stop Google indexing the sitename in its results)

Any help you can give is appreciated

Ernie

Off alignment to where. It looks good to me

Hi!

Damn I don't deserve help I listed the wrong product link:

http://goo.gl/SDlle

Image of alignment of Options section on page:

[SCR]http://www.lemongrassmedia.com/to1.jpg[/SCR]

Thanks
Ernie

Open your templates stylesheet.css and find the below code

.forward, #shoppingCartDefault #PPECbutton{
float: right;
}

Add this to it , #attribsOptionsText

I haven't tested it so let me know if it works

Hi usernamenone

I tried that and it's getting closer!

The text is now all to the right but if you have a look

http://goo.gl/SDlle

the Please SelectChoose Flavour is now runs together.

Just need to try and place this text above the options like:

Choose Flavour:

x Choice One
x Choice Two

Thanks for your help!

Ernie

add this to .forward #productAttributes

add this <br class="clearBoth" /> after

<?php } // show please select unless all are readonly ?>

OK forget that last quote and copy and paste this in your tpl_modules_attributes

<?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) { ?>
<?php echo TEXT_PRODUCT_OPTIONS; ?>
<?php } // show please select unless all are readonly ?>
<br /> 
<?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
  }
?>
<br />  
<div class="wrapperAttribsOptions">
<div class="optionName back"><?php echo $options_name[$i]; ?></div>
<div class="forward"><?php echo "\n" . $options_menu[$i]; ?></div>
<br class="clearBoth" />
</div>
<br /> 

<?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
}
?>
<br />
<?php
    }
?>


<?php
  if ($show_onetime_charges_description == 'true') {
?>
    <div class="wrapperAttribsOneTime"><?php echo TEXT_ONETIME_CHARGE_SYMBOL . TEXT_ONETIME_CHARGE_DESCRIPTION; ?></div><br /> 
<?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>
<br class="clearBoth" />

but make sure #productAttributes is added to your float right in style sheet

I finaly had a chance to try out the code live and it all works for me.

Hi

Thank you that worked great, I appreciate your help getting this sorted for me!

Ernie