Rearranging Add to Cart button

19 replies [Last post]

Wed, 10/03/2007 - 17:15

Nick

Offline

Joined: 08/17/2007

Juice: 95

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.

Wed, 10/03/2007 - 17:51

#1 View page

Ryan

Offline

Joined: 08/07/2007

Juice: 15450

Re: Rearranging Add to Cart button

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.

Thu, 10/04/2007 - 10:48

#2 View page

Nick

Offline

Joined: 08/17/2007

Juice: 95

Re: Re: Rearranging Add to Cart button

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

Thu, 10/04/2007 - 15:09

#3 View page

aswalla

Offline

Spreading the word - Ubercart for president.

Joined: 08/17/2007

Juice: 105

Re: Re: Re: Rearranging Add to Cart button

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

Thu, 10/04/2007 - 15:26

#4 View page

Nick

Offline

Joined: 08/17/2007

Juice: 95

Re: Re: Re: Re: Rearranging Add to Cart button

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

Thu, 10/04/2007 - 15:45

#5 View page

Lyle

Offline

Joined: 08/07/2007

Juice: 6854

Re: Re: Re: Re: Re: Rearranging Add to Cart button

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.

Mon, 06/15/2009 - 01:44

#6 View page

Umka

Offline

Joined: 06/11/2009

Juice: 42

Lyle wrote:Almost, but not

Lyle wrote:

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.

Hello, I have a little bit different problem. I can't see wich node is loading. What shall I do, if I wanted to load this form only on node-product.tpl.php page?
Sorry for my English, I'm from Russia.

Mon, 06/15/2009 - 09:22

#7 View page

Lyle

Offline

Joined: 08/07/2007

Juice: 6854

Re: Lyle wrote:Almost, but not

node-product.tpl.php already has a $node variable, so you don't need to try to load it again. You can just add this to that file.

<?php
  print theme('uc_product_add_to_cart', $node);
?>

This is actually the proper way to call theme functions, as opposed to what I mentioned earlier. This allows you to have a theme that overrides theme_uc_product_add_to_cart() with itsthemename_uc_product_add_to_cart().

Mon, 06/15/2009 - 15:44

#8 View page

Umka

Offline

Joined: 06/11/2009

Juice: 42

Re: Re: Lyle wrote:Almost, but not

Thx Lyle for your help, maybe a wrote a litle bit wrong. Let me explain what I meant. This form "uc_product_add_to_cart" appears on catalog page and in product page. I want to themize this form using css, and show all this block inline on product page, but I don't want that this play with css could touch catalog page.
So in the end I want to have "two" forms, one displayed by default, and another one whith my modification.
Hope you will understand

Thu, 10/04/2007 - 15:53

#9 View page

aswalla

Offline

Joined: 08/17/2007

Juice: 105

Re: Re: Re: Re: Re: Rearranging Add to Cart button

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

Thu, 10/04/2007 - 17:10

#10 View page

Nick

Offline

Joined: 08/17/2007

Juice: 95

Re: Re: Re: Re: Re: Re: Rearranging Add to Cart button

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

Tue, 11/13/2007 - 19:54

#11 View page

poobux

Offline

Joined: 11/13/2007

Juice: 12

Two-line Line Items

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.

Wed, 11/14/2007 - 23:35

#12 View page

poobux

Offline

Joined: 11/13/2007

Juice: 12

Eureka -- Found Difference

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.

Wed, 07/21/2010 - 14:14

#13 View page

alexmalka

Offline

Joined: 07/16/2010

Juice: 6

Multiple quantity fields in product page or cart

Hi there Ryann. How are you? I have a client for whom I'm building an e-commerce for a jean company. It will be open to the public but there are role for agents who sell the jeans. Here is the problem, the jeans have the following sizes 26,27,28,29,30,31,32,33,34,35,36. The agent must be able or on the product or on the cart page to choose quantity's for all these sizes and that they calculate the total price. The sizes do not have different prices its just for the agent to be able to make a bulk purchase per product. Basically multiple quantity field one for each size. How would i go about this? Is there a module for this or is there a way a text attribute can input numbers that will multiply the price.

