Ocean Front Template Support Thread

[Doodlebuckets]

Let me play around with the template but I'm thinking that it will take separate per-page stylesheets to get it right.

login.css
shopping_cart.css
and one for each of the checkout pages.

the change would be
.centerColumn {
margin: auto;
width: 792px;
}

Clyde, that's perfect! Thanks :)

[clydejones]

Clyde, that's perfect! Thanks :)

Glad its working.

Just a note: a width setting of between 650 and 670 will give you a more centered look.

.centerColumn {
margin: auto;
width: 792px;
}

[Doodlebuckets]

Glad its working.

Just a note: a width setting of between 650 and 670 will give you a more centered look.

.centerColumn {
margin: auto;
width: 792px;
}

That's actually what I did and I am please with the look of it :) On another note, can you take a look at how my sideboxes display when there are many subcategories? Ie, http://www.babygiftbasketstores.com/...=index&cPath=9
Is there a fix for this?

[clydejones]

That's actually what I did and I am please with the look of it :) On another note, can you take a look at how my sideboxes display when there are many subcategories? Ie, http://www.babygiftbasketstores.com/...=index&cPath=9
Is there a fix for this?

I'm thinking that the list of subcategories is extending the sidebox_content.png beyond its default 750px height.
The only fix I can think of would be to edit the image and increase the height.

[clydejones]

I'm thinking that the list of subcategories is extending the sidebox_content.png beyond its default 750px height.
The only fix I can think of would be to edit the image and increase the height.

Here you go..

Just unzip the file and drop the graphic into includes/templates/ocean_front/images.

Attachment 4386

[Doodlebuckets]

Here you go..

Just unzip the file and drop the graphic into includes/templates/ocean_front/images.

Attachment 4386

Wow, thanks, I'll uploaded it shortly! I was wondering if you would give me your opinion. I had someone criticize (constructively of course) my Doodlebuckets product pages, saying all the info was too far below the board. See here: http://www.doodlebuckets.com/store/h...gy-p-2535.html
I like the additional images where they are and I think the attributes should all come before the add to cart button so that people won't miss their choices.

Compare that to the ocean_front template product page: http://www.babygiftbasketstores.com/...roducts_id=951
What do you think of how things stack up now? Do you think one of your product info display template mods would better suit my setup? I would really like to know what you think :o)
Thanks!

[Doodlebuckets]

Here you go..

Just unzip the file and drop the graphic into includes/templates/ocean_front/images.

Attachment 4386

That did it! Woo Hoo! I can't wait to finish this store up and launch it :)

[clydejones]

Wow, thanks, I'll uploaded it shortly! I was wondering if you would give me your opinion. I had someone criticize (constructively of course) my Doodlebuckets product pages, saying all the info was too far below the board. See here: http://www.doodlebuckets.com/store/h...gy-p-2535.html
I like the additional images where they are and I think the attributes should all come before the add to cart button so that people won't miss their choices.

Compare that to the ocean_front template product page: http://www.babygiftbasketstores.com/...roducts_id=951
What do you think of how things stack up now? Do you think one of your product info display template mods would better suit my setup? I would really like to know what you think :o)
Thanks!

I think I'd have the attributes above the add to cart button (maybe reduce the the font size a bit). I like the way the dodlebuckets.com page is displayed:
(image and description on the left other info on the right.)

On the babygiftbasket site, if you turn off the sideboxes on the product info page, you'll have a bit more space to work with.

I'm not sure which of the product info display mods would work best. You'll probably have to work with each one in order to find something that works.

I'd do something like this:
Product Name Product Price (this at the top and in one line)
Rewards points info on this line
Product Image Product Attributes
Product Description Add to Cart Button

Hope this is useful.

[Doodlebuckets]

Here is a product with a lot of attributes: http://www.babygiftbasketstores.com/...roducts_id=957
What do you think? I used one of your template mods and rearranged a bit. I don't know how to get the name and price on the same line. I put the code above the beginning of the left column (the <div id="productbox"> code). Below is the code with the changes I made...if you think there's a tweak that will make it nicer and can tell me how to change the code, I would be happy to see how it looks :)

Do you think it's OK to have the sideboxes off and still have people navigate around? I do plan on adding the advanced cross-sell, so that will help people find similar stuff. I just don't want people to get stuck and not find their way back to the other product lines. So many shoppers are not 'net savvy. I want to make sure that they can find what they are looking for easily...

[scr]

<?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 $
 */
 //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-->

<div id="mainProductBox">
<!--bof Product Name-->
<h1 id="productName" class="productGeneral"><?php echo $products_name; ?></h1>
<!--eof Product Name-->
<!--bof Product Price block -->
<p 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']);
?></p>
<!--eof Product Price block -->
<!-- bof Product Box -->
<div id="productbox">

<!-- bof rewards points -->
<?php
 if (MODULE_ORDER_TOTAL_SC_ORDER_PRODUCT_POINTS == "true") {
    $store_credit = new storeCredit();
    $products_id = (int)$_GET["products_id"];
    $rewards_amount = $store_credit->_retrieve_reward_amount($products_id);
    if ($rewards_amount != $currencies->format(0)) {
    echo sprintf(TEXT_SC_PRODUCTS_INFO, $rewards_amount);
    }
  }
?>
<!-- eof rewards points -->
<!--bof Main Product Image -->
<!--<div id="imagebox">-->
<?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
  }
?>
<!--</div>-->
<!--eof Main Product Image-->

<br class="clearBoth" />

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

<!--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_manufacturer == 1 and !empty($manufacturers_name)) ? '<li>' . TEXT_PRODUCT_MANUFACTURER . $manufacturers_name . '</li>' : '') . "\n"; ?>
<!--  <?php // echo '<li>' . zen_image(DIR_WS_IMAGES . zen_get_products_manufacturers_image($_GET['products_id'])) . '</li>'; ?> -->

  </ul>
<br class="clearBoth" />
<?php
  }
?>
<!--eof Product details list -->

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

</div>
<!-- eof Product Box -->

<div id="productPurchaseBox">
<div id="buybox">
<!--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 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 id="QuantityDiscountsBox">-->
<!--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
  }
?>
<!--</div>-->
<!--eof Quantity Discounts table -->

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

<!--<br class="clearBoth" />-->
</div>
</div>

</div>
<br class="clearBoth" />
<hr />

<!--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>
<!--eof Form close-->

<br class="clearBoth" />

</div>

[/scr]

[clydejones]

Do you think it's OK to have the sideboxes off and still have people navigate around? I do plan on adding the advanced cross-sell, so that will help people find similar stuff. I just don't want people to get stuck and not find their way back to the other product lines. So many shoppers are not 'net savvy. I want to make sure that they can find what they are looking for easily...

I don't think you need to change and/or tweak anything.

As far as the sideboxes go, I'm of two minds.

first with the sideboxes off on the product info page, If they add the product to the shopping cart, they are taken to the shopping cart page which will have the sideboxes and they can then select from the categories. Kinda like, "I picked this product and I don't see any chance to look at something else; I might as well go ahead and put it in my shopping cart."

second, You might be right, and go ahead and give them a chance to change their mind about this particular product.