Add to Cart button graphic

[cmebd]

I would like to customise the Add-To-Cart button with a background graphic rather than the auto-generated button and need some help with where/which stylefile I would add this to and also what changes I would need to make in core files, if any?

Always grateful for help.

Cheers
Christine

[Brent]

Replace the add_to_cart.tpl in template/default/shared with this.

Code: Select all

<div id="<?php echo $this_controller.'_'.$product['product_id']; ?>" class="add" <?php if(isset($button_font)){echo 'style="font-size: '.$button_font.'px"'; }?>>
<?php $button_path = HTTP_CATALOG . 'catalog/styles/' .$this->style . '/' . 'image' . '/';?>
<?php $loadpath = "$('#mini_cart').load('index.php?controller=addtocart&action=add&";?>
 <input type="image" src="<?php echo $button_path . 'AddToCart.png';?>" id="<?php echo $this_controller.'_add_'.$product['product_id']; ?>" onclick="<?php if(isset($image_display) && $image_display != 'no_image'){?>$.add2cart('<?php echo $this_controller.'_image'.$product['product_id']; ?>','cart_content'); <?php }?><?php echo $loadpath; ?>'+GetData(<?php echo "'".$product['product_id']."','".$this_controller."'"; ?>))">&nbsp;
 <?php if($product['min_qty'] > '1'){
  $i = $product['min_qty'];
 } else {
  $i = 1;
 }?>
 <?php if(@$addtocart_quantity_box != 'textbox'){?>
   <select name="<?php echo $this_controller;?>_quantity" id="<?php echo $this_controller.'_quantity_'.$product['product_id']; ?>">
     <?php while ($i <= (@$addtocart_quantity_max ? $addtocart_quantity_max : '20')){ ?>
       <option value="<?php echo $i; ?>"><?php echo $i; ?></option>
     <?php $i ++;
     } ?>				
   </select>
 <?php } else {?>
   <input name="<?php echo $this_controller;?>_quantity" id="<?php echo $this_controller.'_quantity_'.$product['product_id']; ?>" size="3" maxlength="5" value="<?php echo $product['min_qty'];?>">
 <?php }?>
 <input type="hidden" id="<?php echo $this_controller.'_min_qty_'.$product['product_id']; ?>" value="<?php echo $product['min_qty'];?>">
</div>

Put your image in catalog/styles/default/image/
If your image name can be AddToCart.png or change the name in the code above.

[cmebd]

thanks Brent.

[masupilami]

Thanks ^^ !

[CartKitteh]

Replace the add_to_cart.tpl in template/default/shared with this.

Code: Select all

<div id="<?php echo $this_controller.'_'.$product['product_id']; ?>" class="add" <?php if(isset($button_font)){echo 'style="font-size: '.$button_font.'px"'; }?>>
<?php $button_path = HTTP_CATALOG . 'catalog/styles/' .$this->style . '/' . 'image' . '/';?>
<?php $loadpath = "$('#mini_cart').load('index.php?controller=addtocart&action=add&";?>
 <input type="image" src="<?php echo $button_path . 'AddToCart.png';?>" id="<?php echo $this_controller.'_add_'.$product['product_id']; ?>" onclick="<?php if(isset($image_display) && $image_display != 'no_image'){?>$.add2cart('<?php echo $this_controller.'_image'.$product['product_id']; ?>','cart_content'); <?php }?><?php echo $loadpath; ?>'+GetData(<?php echo "'".$product['product_id']."','".$this_controller."'"; ?>))">&nbsp;
 <?php if($product['min_qty'] > '1'){
  $i = $product['min_qty'];
 } else {
  $i = 1;
 }?>
 <?php if(@$addtocart_quantity_box != 'textbox'){?>
   <select name="<?php echo $this_controller;?>_quantity" id="<?php echo $this_controller.'_quantity_'.$product['product_id']; ?>">
     <?php while ($i <= (@$addtocart_quantity_max ? $addtocart_quantity_max : '20')){ ?>
       <option value="<?php echo $i; ?>"><?php echo $i; ?></option>
     <?php $i ++;
     } ?>				
   </select>
 <?php } else {?>
   <input name="<?php echo $this_controller;?>_quantity" id="<?php echo $this_controller.'_quantity_'.$product['product_id']; ?>" size="3" maxlength="5" value="<?php echo $product['min_qty'];?>">
 <?php }?>
 <input type="hidden" id="<?php echo $this_controller.'_min_qty_'.$product['product_id']; ?>" value="<?php echo $product['min_qty'];?>">
</div>

Put your image in catalog/styles/default/image/
If your image name can be AddToCart.png or change the name in the code above.

Is this for replacing the actual "add to cart" icon?

If it is, then may I recap the instructions so that I know I'm understanding them? I haven't used Alegrocart just yet, but it's in the works. Should I simply create an image that's of the same size & resolution and put it into the catalog/styles/default/image folder? Also, would you recommend renaming the png/jpeg file "addtocart.png" (or whatever the generic name is) or altering the code to fit? What's easier?

I don't think I'll be altering any of the basic designs initially, but I wouldn't mind making my store look unique. After all, I am selling candles -- I would want the site to look as aesthetically pleasing as possible.

One more question: Is there a way to alter the order form to your liking in the system? I want to make sure that my customers are getting the best customer service possible. Thanks!

[Brent]

I would not suggest using that code to add the image button.
It was posted for 3 revisions ago.
The current add to cart has had some changes.
I will look add making it an option to add an image button that will work with the current version and has the capability to be language compliant as well.

What do you mean by Order Form? Which page or process?