Thanks in advance I really appreciate any help possible as i'm in the final stage of this project and that is pretty much all that I'm missing, that and continuous music in background of pages with pop up player.

Thu, 07/08/2010 - 13:44

#14 View page

csdesignco

Offline

Joined: 02/10/2010

Juice: 230

Re: Rearranging Add to Cart button

I came up with a crazy and interesting method for doing a custom "Add to Cart" button today. This is just a sample setup, each user would implement it differently, if at all:

// Print the standard "add to cart" button and use javascript to hide the button
<div id="add_to_cart_box"><?php print $node->content['add_to_cart']["#value"]; ?></div>
<script type="javascript">document.getElementById('add_to_cart_box').style.display='none';</script>
// Print a new link that executes the above button "onclick", hide this link by default, and use javascript to display it
<a id="add_to_cart_link" style="display:none;" href="#" onclick="document.getElementById('uc-product-add-to-cart-form-<?php print $nid; ?>').submit();">Here is the Link Text or Image</a>
<script type="javascript">document.getElementById('add_to_cart_link').style.display='normal';</script>

Now, it requires JavaScript to be enabled, but since you use JavaScript to hide the "Add to Cart" button and replace it with the text above, you have a win-win situation because those users with JavaScript disabled will have the old fashioned "Add to Cart" button.

-----
csdesignco.com

Tue, 07/03/2012 - 03:48

#15 View page

chebureque

Offline

Joined: 05/17/2012

Juice: 14

Inline quantity & add to cart

So guys, did anyone managed to theme these two elements in one line? I need to get them inline in a table view of catalog, cause at this moment it looks just horrible - lines are get stretched by 4 sizes in height. Additionally I'd like to remove the "Qty" label.
Now, in a table view of catalog "add to cart" button & "Qty" field with label looks like this:
[qty label]
[qty field]
[add to cart button]
And I need them to look like this:
[qty field][add to cart button]
I'm not a programmer so any help would be mush appreciated, thanks in advance!

I'm using ubercart 3 & drupal 7.

Attachment	Size
table view.png	24.39 KB

Mon, 08/20/2012 - 22:38

#16 View page

ascii122

Offline

Joined: 04/20/2010

Juice: 33

re:Inline quantity & add to cart

I was wanting the same thing for a site we're working on that has no images or even body for products. I just want a table as compact as possible.

I searched and SEARCHED and finally figure this out.

Go to views and edit _uc_catalog
/admin/structure/views/view/uc_catalog/edit

edit (configure) field: Add to cart form

Go down to
Style settings
--> Customize field HTML
choose DIV
select
Create a CSS class

and put
container-inline
then apply and save the view. Clear cache and you *should* have inline form (see attached).

Much nicer!

Attachment	Size
inline_add_to_cart.jpg	33.55 KB

Tue, 01/22/2013 - 14:53

#17 View page

TL100

Offline

Joined: 01/21/2013

Juice: 6

Re: re:Inline quantity & add to cart

Just what I was looking for. Nice work!

Wed, 07/18/2012 - 08:13

#18 View page

make-online-shop

Offline

Joined: 01/01/2011

Juice: 356

I managed to change ADD TO CART button image thanks to this

Hello,

I managed to change ADD TO CART button image thanks to this:

http://www.primalmedia.com/blog/how-to-replace-the-add-to-cart-button-wi...

But I would also like to put this button (or a second one) on top of the product page, could you tell me how to do ?

Thanks a lot.

Tue, 08/21/2012 - 12:55

#19 View page

DanZ

Offline

Joined: 08/07/2011

Juice: 1623

Re: I managed to change ADD TO CART button image thanks to this

This is done via custom theming to generate your HTML. You have custom code to render the product node how you want, with as many "add to cart" buttons as you could possibly want.

The advice above is good for older versions of Drupal/Ubercart. See the theming and development forums for more information, or check with the drupal documentation. There's a lot of information about exactly this thing.

	User login
	Log in using OpenID: What is OpenID? Username or e-mail: * Password: * Remember me Log in using OpenID Cancel OpenID login Create new account Request new password

Ubercart

Navigation

User login