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.
