Magento New Product Icon

17

Magento can be tough for newbie’s to wrap their heads around. If you’re new to Magento, chances are you’re scared of touching any code out of fear it’ll kill your website. The truth is that unless you’re deleting chunks of core code, that’s unlikely to happen – as such Magento is a good platform to play around with.

One of the first things that we recommend you should learn is how to add a new product icon for new products. As your inventory rises it’s always nice to be able to make products stand out through their own unique icon. Visitors to your website will be able to see that any new products are in fact new, as the icon will show up in wherever you tell it to in your theme.

1. Manage attributes

Go to Catalogue -> Attributes -> Manage Attributes. Set up a new attribute at this page and call it ‘Boolean’. Set its ID as new_product. Under your advanced options, you will have the option to select it as a front end product. Do this. Now you simply have to add the new attribute to your custom attribute if you are using one. If not, set it to default. Save the new product.

You will now have a new product in your catalogue which has a Boolean flag set to yes. The next stage involves taking this new product icon and putting it in your front end.

2. Make it show

Now that you have a product icon with a Boolean flag, it’s time to make this show on your front end. This is achieved by accessing template files: templates/catalog/product/list.phtml and templates/catalog/product/view/media.phtml.

<div class="product-image">

<?php if($_product->getNewProduct()) { ?>

<div class="new-product"></div>

<?php } ?>

<?php

$_img = '<img id="image" src="'.$this->helper('catalog/image')
->init($_product, 'image').'" 
alt="'.$this->htmlEscape($this->getImageLabel()).'" 
title="'.$this->htmlEscape($this->getImageLabel()).'" />';

echo $_helper->productAttribute($_product, $_img, 'image');

?>

</div>

As you can see, above, your new product is shows in ‘$_product->getNewProduct’. The next step is to ensure that your CSS is set up to show your product with Boolean flag. You need to make the product_class relative to the position of the icon. So:


.products-grid .product-image { position: relative; display:block; width:244px; height:156px; margin:0 0 10px; }

.new-product {

position: absolute;

right: 0;

top: 0;

width: 65px;

height: 66px;

display: block;

z-index: 2;

background: url(../images/new-product.png) no-repeat; 

3. Save

Save your changes and ensure that your code is correct before doing so. Now, every time you add a new product and it goes on sale through your front end, it’ll have an icon and Boolean flag.