Where to wrap/unwrap code (see screenshots)

[krow]

Hi,

I've been fairly successful thus far getting the buy now box about where we need it by changing around the tpl_product_info_display.php page. Below is the code of how I got the attributes *in* the buy now box. But the attributes end up *on top* of that buy now button. It looks like this:





I'd like the attributes to be to the side of it in the blank area.



Here is the code of how I got the attributes in there (on top). Just trying to figure out where/how to move them to the side:

<!--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
  }
?>
<br class="clearboth" />
<!--eof Attributes Module -->
<!--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-->

Any one have a workaround of how to get this to work?

Thanks!
k

[kuroi]

The thing that usually gets in the way of laying out this page is the <br class="clearboth" /> tags. They give the page some structure and prevent some train wrecks, but at the cost of impeding fine tuning of the sort you wish to achieve.

You have changed your code around and not shown what comes after the add to cart box, but I suspect you might just find one of these BR drawing an invisible line under your add to cart box and right acros the center column, then stopping your attributes from crossing it.

[krow]

Hello, Thanks for the quick reply!

Hmm.. actually, I didn't see a br in there (unless I missed it). That was a problem I worked on originally where I had too much white space *above* the atts/buy now box. I went in and removed all the breaks and it changed nothing!

This little trick was found by accident where I had not (yet) assigned atts to this specific product, though the code was there for it to be in the atts/buy box. When I saw this, it eliminated the white space above the atts/buy box (was a problem in a different post), and it made me think this would work just fine if I can get the atts to the *side* of the buy now button (as in the 2nd screen shot).

Here's the code following (as you mentioned)... nothing special I suspect.

<!--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
  }
?>
<br class="clearboth" />
<!--eof Attributes Module -->
<!--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-->
</div>

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

As mentioned, there are some breaks in there, but they haven't seemed to affect anything. So, back to just trying to figure out how... once I assign those atts to this specific product, how to get them to land to the *side* of this buy button, rather than on top of it).


Any ideas on how to do that?

Thanks in advance for any input.
k

[kuroi]

If I understand correctly, you want to allow the attributes which you have moved ahead of the add the cart box to sit alongside them. However at the end of your attributes section you have a <br class="clearBoth"> tyag whose job is to keep them apart.

It would be heaps easier (and much more fun) to help you if I could see the site rather than trying to work out what's happening from small snippets of screenshot and inference from the code.

[krow]

Hi kuroi, much obliged to your help. Just sent a pm with link, etc.

btw.. just went and took out that break after the atts, and it didn't budge a thing.

k

[krow]

Hello again,

Here is the general link to the store if this helps:
www.dolceboutique.com/store

(ducking head awaiting for flying tomatoes and other odd objects... don't throw too hard... still working on this)! hehehe.

Please let me know if there's anything else I can provide to help with this issue.

Thanks,
k

[kuroi]

OK. There are quite a few problems here.

The BR tag was just one of the things preventing your layout from working as you want. Another is that there simply isn't enough space in the box you have created for the attributes and the add to cart button to sit next to each other. There are also some general coding issues.

Most importantly you have two boxes with ID buybox floated right (through the use of the class froward) with one nested inside the other. At the very least, I would recommend renaming one (you shouldn't have two objects on the same page with the same ID), floatig one left (by changing the class to "back") and taking the one instead the other, out. This will make it much easier to see what is going on.

[krow]

OK. There are quite a few problems here.

The BR tag was just one of the things preventing your layout from working as you want. Another is that there simply isn't enough space in the box you have created for the attributes and the add to cart button to sit next to each other. There are also some general coding issues.

Most importantly you have two boxes with ID buybox floated right (through the use of the class froward) with one nested inside the other. At the very least, I would recommend renaming one (you shouldn't have two objects on the same page with the same ID), floatig one left (by changing the class to "back") and taking the one instead the other, out. This will make it much easier to see what is going on.

Yeah, I saw those and thought they were kind of odd (that's how they were copied and pasted). Anyway, originally took one out and it did nothing so I put it back in just in case it was there for some obscure requirement.

With you input, I changed the 1st buybox to "back" and uploaded it. It bumped the entire "pink" box to the left (don't want it there). So, I changed that line to it's original "forward" and then changed the 2nd buybox line to "back". That brought the pink box to the right again (good). But, nothing else on the page seem to change. (in other words, both buybox lines are still in there, just the 2nd one says "back").

Also, I took out the break at the end of "eof Attributes". It did nothing. Something in there has got to let me drop these atts *into* the pink box!

Anything else I should try or adjust in the code?

Thanks,
k

[kuroi]

This is not working because you have a whole series of problems to be fixed. You're going to have to trust me a bit and stop reversing each step when it doesn't fix the whole problem .

Let's take several steps at once. You won't like the end result but it will show you that what I'm suggesting is heading in the right direction and then we can refine it.

Replace that whole block of CSS in your stylesheet under the comment /*Shopping Cart Display*/ with this:

/*Shopping Cart Display*/
#buybox {margin: 0; padding: 3px; width: 500px; text-align: center; background: #fdeaec; border: 1px solid #b08694;}
#buybox BR .clearBoth {clear:none}
#productAttributes {float: left; width: 300px}
.wrapperAttribsOptions {margin: 0.3em 0em; text-align: left; background-color: #fdeaec;}
#attribsOptionsText {float:left; width:100%; margin: 0; padding: 0.5em 5px; border: 1px solid #b08694; background-color: #d6477d; color: #FFF; text-align: center; }
.optionName {color: #580c84; margin: 0; font-weight: bold; padding-left: 3px; text-align: left; background: #fdeaec; width: 8em;}
#cartImage {margin: 0.5em 1em;}

Also, you say that you cut and pasted that buybox stuff. Where from? as it's not part of core Zen Cart and clearly needs to be fixed. But I'm curious to know where it came from in the first place to see if there's a problem elsewhere.

[krow]

Ok, I've pasted exactly what you said in the correct place and it worked! It put the pink box in the right place with the atts horizontally next to the buy button! That's fantastic!

Wait.. was the trick simply upping the width to 500px? Good night!... how infuriating that I didn't see that! (slap me next time I dig into code for hours without taking a break)!

Well, All I need to do now is go in and fix it up a bit to make the entire pink box not quite as wide. Gotta figure out how to shorten up that darker-pink heading box in there (where it says "Please Choose") as it looks like that is where the table breaks and then move the entire thing up a bit to get rid of the white space above it.

As for where the snippet of code came from, I found it here on a forum post and copied and pasted it to see what would happen. When I pasted it in, it worked out fine. I moved some of the code around a bit to play with some adjustments (shows you that I know just enough to be dangerously stupid). hehehe.

Let me go see if I can find where I found it at... ah.. found it..

Here's the link to it:
http://www.zen-cart.com/forum/showth...ight=%23buybox

I did a forum search for "#buybox" and it came right up.

Thank you for your help!

("Yer a Peach!")

Well, I'm off to job #1 to "inspect a different kind of code".
See yall later today!

k