Zen Cart Logo
Forums / Templates, Stylesheets, Page Layout / Where to wrap/unwrap code (see screenshots)

Where to wrap/unwrap code (see screenshots)

Locked

Views: 2,169

Results 1 to 14 of 14
This thread is locked. New replies are disabled.
20 Aug 2006, 11:12 PM
#1
krow avatar

krow

New Zenner

Join Date:
Aug 2006
Location:
Southern US
Posts:
38
Plugin Contributions:
0

Where to wrap/unwrap code (see screenshots)

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

20 Aug 2006, 11:32 PM
#2
kuroi avatar

kuroi

Totally Zenned

Join Date:
Apr 2006
Location:
London, UK
Posts:
10,475
Plugin Contributions:
11

Re: Where to wrap/unwrap code (see screenshots)

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.

20 Aug 2006, 11:41 PM
#3
krow avatar

krow

New Zenner

Join Date:
Aug 2006
Location:
Southern US
Posts:
38
Plugin Contributions:
0

Re: Where to wrap/unwrap code (see screenshots)

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

20 Aug 2006, 11:58 PM
#4
kuroi avatar

kuroi

Totally Zenned

Join Date:
Apr 2006
Location:
London, UK
Posts:
10,475
Plugin Contributions:
11

Re: Where to wrap/unwrap code (see screenshots)

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.

21 Aug 2006, 12:06 AM
#5
krow avatar

krow

New Zenner

Join Date:
Aug 2006
Location:
Southern US
Posts:
38
Plugin Contributions:
0

Re: Where to wrap/unwrap code (see screenshots)

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

21 Aug 2006, 12:14 AM
#6
krow avatar

krow

New Zenner

Join Date:
Aug 2006
Location:
Southern US
Posts:
38
Plugin Contributions:
0

Re: Where to wrap/unwrap code (see screenshots)

Hello again,

Here is the general link to the store if this helps:
https://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

21 Aug 2006, 12:42 AM
#7
kuroi avatar

kuroi

Totally Zenned

Join Date:
Apr 2006
Location:
London, UK
Posts:
10,475
Plugin Contributions:
11

Re: Where to wrap/unwrap code (see screenshots)

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.

21 Aug 2006, 12:54 AM
#8
krow avatar

krow

New Zenner

Join Date:
Aug 2006
Location:
Southern US
Posts:
38
Plugin Contributions:
0

Re: Where to wrap/unwrap code (see screenshots)

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.

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

21 Aug 2006, 9:55 AM
#9
kuroi avatar

kuroi

Totally Zenned

Join Date:
Apr 2006
Location:
London, UK
Posts:
10,475
Plugin Contributions:
11

Re: Where to wrap/unwrap code (see screenshots)

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 :yes:.

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.

21 Aug 2006, 12:04 PM
#10
krow avatar

krow

New Zenner

Join Date:
Aug 2006
Location:
Southern US
Posts:
38
Plugin Contributions:
0

Re: Where to wrap/unwrap code (see screenshots)

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/showthread.php?t=36118&highlight=%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

21 Aug 2006, 12:40 PM
#11
kuroi avatar

kuroi

Totally Zenned

Join Date:
Apr 2006
Location:
London, UK
Posts:
10,475
Plugin Contributions:
11

Re: Where to wrap/unwrap code (see screenshots)

krow:

Wait.. was the trick simply upping the width to 500px?No. That snippet does way, way more than that.

in addition to upping the box width to 500px, it reduces the product attributes div to 300px to create space to the right and then floats it so that the add cart box can float up alongside it. It also turns off the clearBoth class attached to the <br class="clearBoth" /> that I keep banking on about, and finally, it turns off an unnecessary background-color that was open invitation to the IE Peekaboo bug.

However, I still see this as a lash job that really needs code changes to make it robust. I threw in all those CSS changes simply to bump you past the place where you were stuck, rather than as a complete solution.

I have taken a quick look at the link. I couldn't see anything in Clyde's suggestion (which in itself I quite like and will probably use myself) that leads to this double declaration of <div id="buybox"> and it clearly is wrong, both syntactically and IMO stylisticly. I strongly recommend getting rid of one of them and ensuring that then have the right number of </div> tags.

21 Aug 2006, 11:56 PM
#12
krow avatar

krow

New Zenner

Join Date:
Aug 2006
Location:
Southern US
Posts:
38
Plugin Contributions:
0

Re: Where to wrap/unwrap code (see screenshots)

Thank you very much for all your help and input kuroi. It is much appreciated! I'm glad I was able to find the post for you and to know this little snippet might even be of some use to you. I'd be interested to see how you put it to use some time.

Thank you again!
k

22 Aug 2006, 2:51 AM
#13
krow avatar

krow

New Zenner

Join Date:
Aug 2006
Location:
Southern US
Posts:
38
Plugin Contributions:
0

Re: Where to wrap/unwrap code (see screenshots)

Hi kuroi,

I have another brain teaser for you on this unique atts/buy box:

Is it possible to create that atts/buy box for only certain pages? In other words, that atts/buy box works great for that specific product. What if I add different products to which say.. have no atts and don't need that box that size? (this would just leave the buy now button in that pink box, only smaller without room for atts.

I presume this is possible in some fashion. Needless to say, I am hoping the solution to this isn't highly involved. If it is, then no worries. I'll leave it as is and work around it. But, thought it might be interesting to see if there's an easy solution to it.

Thank you,
k

22 Aug 2006, 7:41 PM
#14
krow avatar

krow

New Zenner

Join Date:
Aug 2006
Location:
Southern US
Posts:
38
Plugin Contributions:
0

Re: Where to wrap/unwrap code (see screenshots)

Or.. perhaps anyone who might be following this topic?

Thanks,
k