Eliminating wrap-arounds

Thanks for all the help. The page is working great now. And also thanks for building this mod, ckosloff. It is very useful!

kpeer410:

Thanks for all the help. The page is working great now. And also thanks for building this mod, ckosloff. It is very useful!
Thank gjh42 too, who helped me getting it started.

How can i put two extra images? and how do i use it.
i just installed the mod, and want to add extra pictures.

can somebody help me?

thanx!

shop.boetieka.nl this is the used website

i want to add extra images with the products.

inlive:

How can i put two extra images? and how do i use it.
i just installed the mod, and want to add extra pictures.

can somebody help me?

thanx!

shop.boetieka.nl this is the used website

i want to add extra images with the products.
Adding additional images has nothing to do with this mod.
You can find tutorials on this in the FAQ, in the Zen Cart Manual, or by using a utility like Image Handler 2.
This contrib. simply re-arranges the way these images are displayed.
By the way, I will soon publish a revised version that will have the shopping cart at the end of the product display.
You can take a look at my site (any product) to see how this displays.

First of all, a HUGE thank you for this mod! It's an incredible improvement over the stock layout & I was having such a hard time trying to edit the layout (being a noob and all).

I was wondering if you have suggestions on how I can tweak the layout for this type of product which uses attributes:
click here

As you can see, the attributes table is pretty far down & it looks as if it's aligning with the additional image.

I'm not sure how to fix it and I would hate to mess up the layout for the other products because I finally like the way my product page looks! :clap:

Edited to add: I just checked and it seems the problem is only in FF. In IE it's aligned pretty much perfectly.

CharInLasVegas:

I was wondering if you have suggestions on how I can tweak the layout for this type of product which uses attributes...
You put your attributes in a table inside the description.
This is unrelated to the mod., precisely the scope of the mod is tableless layout
Your attributes are loaded normally, first Option Names (you have layout options there), then Option Values, etc.
There is an in-depth explanation for this in the Zen Cart Manual.
Buy it, it will help you a lot.
Also, check out this thread:
http://www.zen-cart.com/forum/showthread.php?t=109195

Thanks, that thread helped a bit. I'll have to keep tweaking it.

I did, by the way, buy the book. The way the attributes work are just really confusing to me (and I have lots of attributes in my osc shop, it's just done very differently).

CharInLasVegas:

Thanks, that thread helped a bit. I'll have to keep tweaking it.

I did, by the way, buy the book. The way the attributes work are just really confusing to me (and I have lots of attributes in my osc shop, it's just done very differently).

If I page like this, it looks really nice with the pictures going down the side of the page. Just gotta get everything else lined up.

First of all, thank you SO MUCH for this mod. It's an enormous improvement over the default product info page. I was just about to give up on having an appealing looking layout.

I have run into some trouble with the Add to Cart button, though.

If there are no attributes for a product, it behaves- it sits directly below the product description, just how I want it. However if a product does have attributes, it sneaks down to the bottom of the page.

http://smarmyclothes.com/newstore/

I'm admittedly a total noob when it comes to php and css, but this is the first time I haven't been able to find a solution after a few hours of tinkering. I would appreciate any help!

smarmyclothes:

If there are no attributes for a product, it behaves- it sits directly below the product description, just how I want it. However if a product does have attributes, it sneaks down to the bottom of the page.
IMHO that is the correct behavior.
If you have attributes, customer looks first at products, then attributes, then makes his choice.
But you can have the Add to Cart button in the middle if you would.
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.

ckosloff:

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.

smarmyclothes:

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.

<?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?main_page=product_info&cPath=26&products_id=3&zenid=c024a633794ba80f8507efda6dd7be71

And when there are attributes (bad):
http://smarmy.us/newstore/index.php?main_page=product_info&cPath=26&products_id=1&zenid=c024a633794ba80f8507efda6dd7be71

Thank you so much for taking a look!!

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.

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. :wacko:

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. :wacko:
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.

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

smarmyclothes:

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.

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/western_store/product.php?productid=3259&cat=313&page=1

Here's what I got:
http://www.oldtradingpost.com/old-west-store/index.php?main_page=product_info&cPath=34_307_313&products_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 ... :blush: ooops.

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

beyre:

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.