Add to cart button multiple displays (top and bottom of page)

Hello all,
I'm a bit new to web programming so please forgive me if this is a silly question. I'm trying to modify my template pages so that I have the price field, qty and "add to cart" buttons displayed twice - once at the top of the page, once at the bottom. This is so that customers wont' have to scroll up or down very far to add anything to the cart.

To do this, I've tried to modify the template file: tpl_product_info_display.php

I've copied the following bit of code in the two respective areas in order to get the display to come out twice:

<!--bof Product Price block --> <h2 id="productPrices" class="productGeneral">Price: <?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 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 = '<table><tr><td class="productCartSpacing">'.PRODUCTS_ORDER_QTY_TEXT . '<input type="text" name="cart_quantity" value="' . (zen_get_buy_now_qty($_GET['products_id'])) . '" maxlength="6" size="4" />' . zen_get_products_quantity_min_units_display((int)$_GET['products_id']) . '</td><td class="productCartSpacing">' . zen_draw_hidden_field('products_id', (int)$_GET['products_id']) . zen_image_submit(BUTTON_IMAGE_IN_CART, BUTTON_IN_CART_ALT).'</td></tr></table>';
        }
$display_button = zen_get_buy_now_button($_GET['products_id'], $the_button);

?>

<?php if ($display_qty != '' or $display_button != '') { ?> <?php echo $display_qty; ?> <?php echo $display_button; ?> <?php } // display qty and button ?> <?php } // CUSTOMERS_APPROVAL == 3 ?> <!--eof Add to Cart Box-->

However when I do this and I try to add the product to the cart from the products page, it will only add qty 1, never any other quantity other than 1 no matter what qty I type in, even if I put in 0.

I've tried putting the same number in both fields, and this makes it work (e.g. put in 3 on both the displayed qty fields, then clicking on either of the "add to cart" buttons).

But if i put in a quantity other than 1 in either field, it seems to only want to read from the other frield which is defaulted to 1.

I know the problem is in the fact that this bit of code is displayed twice, but I can't seem to understand how the form submits the quantity.

Any help would be much appreciated.

Thanks!

Dave

Well you have hit the nail on the head with your description of the problem. You are effectively asking to store two different bits of data in the same place. It just won't work. Here are your options as I see it.

1. Do away with the quantity boxes and only have the buy now buttons. Which can be done in admin.

2. Only have one of the quantity inputs and two buttons

3. Create two forms on the page so that the quantity input is directly associated to one buy now button

2 and 3 are going to involve some coding. 1 is probably the simplest.

(There is another issue in that a page shouldn't really contain two elements with the same ID. Most browsers will get over this but it is not correct.)

I think i'm gonna have to go with option 3, recode it. But i'm not sure where this code is specified. By the looks of it, it's in the functions file, not the templates?

Any hints would be much appreicated. I have no idea what i'm doing, but very keen to learn.

(Should probably ready about form submits first)

No, it will all happen in tpl_product_info_display.php. You need to go through that file carefully and identify all the elements of the existing form. (which includes attribute entry and hidden fields) And then repeat them outside the existing form and with a different ID/name. You will probably want to move the closing </form> of the original form higher up the page as in the default version the original form spans the whole page. Then you will have two distinct forms on the page both of which will redirect the shopper to the cart.

This is going to be a bit of a challenge if you do not have too much php / html knowledge :smile: and attributes are going to be interesting if you use them....

Here's a point to start. Copy everything between:

<!--bof Form start-->

and

<!--bof Form close-->

And paste it directly under:

<!--bof Form close-->

That way you have repeated the whole form on the page. (Ignoring the issues with both forms having the same ID for the moment)

Check that both forms work. Then start deleting chunks of the bottom form one by one. You'll be left with something like this as the bottom form:

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


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




<!--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 Form close-->
</form>

Good luck!

Niccol,
Just tried your suggestions. It works! Thanks for the help.

However I don't understand your comments regarding the form ID. I've looked through the code and the only ID elements I can spot refer to layout issues and are not within any form tags.

You mentioned that there are risks with using the same ID. What would these be? I've tested the new code and it seems to be all ok. What sort of bugs should I be looking for?

Cheers.

Well, you probably won't see any bugs at all. Most browsers are pretty robust at dealing with this kind of thing.

The deal is that an ID is intended to be unique on a page, so only one element has an ID. If more than one element needs the same styling you need to use a class.

What this means is that your page will not validate. (http://validator.w3.org/). Which means that your page is not correctly formed.

How important that is is open to discussion. Personally I think it is worth validating pages unless there is a really good reason not to. If a page is not validated then fault finding becomes a real mess. (Effectively what you are saying is 'why isn't the browser displaying my screwed up page in a non-screwed up way?')

I think in your case you can probably just change the id of the second form to whatever you want. And then change all the ids inside the form to something else (for instance change #addCart to #addCart2) and then add these new names to the stylesheet like

#addCart, #addCart2 { blah blah blah }