10 replies [Last post]
BigMike's picture
Offline
Joined: 10/20/2008
Juice: 1123
Was this information Helpful?

I have been trying to figure this out for a while..

I've narrowed my searches down to uc_product.module with the following function:


function uc_product_add_to_cart_form($node) {
$form = array();
$form['#base'] = 'uc_product_add_to_cart_form';
$form['nid'] = array('#type' => 'value', '#value' => $node->nid);
if ($node->default_qty > 0 && variable_get('uc_product_add_to_cart_qty', false)) {
$form['qty'] = array('#type' => 'textfield',
'#title' => t('Quantity'),
'#default_value' => $node->default_qty,
'#size' => 5,
'#maxlength' => 6,
);
}
else {
$form['qty'] = array('#type' => 'hidden', '#value' => 1);
}
$form['submit'] = array(
'#type' => 'submit',
'#value' => variable_get('uc_product_add_to_cart_text', t('Add to Cart')),
'#id' => 'edit-submit-'. $node->nid,
'#attributes' => array(
'class' => 'node-add-to-cart',
),
);
return $form;
}

I tried changing the $form['submit'] = array to the following:

$form['submit'] = array(
'#type' => 'image',
'#src' => '

<?php
print base_path() . path_to_theme()
?>

/images/bg_cart.gif',
'#value' => variable_get('uc_product_add_to_cart_text', t('Add to Cart')),
'#id' => 'edit-submit-'. $node->nid,
'#attributes' => array(
'class' => 'node-add-to-cart',
),

But with no success.

Then, I realized there are a lot of different areas where the "Add to Cart" button is displayed, and I think I am really opening up a huge can of worms over here.

Any advice on this?

Thanks!
BigMike

thill's picture
Offline
Joined: 01/25/2008
Juice: 815
Re: How do I skin my "Add to Cart" buttons?

I used the following instructions and module, worked great for me, there may be a better solutions, but i was in need of a quick fix.

http://www.primalmedia.com/blog/how-replace-add-cart-button-image-ubercart

Francois's picture
Offline
Joined: 08/19/2008
Juice: 390
This worked for me

I got it here:
http://drupal.org/node/62647#comment-258485

.add_to_cart .form-submit { /* hide the submit button and put in a fancy little image, instead */
background-color: transparent; /* hide standard button display stuff */
border: none; /* hide standard button display stuff */
background-image: url(images/addtocart.png); /* put in fancy image */
background-repeat: no-repeat;
vertical-align: -1px;
height: 16px; /* fancy image height */
width: 146px; /* fancy image width */
text-indent: 200px; /* move the 'Search' text on the button to the right */
word-spacing: 10em; /* and space it out -- both of these shouldn't be necessary, but the combination makes all our browsers style this correctly */
text-align: right; /* see above */
cursor: pointer; /* make the mouse give the right feedback - IE stupidity, again */
}
BigMike's picture
Offline
Joined: 10/20/2008
Juice: 1123
Re: This worked for me

I don't know why I never thought to use the style sheet. I am so accustomed to using...

<input type="image" src="images/addtocart.png" .........

Thanks guys! I got it taken care of Smiling Work'n great!

tekad's picture
Offline
Joined: 10/21/2008
Juice: 160
Re: Re: This worked for me

> I don't know why I never thought to use the style sheet. I am so accustomed to using...

Because using <button> tags or <input type="image"> is the real solution... CSS styling for <input type="submit> does not work across every browser and is not web standards compliant. True it will work for most, but not for Camino on my Mac

BigMike's picture
Offline
Joined: 10/20/2008
Juice: 1123
tekad wrote:> I don't know
tekad wrote:

> I don't know why I never thought to use the style sheet. I am so accustomed to using...

Because using <button> tags or <input type="image"> is the real solution... CSS styling for <input type="submit> does not work across every browser and is not web standards compliant. True it will work for most, but not for Camino on my Mac

Wow, interesting, thank you for this information Sir!

melchoir55's picture
Offline
Joined: 08/13/2010
Juice: 71
Re: tekad wrote:> I don't know

This worked well for me, but I have an annoying side effect. I can no longer right-align the image on my screen because this sets the width of the object to be only the size of the picture. Thus, aligning right doesn't actually move the object on a product display. If I increase the width to standard such that alignment would work, I get the "add to cart" text floating in space.

Is there any way to deal with this through css? I am worried I need to rewrite the output of the module.

Edit:
Used contemplate and put a div wrapper around the whole thing. Then I just themed that wrapper.

BigMike's picture
Offline
Joined: 10/20/2008
Juice: 1123
Hello UC, I've *finally* made

Hello UC,

I've *finally* made the jump to UC 2.x and have a problem with the Wish List buttons.

In UC 1.x, Wish List buttons had the following style for every Wish List button:
input #edit-wishlist

But in UC 2.x, Wish List buttons have:
input #edit-wishlist-1
input #edit-wishlist-2
input #edit-wishlist-3

Etcetera.

So in the past, when I ran the CSS posted above, it worked because every Wish List button had the same ID but this is no longer true in UC 2.x as all Wish List buttons displayed on the same page have their own unique ID now.

There is another style associated with each Wish List button that isn't unique, and that is the class "form-submit", but there are no ancestor styles that have any reference to the button being a Wish List button or not. So if I went with this class style, then I assume all of my buttons would have the Wish List theme which of course isn't good.

I did notice that if there is only one Wish List on the page, then it will have the good ol' "#edit-wishlist" ID, but as soon as there are multiple products, they start getting their own unique class ID.

Any ideas?

BigMike's picture
Offline
Joined: 10/20/2008
Juice: 1123
Re: Hello UC, I've *finally* made

Today marks 8 months. Can anyone help me with this please?

Thanks
Mike

BigMike's picture
Offline
Joined: 10/20/2008
Juice: 1123
Re: Re: Hello UC, I've *finally* made

Ok this seems to be working:

  div.add-to-cart form div input.form-submit,
    #edit-wishlist { background-image: url(##_Wish_List_Button_##); }

  /* This add_to_cart must be beneath the wishlist to override it */
  div.add-to-cart form div input.node-add-to-cart { background-image: url(##_Add_To_Cart_Button_##); }

Basically, I am setting the Wishlist button image first for all Wishlist Inputs and also for all form-submit inputs, which include the Add To Cart buttons, and then after that is set, we re-set the button image for the node-add-to-cart input which is inclusive to both styles but fortunately exclusive to the actual Add To Cart button.

What do you guys think? So it's a play on CSS to achieve this. I am gonna spend some time reading through uc_wishlist.module to see if I can find where #edit-wishlist-1, #edit-wishlist-2, #edit-wishlist-3, et cetera is being called and then just add an extra class called "wishlist".

It's so simple it's retarded yet no one can fix it yet...

jaimegdias's picture
Offline
Joined: 11/04/2013
Juice: 3
Re: Re: Re: Hello UC, I've *finally* made

Hey mate, I really appreciate that!
I was having trouble finding out and hardcoding every path to the background images while figuring out how to apply style to the ubercart buttons until I found about those variables (##_Variables_##) I didn't knew about.
Awesome tips, thanks!