Eliminating wrap-arounds

[smarmyclothes]

Just cut and paste the appropriate code block where you want it.
In CUSTOM/templates/tpl_product_info_display.php you will clearly see the code block enclosed in bof and eof Add to Cart.

I've tried that. In fact, it's like that now. The Add to Cart button still goes to the bottom of the page when there are attributes.

I even tried wrapping the page description div tags around the Add to Cart code. No dice. Any suggestions would be appreciated.

[ckosloff]

I've tried that...

Please post your tpl_info_display.php, the one in your CUSTOM template.
Make sure that you post the one that you are effectively using.

[smarmyclothes]

<?php
/**
 * Page Template
 *
 * Loaded automatically by index.php?main_page=product_info.<br />
 * Displays details of a typical product
 *
 * @package templateSystem
 * @copyright Copyright 2003-2006 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_product_info_display.php 5369 2006-12-23 10:55:52Z drbyte $
 */
/**
 * This file is part of the Additional images relocated with CSS v. 1.1 contribution to Zen Cart.
 * This template is based on Zen Cart v.1.3.8a, but has been modified to display additional images below the main product image,
 * and to prevent the product description from wrapping around the images.
 * The modification is enclosed in explanatory comments, it just moves the Additional Product Images code block
 * to sit right below the Main Product Image and encloses the whole thing in a div tag.
 * The product description and all other related code blocks are also enclosed in a div tag.
 * The divs are controlled via CSS, thus completely eliminating the use of tables for layout. 
  * July 09, 2008.
 * Additional information about this modification http://www.zen-cart.com/forum/showthread.php?t=69672
 */

 //require(DIR_WS_MODULES . '/debug_blocks/product_info_prices.php');
?>
<div class="centerColumn" id="productGeneral">

<!--bof Form start-->
<?php echo zen_draw_form('cart_quantity', zen_href_link(zen_get_info_page($_GET['products_id']), zen_get_all_get_params(array('action')) . 'action=add_product'), 'post', 'enctype="multipart/form-data"') . "\n"; ?>
<!--eof Form start-->

<?php if ($messageStack->size('product_info') > 0) echo $messageStack->output('product_info'); ?>

<!--bof Category Icon -->
<?php if ($module_show_categories != 0) {?>
<?php
/**
 * display the category icons
 */
require($template->get_template_dir('/tpl_modules_category_icon_display.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_modules_category_icon_display.php'); ?>
<?php } ?>
<!--eof Category Icon -->

<!--bof Prev/Next top position -->
<?php if (PRODUCT_INFO_PREVIOUS_NEXT == 1 or PRODUCT_INFO_PREVIOUS_NEXT == 3) { ?>
<?php
/**
 * display the product previous/next helper
 */
require($template->get_template_dir('/tpl_products_next_previous.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_products_next_previous.php'); ?>
<?php } ?>
<!--eof Prev/Next top position-->

<!--beginning of Product Display code-->
<!--beginning of images wrapper-->
<div id="productImageWrapper">
<!--bof Main Product Image -->
<?php
  if (zen_not_null($products_image)) {
  ?>
<?php
/**
 * display the main product image
 */
   require($template->get_template_dir('/tpl_modules_main_product_image.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_modules_main_product_image.php'); ?>
<?php
  }
?>
<!--eof Main Product Image-->
<br class="clearBoth" />
<!--bof Additional Product Images -->
<?php
/**
 * display the products additional images
 */
  require($template->get_template_dir('/tpl_modules_additional_images.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_modules_additional_images.php'); ?>
<!--eof Additional Product Images -->
</div>
<!--end of images wrapper-->

<!--beginning of product description wrapper-->
<div id="productDescriptionWrapper">
<!--bof Product Name-->
<h1 id="productName" class="productGeneral"><?php echo $products_name; ?></h1>
<!--eof Product Name-->

<!--bof Product Price block -->
<h2 id="productPrices" class="productGeneral">
<?php
// base price
  if ($show_onetime_charges_description == 'true') {
    $one_time = '<span >' . TEXT_ONETIME_CHARGE_SYMBOL . TEXT_ONETIME_CHARGE_DESCRIPTION . '</span><br />';
  } else {
    $one_time = '';
  }
  echo $one_time . ((zen_has_product_attributes_values((int)$_GET['products_id']) and $flag_show_product_info_starting_at == 1) ? TEXT_BASE_PRICE : '') . zen_get_products_display_price((int)$_GET['products_id']);
?></h2>
<!--eof Product Price block -->

<!--bof free ship icon  -->
<?php if(zen_get_product_is_always_free_shipping($products_id_current) && $flag_show_product_info_free_shipping) { ?>
<div id="freeShippingIcon"><?php echo TEXT_PRODUCT_FREE_SHIPPING_ICON; ?></div>
<?php } ?>
<!--eof free ship icon  -->

 <!--bof Product description -->
<?php if ($products_description != '') { ?>
<div id="productDescription" class="productGeneral biggerText"><?php echo stripslashes($products_description); ?></div>
<?php } ?>
<!--eof Product description -->

<br />
<!--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="productDetails">
  <?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>

<?php
  }
?>
<!--eof Product details list -->

<br />


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

<!--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>
<br class="clearBoth" />




<!--end of product description wrapper-->

<!--end of Product Display code-->



<!--bof Quantity Discounts table -->
<?php
  if ($products_discount_type != 0) { ?>
<?php
/**
 * display the products quantity discount
 */
 require($template->get_template_dir('/tpl_modules_products_quantity_discounts.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_modules_products_quantity_discounts.php'); ?>
<?php
  }
?>
<!--eof Quantity Discounts table -->

<!--bof Prev/Next bottom position -->
<?php if (PRODUCT_INFO_PREVIOUS_NEXT == 2 or PRODUCT_INFO_PREVIOUS_NEXT == 3) { ?>
<?php
/**
 * display the product previous/next helper
 */
 require($template->get_template_dir('/tpl_products_next_previous.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_products_next_previous.php'); ?>
<?php } ?>
<!--eof Prev/Next bottom position -->

<!--bof Tell a Friend button -->
<?php
  if ($flag_show_product_info_tell_a_friend == 1) { ?>
<div id="productTellFriendLink" class="buttonRow forward"><?php echo ($flag_show_product_info_tell_a_friend == 1 ? '<a href="' . zen_href_link(FILENAME_TELL_A_FRIEND, 'products_id=' . $_GET['products_id']) . '">' . zen_image_button(BUTTON_IMAGE_TELLAFRIEND, BUTTON_TELLAFRIEND_ALT) . '</a>' : ''); ?></div>
<?php
  }
?>
<!--eof Tell a Friend button -->

<!--bof Reviews button and count-->
<?php
  if ($flag_show_product_info_reviews == 1) {
    // if more than 0 reviews, then show reviews button; otherwise, show the "write review" button
    if ($reviews->fields['count'] > 0 ) { ?>
<div id="productReviewLink" class="buttonRow back"><?php echo '<a href="' . zen_href_link(FILENAME_PRODUCT_REVIEWS, zen_get_all_get_params()) . '">' . zen_image_button(BUTTON_IMAGE_REVIEWS, BUTTON_REVIEWS_ALT) . '</a>'; ?></div>
<br class="clearBoth" />
<p class="reviewCount"><?php echo ($flag_show_product_info_reviews_count == 1 ? TEXT_CURRENT_REVIEWS . ' ' . $reviews->fields['count'] : ''); ?></p>
<?php } else { ?>
<div id="productReviewLink" class="buttonRow back"><?php echo '<a href="' . zen_href_link(FILENAME_PRODUCT_REVIEWS_WRITE, zen_get_all_get_params(array())) . '">' . zen_image_button(BUTTON_IMAGE_WRITE_REVIEW, BUTTON_WRITE_REVIEW_ALT) . '</a>'; ?></div>
<br class="clearBoth" />
<?php
  }
}
?>
<!--eof Reviews button and count -->


<!--bof Product date added/available-->
<?php
  if ($products_date_available > date('Y-m-d H:i:s')) {
    if ($flag_show_product_info_date_available == 1) {
?>
  <p id="productDateAvailable" class="productGeneral centeredContent"><?php echo sprintf(TEXT_DATE_AVAILABLE, zen_date_long($products_date_available)); ?></p>
<?php
    }
  } else {
    if ($flag_show_product_info_date_added == 1) {
?>
      <p id="productDateAdded" class="productGeneral centeredContent"><?php echo sprintf(TEXT_DATE_ADDED, zen_date_long($products_date_added)); ?></p>
<?php
    } // $flag_show_product_info_date_added
  }
?>
<!--eof Product date added/available -->

<!--bof Product URL -->
<?php
  if (zen_not_null($products_url)) {
    if ($flag_show_product_info_url == 1) {
?>
    <p id="productInfoLink" class="productGeneral centeredContent"><?php echo sprintf(TEXT_MORE_INFORMATION, zen_href_link(FILENAME_REDIRECT, 'action=url&goto=' . urlencode($products_url), 'NONSSL', true, false)); ?></p>
<?php
    } // $flag_show_product_info_url
  }
?>
<!--eof Product URL -->

<!--bof also purchased products module-->
<?php require($template->get_template_dir('tpl_modules_also_purchased_products.php', DIR_WS_TEMPLATE, $current_page_base,'templates'). '/' . 'tpl_modules_also_purchased_products.php');?>
<!--eof also purchased products module-->

<!--bof Form close-->
</form>
<!--bof Form close-->
</div>

And here's the additional images stylesheet, just in case:

/*beginning of Product Display code*/
#productImageWrapper {
float: left;
width: 200px;
margin-left: 10px;
}

#productDescriptionWrapper {
	width: 65%;
	min-width:340px;
	margin-left: 210px;
	}
	
#productAdditionalDetails .productDetails {
	
	text-align: left;
}

#productAdditionalImages .additionalImages a { 
    float: left; 
    }
		
/* end of Product Display code */

You can see in this listing how it looks when there are no attributes (good):
http://smarmy.us/newstore/index.php?...07efda6dd7be71

And when there are attributes (bad):
http://smarmy.us/newstore/index.php?...07efda6dd7be71

Thank you so much for taking a look!!

[ckosloff]

I just took a quick and dirty look.
1) Are you sure that the template you post is the active one?
2) There is no reason for your attributes to be placed inside a table, this is supposed to be a tableless design.
Table + large thumbnails and small hover images are pushing the button down.
Will be back on this.

