Changing Layout of Product Page

Hi all,

I think I posted this in the wrong section before. My apologies if that's the case. I am very very new to Zen-Cart. Came to the forum beause the FAQ just didn't do it for me. I hope you all can help me. Just a few questions.

How flexible is the shopping cart? I was looking at the product info display page "tpl_product_info_display.php" and when I reposition the elements of the page like the picture and add to cart button, the page doesn't react very well. I know in the code they're processed in a list but is there a way to just position elements wherever you want?

Also, is there a way to drop elements of the shopping cart into a predesigned page instead of having to edit or make a custom template, to resemble the before mentioned predesigned page?

I really hope this made sense. I'm basically trying to get a product page that looks like what is at the address below.

Thank you for your time.
http://www.l337projects.com/misc/prodpage.jpg

Something like this?

http://mysticmountainnaturals.com/index.php?main_page=product_info&cPath=32&products_id=10

Ok, I'll bite. What Mod would you be using, Clyde?
Your page/site looks good and would like to setup attributes & purchase within same area, as you have.

Rob,

I'm using my own modifications to tpl_product_info_display.php.

involved moving things around and adding a a couple of new declarations to the stylesheet. (actually with version 1.3.6 I created a new stylesheet (product_info.css) to handle the styling.

clyde you are amazing. that is very much like what I need in terms of layout. is there a particular template you used or did you customize that all yourself?

also i noticed the wishlist feature (something it doesn't look like zen-cart has automatically). did you program that yourself or is there an add-on somewhere that i'm just missing?

thank you for the reply.

As I said above, It is my own modification of tpl_product_info_display.php with additional declarations for styling in the stylesheet.

The wishlist was (is) and older MOD with some updating to work with version 1.3+
I just checked the archived download section as well as the current downloads and didn't see it in either place.

You might do a search for wishlist (I know there is a section or thread somewhere on the forum where you can get more information.

Nicely done, Clyde. Sounds like you have done what I did with a site, http://reelstackle.com, as far as rearranging and using new stylesheets.

Hope you don't mind if use your layout as an example, to create my own code for doing the same as you did? Any specific Mods being used or is it just home-rolled coding?

Rob,

No mods just home rolled.

I added a couple of CSS "boxes" to take care of floating things right and left and getting what I wanted where I wanted.

The rest was just moving things around.

I don't mind at all; please, go ahead and use the layout.

Thanks Clyde. :smile:

I see I see. Well this gives me more faith in the flexibility of Zen-Cart. I will see if I can rearrange things well enough to duplicate. Would it be alright if I continue to ask you questions here or PM you?

I found a wishlist mod with some help files for it.

Thanks again, for the speedy responses.

Fo the wishlist try here:
http://www.zen-cart.com/forum/showthread.php?t=48988&highlight=wishlist

I don't mind at all. If you run into problems please contact me.

Just remember, when you start to move things around be sure to move EVERYTHING between the <!--bof xxxxxxx --> and <!--eof xxxxxxxx ->

Hi Rob,

Your page is what I need to do. I simply want to add the previous-listing-next at the top and also move the ADD TO CART to the bottom of the page next to the write a review and tell a friend.

How do I make the changes and where to move the ADD TO CART box and add the previous-next?

Thanks in advance,
Dave

Hi Dave,

includes/templates/template_default/templates/tpl_product_info_display.php

What I did was rearranged the code to have things display where I wanted. The above file is the default one so make sure to put in your 'custom' dir. if using Template overrides.

Hi Website Rob,

I am such a novice at the coding aspect. I think I found the code:

        <?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);

?>

But what do I need to change to make the ADD TO CART appear at the bottom of the page and the quanity in stock to be hidden? I see the previous/next is already set for the top.

This is all Russian to me!!!!

Can you tell me how to translate the Russian code to English to change the location of the ADD TO CART (bottom of the page) and how to hide the quanity in stock?

Thanks so much. I know us morons must drive you crazy with return posts after you answered our previous posts. We need a little hand holding. :*)

Thanks again in advance,
Dave

OK looks like you've found the first step.

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

Next in the same file find:

<!--eof Reviews button and count -->

Now cut everything from <!--bof Add to CartBox --> and <!--eof Add to CartBox --> and paste it below <!--eof Reviews button and count -->

Save the file to YOUR_TEMPLATE -> templates folder and then upload to your server.

I pretty much did as described by Clyde.

• Moved down all code inbetween <!--bof Add to Cart Box --> and <!--eof Add to Cart Box -->
  put code for 'Add to Cart' option below all product information and options.

• Moved up all code inbetween <!--bof Product details list --> and <!--eof Product details list -->
  TEXT_PRODUCT_MODEL
  TEXT_PRODUCT_WEIGHT
  TEXT_PRODUCT_QUANTITY
  TEXT_PRODUCT_MANUFACTURER

• Added in line breaks <br /> at various places for nicer look.

Hi Rob,

I moved the ADD TO CART the way you described and then starting turning off boxes to get the layout the way I wanted, but when I went to check the ordering I encountered a problem.

I do a test order and then click add to cart and it goes to a screen saying Shopping Cart is Empty when I just ordered.

I have looked everywhere for something I might have shut off, but must be overlooking something.

Could it be in the code I used when I moved the ADD TO CART?

        <?php
$display_qty = (($flag_show_product_info_in_cart_qty == 0 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== 0) {
          // hide the quantity box and default to 1
          $the_button = '<input type="hidden" name="cart_quantity" value="0" />' . 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);

?>

<div id="cartAdd">
<?php
  echo $display_qty;
  echo $display_button;
        ?>
      </div><div align="center">

I do not have any clue and read through every FAQ in the tutorial.

Please let me know what you think it could be.

Thanks,
Dave

Without a URL it's hard to tell what the problem could be.

From the code you posted though, this is different:
** </div><div align="center">**

Where did the 'align=center' come from and do you have a closing div somewhere?

Yeah, I tried to center the ADD TO CART button, but I just deleted the <div align="center">

I do not know if you can see why it does not work by going to the shopping cart page:

http://pageallaboutit.com/order/index.php?main_page=product_info&cPath=1_3&products_id=1

You might see some code in the source that could help me out. I appreciate you taking a moment to translate the Russian code and see how I screwed it up.

Dave

This is from the stylesheet and controls the position of the add to cart button.

#cartAdd {
/float: right;/ try deleting this.
text-align: center;
margin: 1em;
border: 1px solid #000000;
padding: 1em;
}