Home » Forums » Ubercart » Support

Rearranging Add to Cart button

Submitted by Nick on Wed, 10/03/2007 - 18:15
Nick
Posts: 55
 Joined: 08/17/2007

Does anyone know what needs to be edited in order to change the position and image used in the add to cart button?

Basically my site has this:

[Quantity]

[Add to Cart]
Dimensions

[Huge portion here that has lots of information on the product]

Price

I want to move the Add to Cart button from the top of the page to somewhere in the [huge portion] section that details the product. If possible, I would like to add multiple add to cart buttons throughout the page.
permalink #1 Wed, 10/03/2007 - 18:51
Ryan

Posts: 5269
 Joined: 08/07/2007
AdministratorHead Code Monkey - I eat bugs.

You can accomplish these things with a custom node template for the product content type (or whatever class content types you've created). You can use the Contemplate module (http://drupal.org/project/contemplate) to do this through an admin form or you can create a node-product.tpl.php file in your theme. There are some more experienced guys around here that have done some cool things with product pages... you might look through the live site listings and see if you find one you like.

permalink #2 Thu, 10/04/2007 - 11:48
Nick
Posts: 55
 Joined: 08/17/2007

Ok another quick question, nothing big but if anyone happens to know the answer off the top of their heads please feel free to share. If not, I will just keep playing around with UC to find the answer.

Regarding the attributes fields on the product pages. How would I go about displaying them on one line? I tried adding some css (display: inline) to contemplate, but that wasn't it.

div class="inlinetext"
?php print $node->content['add_to_cart']['#value'] ?
/div

For example, I currently have:

[Product description]

Quantity:
[input]

Color:
[input]

[Add to Cart]

I want to change it to:

[Product description]

Quantity: [input] | Color: [input] | [Add to Cart]

Any thoughts are greatly appreciated.

Thanks

permalink #3 Thu, 10/04/2007 - 16:09
aswalla

Posts: 50
 Joined: 08/17/2007
Getting busy with the Ubercode.Spreading the word - Ubercart for president.

hey Nick - the add_to_cart function gets its theme in uc_product.module under theme_uc_product_add_to_cart

The default output is

function theme_uc_product_add_to_cart($node){
  $output = '<div class="add_to_cart">';
  $output .= drupal_get_form('uc_product_add_to_cart_form_'. $node->nid, $node);
  $output .= '</div>';
  return $output;
}

You'll need to look into doing a custom theme for this function and putting it into your template file. The original output looks something like this:

<div class="add_to_cart">
<div class="form-item">
<label for="edit-attributes-1">Attribute One: </label>
<select name="attributes[1]" class="form-select" id="edit-attributes-1" >
<option value="1" selected="selected">A</option>
<option value="2">B
</option>
</select>
</div>
</div>

I guess technically you don't need to create a new theme for this function but you'll need to define the css for the "add_to_cart" class and everything within it. Play around with that as I know its doable since bwv did it on his site here:
http://greystokefarm.com/store/catalog/training/leather_halter

permalink #4 Thu, 10/04/2007 - 16:26
Nick
Posts: 55
 Joined: 08/17/2007

Thank you very much aswalla that is a huge help.

Do you know if I would be able to call the function theme_uc_product_add_to_cart from any page? Example:

My product page is node 15, what would happen if I add this line to my homepage:

<?php
theme_uc_product_add_to_cart('15');
?>

Would that print out the add to cart information for node 15?

Thanks

permalink #5 Thu, 10/04/2007 - 16:45
Lyle

Posts: 2244
 Joined: 08/07/2007
AdministratoreLiTe!

Almost, but not quite.

<?php
  $node = node_load(15);
  $output = theme_uc_product_add_to_cart($node);
?>

is what you need. Then you can print $output or do whatever you want with it.

permalink #6 Thu, 10/04/2007 - 16:53
aswalla

Posts: 50
 Joined: 08/17/2007
Getting busy with the Ubercode.Spreading the word - Ubercart for president.

Hi Nick, i don't believe this will work as it runs into a problem trying to call: uc_product_add_to_cart_form_

You're better off theming the frontpage with blocks created in Views that have the "add to cart" field in them for instance.

cheers,
Aaron

permalink #7 Thu, 10/04/2007 - 18:10
Nick
Posts: 55
 Joined: 08/17/2007

That did it. Thank you guys for all the help, I am loving Ubercart so far Smiling

permalink #8 Tue, 11/13/2007 - 20:54
poobux
Posts: 3
 Joined: 11/13/2007

I've been trying (without success) to understand how to change the styling of Catalog line items. What I see (and identically when I create custom Views instead of using the Catalog) is that products are displayed in rows with alternating background colors (odd/even) and there is a blank line beneath each line with the product info. This doubles the height of my product list in a way which to me seems completely unnecessary. The product_add_to_cart_form is the product data item which causes this -- if I comment out the 'Add to Cart' form, the line items collapse as desired to one line each.

I have done some CSS and several Drupal sites, but I don't know how to get started with changing the height of the Add to Cart form. And BTW, it seems to me that lots of developers would prefer the more compact presentation.

permalink #9 Thu, 11/15/2007 - 00:35
poobux
Posts: 3
 Joined: 11/13/2007

I found that the Row Height Problem only exists with the Garland/Minelli theme, it goes away if you change themes, which gives me as big a clue as I probably need.