Replace Add to Cart text with an Image

Modules, Add-ons and custom code that's more than just a quick hack or Mod.
Post Reply
novista
Confirmed
Confirmed
Posts: 89
Joined: Fri Jul 03, 2009 11:22 pm

Replace Add to Cart text with an Image

Post by novista »

If your category display mode is set to Grid, then Add to Cart and Choose Options are shown as links. These instructions explain how to display images instead of links. Note: For Version 5x, this is only for categories displayed in a Grid. It will have no effect on categories displayed as a List.

If you have already created a Choose Options button, move it to /templates/YourTempate/images/color. It must be named ChooseOptionButton.gif. If you have not created a Choose Options button, then for testing purposes, copy any button in that folder such as CheckoutButton.gif and rename it ChooseOptionButton.gif.

What you will be doing is creating a new Global variable called ProductAddImage in CategoryContent.php and displaying it through Snippet.CategoryProductsItem.html

This has been tested through Version 5.05. If you have any questions, contact Novista Web @ http://www.novistaweb.com

STEP 1:
Edit /includes/display/CategoryContent.php. Find the following code:

Code: Select all

if (isId($row['prodvariationid']) || trim($row['prodconfigfields'])!='') {
    $GLOBALS['ProductURL'] = ProdLink($row['prodname']);
    $GLOBALS['ProductAddText'] = GetLang('ProductChooseOptionLink');
} else {
    $GLOBALS['ProductURL'] = CartLink($row['productid']);
    $GLOBALS['ProductAddText'] = GetLang('ProductAddToCartLink');
}  
and replace it with

Code: Select all

if (isId($row['prodvariationid']) || trim($row['prodconfigfields'])!='') {
    $GLOBALS['ProductURL'] = ProdLink($row['prodname']);
    $GLOBALS['ProductAddText'] = GetLang('ProductChooseOptionLink');
    $GLOBALS['ProductAddImage'] = 'ChooseOptionButton.gif'; //<--- new
} else {
    $GLOBALS['ProductURL'] = CartLink($row['productid']);
    $GLOBALS['ProductAddText'] = GetLang('ProductAddToCartLink');
    $GLOBALS['ProductAddImage'] = 'AddCartButton.gif'; //<--- new
}
 
STEP 2:
Open Snippets.CategoryProductsItem.html and find:

Code: Select all

<div class="ProductActionAdd" style="display:%%GLOBAL_HideActionAdd%%;">
<a href="%%GLOBAL_ProductURL%%">%%GLOBAL_ProductAddText%%</a>
</div>
and replace it with:

Code: Select all

<div class="ProductActionAdd" style="display:%%GLOBAL_HideActionAdd%%;">
    <a href="%%GLOBAL_ProductURL%%"><img src="%%GLOBAL_TPL_PATH%%/images/%%GLOBAL_SiteColor%%/%%GLOBAL_ProductAddImage%%" alt="" /></a>
</div> 
Note: This example will change the links to an image on the category page only. If you want to show images on other panels such as Featured Products, New Products etc, you'll need to make those changes in the respective PHP files such as HomeFeaturedProducts.php, HomeNewProducts.php etc as well as Snippets.HomeFeaturedProductsItem.html, Snippets.HomeNewProductsItem.html etc.
Michael Kopel
NovistaWeb.com
Post Reply