Change Info Page Layout

[wmorris]

Well I use to have a thread on this forum somewhere and I can't find it. But anyways here is a link of my info page for an example:

http://www.morrisgiftshop.com/index....roducts_id=612

What I want to try to do is move the Product Title above the Picture image. Then make the Product Price twice a bigger the one in red. Center the product image. Then move the add cart button below the Price or below the # in stock. Then move the products discription below the image.

[kobra]

You will have to edit a copy for your template of tpl_product_info_display.php

Placing the image code first followed by a clear both statement to start with

[wmorris]

here is a copy of my tpl_product_info_display.php

<?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 3435 2006-04-14 03:42:46Z ajeh $
 */
 //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 -->
  <!--eof 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-->
  <?php echo '<div id="leftFloat"' . ' style="width:' . (MEDIUM_IMAGE_WIDTH + 40) . 'px">'; ?>
<!--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 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 id="friendReview">
  <!--bof Tell a Friend button -->
  <?php
  if ($flag_show_product_info_tell_a_friend == 1) { ?>
  <div id="productTellFriendLink"><?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"><?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>'; ?><p class="reviewCount"><?php echo ($flag_show_product_info_reviews_count == 1 ? TEXT_CURRENT_REVIEWS . ' ' . $reviews->fields['count'] : ''); ?></p></div>
  <?php } else { ?>
  <div id="productReviewLink"><?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>
  <?php
  }
}
?></div>
  <!--eof Reviews button and count -->
  <br style="clear:left" />
  <!--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="2" />' . zen_get_products_quantity_min_units_display((int)$_GET['products_id']) . '' . 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;
            ?>
			<?php 
?>
  </div>
  <?php } // display qty and button ?>
  <?php } // CUSTOMERS_APPROVAL == 3 ?>
  <!--eof Add to Cart Box-->
   <br class="clearBoth" />
   </div> <!-- end of leftFloat -->
  <div id="rightFloat">
  <!--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)) { ?>
  <div id="freeShippingIcon"><?php echo TEXT_PRODUCT_FREE_SHIPPING_ICON; ?></div>
  <?php } ?>
  <!--eof free ship icon  -->
  

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

  <br class="clearBoth" />
  <!--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 -->
  </div> <!-- end of rightFloat -->
    
  <br class="clearBoth" />
  <!--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 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>

[kobra]

Start with this edit in red

<?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 3435 2006-04-14 03:42:46Z ajeh $
 */
 //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 -->
  <!--eof 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-->
  <?php echo '<div id="leftFloat"' . ' style="width:' . (MEDIUM_IMAGE_WIDTH + 40) . 'px">'; ?>
<!--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" />

[wmorris]

Ok, I got that changed. Now what do need to do next?

[kobra]

Well seeing this, part of this is in the cherry_zen template

[wmorris]

Yes, I am using the Cherry Zen template.

[kobra]

I am not familiar with the inner workings of that template

Might look for a support thread for it

[wmorris]

Thanks for your time.

[schoolboy]

In the DEFAULT template, the tpl_product_info_display.php elements are "identified" by the following commented lines:

<!--bof element name --->
(some code then follows here...)
<!--eof element name --->

As it is with kobra, I am not experienced with cherry zen, but it looks like there's been some "blending" of elements, because the "identifier" for certain functional aspects has now been structured as a PHP comment and not a HTML comment.

A HTML comment is structured as follows:
<!--this sentence will not show up in a browser --->

A PHP comment is structured as follows:
/**
* this sentence will not show up in a browser
*/

While it is possible to shift the order and display of elements by moving the code about, I would be cautious with cherry zen... I imagine (looking at the way its been changed) that a lot of the design elements are more reliant on the CSS rather than the order in which they appear in the code.