[smarmyclothes]

I'm 100% certain of that being the current template.

What part of the code indicates that the attributes are inside a table? If I did that, it was unintentional.

[ckosloff]

I'm 100% certain of that being the current template.

What part of the code indicates that the attributes are inside a table? If I did that, it was unintentional.

Probably you are not using stock ZC, but a template.
You have to look at the page in Firefox, with Developer's Toolbar installed.
Check Display Element Information and you will see a table right there, that stretches with the additional images.

[smarmyclothes]

Yes, I'm using the Future Zen template.

I see the table using Developer's Toolbar, but I can't find where it's being controlled. Bah, I hate not knowing my ###### from my elbow!

Oh well, thank you so much for your help!!

[ckosloff]

Yes, I'm using the Future Zen template.

This may seem obvious, but try contacting the author.
I think it's a free template, there might even be a support thread.
FYI, I don't use any template, the contrib. is in itself a template and doesn't mix well with other templates.

[beyre]

I hope you folks are still around.

This is EXACTLY what I've been needing:

two columns ...

Reft column / Div, roughly 160px wide, featuring the main image and all additional images down below ... one below each other.

Right column / Div, the remaining width of the center column - stacked:
Product Name
Product Model
Product Price
Product Description (can be quite long for some products)
Product Attributes (can be quite long for some products - as many as 17 for some boots)
Add to Cart
Write a Review - Tell a Friend

Regardless of if there is only one image or 10 in that left column, nothing needs to wrap or out of kilter.

I've integrated the mod into my template, merged the CSS also.

It's supposed to look akin to it's current cart, X-cart. Here's an example:
https://www.oldtradingpost.com/weste...cat=313&page=1

Here's what I got:
http://www.oldtradingpost.com/old-we...oducts_id=3259

If you roam around the new site (/old-west-store/), and you look at products that have little product description and/or images compared with those that have a lot of either or both ... and you'll see that the layout is not consistent at all.

What am I missing? What do I have too much of?
Calgon - take me aw ... ooops.

Let me know if you need anything else to help me figure this out.
Thanks in advance!

[ckosloff]

What am I missing? What do I have too much of?...

The second link looks more like the template I put together.
The decision if it suits your site is yours, there might be other display layouts that work better for you.
You have to play with tpl_product_info_display.php, move blocks around, then create divs and customize them in CSS, that's all there is in this mod.
Now I have a question for you, where did you get the form to customize the boot?
Looks very slick, is it part of your template?
Thanks.