Product Option Horizontol Alignment

[kp14]

Where do you do this in the admin because I tried all 6 option styles in the option name manager and there was no change with the alignment of the dropdown boxes. If this somewhere else?

[econcepts]

You are in the right spot. What happen to the layout when you made the changes? Did it move the boxes at all? It should. I have used this method in the past to place the images above, to the side, below, attribute drop downs?

If you want me to look at it, I can login and take a look for you (PM me the admin login).

[kp14]

The layout did not change with the dropboxes but when I made them a radio button or check box then they moved.

[econcepts]

I actually want the 2 drop down boxes beside each and the color swatces above them.

Here ya go (example page at http://www.zencartoptimization.com/f...p/pmsample.php).

It turned out that the only thing you needed was to alter the layout of the page a bit. I added the styles here "hard coded" into the template, but you'll want to add them at the respective points within the Stylesheet instead. I only did it here for ease of reading.

You'll want to make these edits within your "Attributes" module.

Here is the section of code you need to alter (items I altered/added are in bold red), your original location is in bold only:

---------------------------------------------------------------------
<!--bof Attributes Module -->

<div id="productAttributes" style="border: 1px solid #cccccc; width:325px;" class="forward">
<h3 id="attribsOptionsText">Please Choose: </h3>
<!-- Start new location of image attribute code -->
<div class="attribImg"><img src="images/attributes/apple.jpg" alt="" width="45" height="27" /><br />Apple</div>
<div class="attribImg"><img src="images/attributes/aqua.jpg" alt="" width="45" height="27" /><br />Aqua</div>
<div class="attribImg"><img src="images/attributes/banana.jpg" alt="" width="45" height="27" /><br />Banana</div>
<br class="clearBoth" />
<!-- End new location of image attribute code -->

<div class="wrapperAttribsOptions back">
<h4 class="optionName back"><label class="attribsSelect" for="attrib-1">Color</label></h4>
<div class="back">
<select name="id[1]" id="attrib-1">
<option value="75">Apple</option>
<option value="76">Aqua</option>
<option value="74">Banana</option>

</select>

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

<!-- Your old location of code -->
<!--<div class="attribImg"><img src="images/attributes/apple.jpg" alt="" width="45" height="27" /><br />Apple</div>
<div class="attribImg"><img src="images/attributes/aqua.jpg" alt="" width="45" height="27" /><br />Aqua</div>
<div class="attribImg"><img src="images/attributes/banana.jpg" alt="" width="45" height="27" /><br />Banana</div>
-->




<div class="wrapperAttribsOptions back">
<h4 class="optionName back"><label class="attribsSelect" for="attrib-2">Size</label></h4>
<div class="back">
<select name="id[2]" id="attrib-2">
<option value="20">Large</option>
<option value="18">Medium</option>
<option value="21">Small</option>
</select>

</div>

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









</div><!--eof Attributes Module -->
------------------------------------------------------------------------

If you have any questions let me know.

[kp14]

I tried to rearange the tpl_modules_attibutes.php file and I lost my dropdown boxes. Here is my code if you could be so kind to tell me what I've done wrong. Thank you.

 
<?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"style="border: 1px solid #cccccc; width:325px;" class="forward">
<?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
  }
?>
<?php
if ($options_attributes_image[$i] != '') {
?>
<?php echo $options_attributes_image[$i]; ?>
<?php
}
?>
<?php
    }
?></div>
<div class="wrapperAttribsOptions back">
<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 ($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) . '&nbsp;' . '<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>

[econcepts]

I tried to rearange the tpl_modules_attibutes.php file and I lost my dropdown boxes. Here is my code if you could be so kind to tell me what I've done wrong. Thank you.

You DID make a backup of the file before you altered it RIGHT?

I'll run down it here. Hang on a bit.

[econcepts]

Try this.

If you want me to take a look, PM me access and I'll test for ya.

<?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" style="border: 1px solid #cccccc; width:325px;" class="forward">
<?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
if ($options_attributes_image[$i] != '') {
?>
<?php echo $options_attributes_image[$i]; ?>
<?php
}
?>
<?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 back">
<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 } ?>



<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) . '&nbsp;' . '<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>

Keep in mind that as mentioned in the earlier post, I would advise adding the styles that are "hard coded" into the one <div> tag to be placed into your actual style sheet. It will make it much easier to update in the future.

[tatiana77]

Hi econcepts, I've noticed that I've encountered a similar problem, would you be able to help me out too?

TIA,
Tatiana

[ZC Newbie]

I've seem to run into the same problem as well. I have tried to make adjustments to the attributes file but the coding is not the same as the one that had been posted. I just did a quick find in Dreamweaver for basic terms like "productAttributes". No products_Attributes aqui.