putting attributes in the add to cart box on product info page

[angela183]

hello!
I was wondering if anyone knew how i can make my attribute radio options be displayed in the same box as the add to cart button on the product info page. see the attachment to for a picture of this to see what im talking about.
thanks

[angela183]

anyone have any clue?????????

[clydejones]

Good News, Yes it can be done.

You'll need to move things around in the tpl_info_display.php and add/change some new IDs in the stylesheet.

[angela183]

hi thanks for replying. Do you have any idea what code i need to add to the css ( i have no clue)?
and for the template info display would i just move the attributes section into the same section as the add to cart???

[clydejones]

Let me play around with a couple of ideas (may take a day or two) and see what I can come up with.

When I have something I'll post it for you.

[angela183]

ok your awesome because i don't know what to do and i would love to have my attributes and add to cart look like that :)

[angela183]

hey thought you might want to see this in order to figure out what they did because they have there attributes in the add to cart box.
look here:
[url]http://www.soapcafe.com/index.php?main_page=product_info&cPath=2&products_id=1

[clydejones]

Angela,

OK, here's what I came up with.

CSS (make sure these IDs are unique and not duplicated anywhere in your stylesheet) You can change colors as needed.

#buybox {margin: 0; padding: 3px; width: 281px; text-align: center; background: #fdeaec; border: 1px solid #b08694;}
#productAttributes {background-color: #fdeaec;}
.wrapperAttribsOptions {margin: 0.3em 0em;	text-align: left; background-color: #fdeaec;}
#attribsOptionsText {margin: 0; padding: 0.5em 5px; border: 1px solid #b08694; background-color: #d6477d;	color: #FFF; text-align: center; }
.optionName {color: #580c84; margin: 0; font-weight: bold; padding-left: 3px; text-align: left; background: #fdeaec; width: 8em;}
#cartAdd {margin: 1em; padding: 3px; font-size: 1em; /*width: 100px; height: 75px;*/ text-align: center;	/*border: 2px dotted blue;	background-color:  #fdeaec;*/}
#cartImage {margin: 0.5em 1em;}

Have you made any changes to your tpl_product_info_display.php? If you have, can you attach it here so I can take a look where You'll need to make the additional changes.

[angela183]

hi! thanks for that! i will give it a try momentarily.
i have not really made too many changes to template_info_display. i tried to attatch it in a word doc. but it wont let me because the file is too big. so should i email it to you or what do you think i should do?

[clydejones]

Not a problem. Here are the changes you'll need.

<br class="clearboth" />
<div id="buybox" class="forward">
<!--bof Attributes Module -->
<?php
  if ($pr_attr->fields['total'] > 0) {
?>
<?php
/**
 * display the product atributes
 */
  require($template->get_template_dir('/tpl_modules_attributes.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_modules_attributes.php'); ?>
<?php
  }
?>
<br class="clearboth" />
<!--eof Attributes Module -->
<!--bof Add to Cart Box -->
<?php
if (CUSTOMERS_APPROVAL == 3 and TEXT_LOGIN_FOR_PRICE_BUTTON_REPLACE_SHOWROOM == '') {
  // do nothing
} else {
?>
            <?php
    $display_qty = (($flag_show_product_info_in_cart_qty == 1 and $_SESSION['cart']->in_cart($_GET['products_id'])) ? '<p>' . PRODUCTS_ORDER_QTY_TEXT_IN_CART . $_SESSION['cart']->get_quantity($_GET['products_id']) . '</p>' : '');
            if ($products_qty_box_status == 0 or $products_quantity_order_max== 1) {
              // hide the quantity box and default to 1
              $the_button = '<input type="hidden" name="cart_quantity" value="1" />' . zen_draw_hidden_field('products_id', (int)$_GET['products_id']) . zen_image_submit(BUTTON_IMAGE_IN_CART, BUTTON_IN_CART_ALT);
            } else {
              // show the quantity box
    $the_button = PRODUCTS_ORDER_QTY_TEXT . '<input type="text" name="cart_quantity" value="' . (zen_get_buy_now_qty($_GET['products_id'])) . '" maxlength="6" size="4" /><br />' . zen_get_products_quantity_min_units_display((int)$_GET['products_id']) . '<br />' . zen_draw_hidden_field('products_id', (int)$_GET['products_id']) . zen_image_submit(BUTTON_IMAGE_IN_CART, BUTTON_IN_CART_ALT);
            }
    $display_button = zen_get_buy_now_button($_GET['products_id'], $the_button);
  ?>
  <?php if ($display_qty != '' or $display_button != '') { ?>
    <div id="cartAdd">
    <?php
      echo $display_qty;
      echo $display_button;
            ?>
          </div>
  <?php } // display qty and button ?>
<?php } // CUSTOMERS_APPROVAL == 3 ?>
<!--eof Add to Cart Box-->
</div>

<!--bof Product details list  -->
<?php if ( (($flag_show_product_info_model == 1 and $products_model !=”) or ($flag_show_product_info_weight == 1 and $products_weight !=0) or ($flag_show_product_info_quantity == 1) or ($flag_show_product_info_manufacturer == 1 and !empty($manufacturers_name))) ) { ?>
<ul id="productDetailsList" class="floatingBox back">
  <?php echo (($flag_show_product_info_model == 1 and $products_model !='') ? '<li>' . TEXT_PRODUCT_MODEL . $products_model . '</li>' : '') . "\n"; ?>
  <?php echo (($flag_show_product_info_weight == 1 and $products_weight !=0) ? '<li>' . TEXT_PRODUCT_WEIGHT .  $products_weight . TEXT_PRODUCT_WEIGHT_UNIT . '</li>'  : '') . "\n"; ?>
  <?php echo (($flag_show_product_info_quantity == 1) ? '<li>' . $products_quantity . TEXT_PRODUCT_QUANTITY . '</li>'  : '') . "\n"; ?>
  <?php echo (($flag_show_product_info_manufacturer == 1 and !empty($manufacturers_name)) ? '<li>' . TEXT_PRODUCT_MANUFACTURER . $manufacturers_name . '</li>' : '') . "\n"; ?>
</ul>
<br class="clearBoth" />
<?php
  }
?>
<!--eof Product details list -->

Try it and let me know if it works.