Attributes aligned with add to cart

How can I make it so my attributes are horizontal with the add to cart button ? Directly to the left or right doesnt matter.

Thanks

Alter the order of things in a copy of tpl_product_info_display.php

Depending on your desired order - - a bit of css tweaking might be necessary

Posted via Mobile Device

The order is not the answer. It forces it above or below the div. I can't seem to find where to either incorporate it into the div. Or alter the div to allow it to fit in.
Posted via Mobile Device

The order is not the answer. It forces it above or below the div.
The attributes div is full width.....
kobra:

Depending on your desired order - - a bit of css tweaking might be necessary

is this controlled by tpl_modules_attributes? PHP is my weakness and I have no idea where i start on this one. how do I define a fixed width? Or am I looking in the wrong place?

is this controlled by tpl_modules_attributes? PHP is my weakness and I have no idea where i start on this one. how do I define a fixed width? Or am I looking in the wrong place?
No, it is a css tweak

Post a link to your install if you require assistance from the community

Can break link to your site by adding ONE space as in

http: //www.zen-cart.com/

Well this is what Im after. basically I need to make it very clear they have to pick the options prior to purchasing.

You can't put the attributes inside the add to cart box, but you can create a new div that encloses both of them and is styled like a box. Using float left or right and eliminating clear left/right/both from between the elements will let them be side by side.

I cant believe I made this out to worse than it was, but thank you for all your help. I may tweak this around abit but it was way too simple. What kept throwing me off was I kept looking for div "productAttributes" that shows in firebug.

in my stylesheet
#boxleft {
width: 500px;
float: left;
}
#boxright {
width: 300px;
float:right;
}

in tpl_product_info_display

<div id="boxleft"> <!--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> <div id="boxright"> <!--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>

end result.

Again thank you guys for kicking me in the right direction

You could have gotten identical results without touching tpl_product_info_display.php at all, but just putting in your stylesheet

#productAttributes {
width: 500px;
float: left;
}
#cartAdd {
width: 300px;
float:right;
}

Good to know, except I added a wrapper around both that I dont think I had done originally that Im not positive would have been as simple to do just in the stylesheet. Either way, im now a happy camper

The wrapper code is not in what you posted above, but is obviously what allows the one box around both elements. Getting that could have been done in a more rigid way in the stylesheet alone, at the cost of using a background image positioned left or right for the respective elements, and giving a fixed height to the elements.

hmm, I need to dig deeper into css. Good info either way. Its not shown in the pic or code I posted but I ended up moving the product detail list into the div with the add to cart.

Im all for learning a better way though, and you have been pushed me to learn more. Thanks :clap:

A screenshot doesn't necessarily show how an effect was achieved, so I have to ask: how did you make the box image with rounded corners and drop shadow? Is it a background image(s), or CSS3 techniques?

css3. works in varying states across all class a browsers except IE at this time. All other browsers still have the shadows and it actually looks 3d but not the curves. Im just betting on the all the class a's except ie to be fully compliant by the end of the year and ie spring next year. we will see.

Unfortunatly I made a mistake in my code and need to troubleshoot. in all browsers everything is aligned properly but on the droid and ill assume other mobile full browsers my product page gets pushed over to the right by the horizontal nav. arghhh.

That's good to hear, someone designing for nice effects with the latest technology and not limiting themselves for IE. Basic function has to take IE's limitations into account, but the more people see that other browsers look better than their version of IE, the faster they will migrate or upgrade if they can.

For instance this is how it comes out in chrome all others are somewhere between chrome and ff while ie does not show any shadows or lines or anything so still have to be cautious with using it to be functional with 50-60% of the end users while still giving ie the bird.

Im a big fan of css3 and html5 though they just offer so much more capability and reduce the need for js or flash. unfortunately cant dive 100% into them yet as not all functionality is incorporated yet across all browsers such as ff does not have animation yet so I still have to use js for many things. patience patience patience....

err, embarrassed but web kit now supports that element, never mind nothing to see here move along. chrome looks the same as ff.

:blush: