TPL_product_info-display.php HELP PLEASEEEE

Hello, I have been trying to do this for MONTHS! Basically it is suppossed to BE SUPER EASY, just moving the parts of code between <!--bof ZZZZZZZZZ Module --> and <!--eof ZZZZZZZZZ Module -->

and in fact it is, I just have to move them in the order I want them to show, the hard part is to get what I really want! Because every single small goobling (piece of code) looks to have its own mind! they do extrange things but never what I want to.

for example, the main image looks to have some sort of alignement because it goes always at the left side no matter what you change or where I move the code. and when, for example i placed the aditional images under the main image code, i get some images at the right sde of this image and then some other under this image, looks like this image is located into a cel or something making even harder to find a way to fix this, in other words, anything under the main image has toi have a size no bigger than the image because if its larger it will go under the image and not in the right side as desired, ths is something imposible to do because there are products with 2 images and some others with 20.

then, the attributres controller tends to give more spaces to the atriburtes or even put the last atribute under the "add to cart button" when I put that part of the code above the add to cart button code.

and when I put the add to cart button code at the end, it shows ON the "featured products banner" cutting that banner.

I have tried

<DIV style="float:right"> </DIV> too but i get other undesired effects like moving all the aditional pitures to the right and making a complete mess where the add to cart button appears like an additional pitures and where spaces between atributes are uneven, this is a mess.

At the end, all asnwers are the same, just move the codes, but this is not working, I really realllly need help :(

What do I need to change or/and to add in order to get this: (attchd image)

Is there any need to change the main images file? (tpl_modules_main_product_image)

Do I need to use align, float, &nbsp "clearBoth or any other thing? (I have tried all this looking fort a solution in google but it is ovious that i will not go anywhere without knowing what do i need to do exactly.

Just in case: you can check the online store at www.SnSbikinis.com

Thank you!! :)

PS.- Just in case

here is the code of the actual tpl_product_info_display.php file

<?php /** * Page Template * * Loaded automatically by index.php?main_page=product_info.<br /> * Displays details of a typical product * * @package templateSystem * @copyright Copyright 2003-2011 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 19690 2011-10-04 16:41:45Z drbyte $ */ //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', $request_type), '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--> <!--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--> <!--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 class="clearBoth" /> <!--bof Add to Cart Box --><DIV style="float:right"> <?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 ?> </DIV><!--eof Add to Cart Box--> <!--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 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 --> <!--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 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 --> <!--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 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>

My inclination is to move page elements around with the stylesheet rather than in the code whenever possible. Install the Firefox browser and the Firebug plugin for Firefox so you can easily experiment with stylesheet changes without changing anything permanently until you're ready, using the Live Edit option. One way to approach your desired layout would be to add to the bottom of stylesheet.css:

#cartAdd {
margin: 4.5em 0px 0px -18em;
}

#productAttributes {
margin: -3.3em 0 0 0;
}

You should also create your custom template before going any further so you don't lose your edits the next time you upgrade Zencart:

http://www.zen-cart.com/content.php?180-how-do-i-create-a-new-custom-template

rbecq:

Hello, I have been trying to do this for MONTHS! Basically it is suppossed to BE SUPER EASY, just moving the parts of code between <!--bof ZZZZZZZZZ Module --> and <!--eof ZZZZZZZZZ Module -->

OK, there are three important factors at work here, and it will help to understand what they are in order to achieve what you desire. Although possible, I doubt that anyone here will have the time give you a step by step solution.

Anyway.
Factor#1.
The moving of the parts of the code as you have done, will only affect the order in which the elements are output.
Factor#2.
It is the .CSS (cascading stylesheets) that affect where the 'elements' of the page are displayed (keeping in mind that order comes first).
Factor#3.
The actual output of any given page will depend somewhat on the browser being used and a lot on the screen size being used. You have no control over this, and in some cases (?) it is near impossible to get things to look the way you'd like with all these variables.

Nonetheless, if you take note of Factors#1 & 2. First get the order of things how you want them to be. Then using a tool like FireFox's 'Firebug' add-on, you can manipulate the .css in 'real time' and observe the effects until things display how you want (being sure to note the changes so that you can insert them into the relevant .css files to make them 'permanent'). There are other (arguably better) tools available that will perform a similar task.

If you've been making changes, refreshing the page(s), making more change(s), etc, etc, trying to get it to look right it will probably take months. Spending a day (or a few hours) learning how to use tools designed for the task will do a better job in a matter of hours, or less. Oh, and you only need to learn how to use the tools once, so future/further changes are even quicker. :)

Like most things, it is 'super easy', once you know how, and are armed with the right tools. Until then it seems like a lot of luck and a little black magic is involved.

I appreciate that this probably isn't the answer you were hoping for, but it is the best that i can do to help at this stage.

Cheers
Rod.

You Guys Rock!
thank you very much stevesh!!
This works great:
#cartAdd {
margin: 4.5em 0px 0px -18em;
}

#productAttributes {
margin: -3.3em 0 0 0;
}

I just changed some values there and everything is working good.

For those who want to perform this change or something similar in the future:

Changing the order of the code blocks does the trick but the main image has some sort of special alignemtn making the next block go to the right, not below it.

and there was a small line that was causing the mess, I know it must be someting basic for many of you guys but in my case, this little goobling was causing many problems.
The idea is this:
Ive been using this

<!--bof what you want to move --><DIV style="float:left">

and then

</DIV><!--eof what you want to move-->

ALL THIS in the tpl_info_product_display.php file.

ok this was working good but just for the part between this code, the rest was getting affected too, so it may be ovbios for many of you but it was neccesary to add a

<br class="clearBoth" />

every time at the end of each block, I dont know if this is right or may cause other problems but in my case this solves the problem.

Ive been trying to do this for months and have red many asking for the same so i really hope this could save some months to others ;)

Thank you very much!

rbecq:

I dont know if this is right or may cause other problems but in my case this solves the problem.

If it's solved the problem then you can consider that it is the 'right way' :)

However, please keep in mind that due to the nature of .css the actual display can and will change based on the clients' browser and settings. For this reason you should test/check the site using several of the most popular browsers, eg, MSIE, Firefox, Chrome & Opera.

Also try changing the screen size with each of these browsers to ensure that the pages 'flow' correctly. Sometimes it'll only take a very minor tweak to get something that looks bad in one browser but good in another, to have it look good in both. For example, a subtle difference in the size of the fonts may cause a piece of text to not fit in the space available, which will cause a line wrap, which will then affect the next elements, and well, you've pretty much already seen the effects. :)

Anyway, thanks for reporting back on this. We appreciate the feedback just as much as you (and others) appreciate the help, and yes, I'm sure your findings will be of help to someone else.

Cheers
Rod