tdr170 Posted July 10, 2013 Share Posted July 10, 2013 I made a couple of mods I thought I would share with everyone. Each mod adds a ON SALE banner to the product image. ---------------Homefeatured---------------------- With this mod when you place a product on sale (check: Display the "on sale" icon) you will get a yellow banner with ON Sale similar to the NEW banner in the products image. Placed in bottom left so you could have a NEW banner as well as the ON SALE banner. (see pic) Add height:126px to the block below: (modules/homefeatured/homefeatured.css around line 21) (this keeps the banner inside the image borders) #featured-products_block_center .product_image { display:block; position:relative; overflow:hidden; height:126px } Add {if $product.on_sale}<span class="on_sale">{l s='On Sale'}</span>{/if} to homefeatured.tpl (themes/default/modules/homefeatured/homefeatured.tpl will look like this when done: <a href="{$product.link}" title="{$product.name|escape:html:'UTF-8'}" class="product_image"><img src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'home_default')}" height="{$homeSize.height}" width="{$homeSize.width}" alt="{$product.name|escape:html:'UTF-8'}" />{if $product.on_sale}<span class="on_sale">{l s='On Sale'}</span>{/if}{if isset($product.new) && $product.new == 1}<span class="new">{l s='New' mod='homefeatured'}</span>{/if}</a> Add the code below to homefeatured.css, make a space after this block #featured-products_block_center .product_image span.new and paste the code below. (around line 42) #featured-products_block_center .product_image span.on_sale { display: block; position: absolute; top: 90px; right:45px; padding: 2px 4px; width: 101px; font-size:11px; color: red; font-weight:bold; text-align: center; text-transform: uppercase; -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); background-color: yellow } -------------Product list-------------------------------- With this mod when you place a product on sale (check: Display the "on sale" icon) you will get a yellow banner with ON Sale similar to the NEW banner in the products image. Placed in bottom left so you could have a NEW banner as well as the ON SALE banner. (see pic) Add {if $product.on_sale}<span class="on_sale">{l s='On Sale'}</span>{/if} to product-list.tpl (themes/default/product-list.tpl) Will look like this when done: <img src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'home_default')}" alt="{$product.legend|escape:'htmlall':'UTF-8'}" {if isset($homeSize)} width="{$homeSize.width}" height="{$homeSize.height}"{/if} />{if $product.on_sale}<span class="on_sale_prod">{l s='On Sale'}</span>{/if}{if isset($product.new) && $product.new == 1}<span class="new">{l s='New'}</span>{/if} If you wish you can remove <span class="on_sale">{l s='On sale!'}</span> from the product-list.tpl file to remove the ON SALE from the price block on the right. (line 48) Add the code below to the product-list.css file. (themes/default/css/product-list.css) Make a space afterthis block #product_list li span.new and paste the code below. (around line 64) #product_list li span.on_sale_prod { display: block; position: absolute; top: 90px; right:45px; padding: 2px 4px; width: 101px; font-size:11px; color: red; font-weight:bold; text-align: center; text-transform: uppercase; -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); background-color: yellow } 1 Link to comment Share on other sites More sharing options...
prerana Posted September 12, 2014 Share Posted September 12, 2014 I made a couple of mods I thought I would share with everyone. Each mod adds a ON SALE banner to the product image. ---------------Homefeatured---------------------- With this mod when you place a product on sale (check: Display the "on sale" icon) you will get a yellow banner with ON Sale similar to the NEW banner in the products image. Placed in bottom left so you could have a NEW banner as well as the ON SALE banner. (see pic) Add height:126px to the block below: (modules/homefeatured/homefeatured.css around line 21) (this keeps the banner inside the image borders) #featured-products_block_center .product_image { display:block; position:relative; overflow:hidden; height:126px } Add {if $product.on_sale}<span class="on_sale">{l s='On Sale'}</span>{/if} to homefeatured.tpl (themes/default/modules/homefeatured/homefeatured.tpl will look like this when done: <a href="{$product.link}" title="{$product.name|escape:html:'UTF-8'}" class="product_image"><img src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'home_default')}" height="{$homeSize.height}" width="{$homeSize.width}" alt="{$product.name|escape:html:'UTF-8'}" />{if $product.on_sale}<span class="on_sale">{l s='On Sale'}</span>{/if}{if isset($product.new) && $product.new == 1}<span class="new">{l s='New' mod='homefeatured'}</span>{/if}</a> Add the code below to homefeatured.css, make a space after this block #featured-products_block_center .product_image span.new and paste the code below. (around line 42) #featured-products_block_center .product_image span.on_sale { display: block; position: absolute; top: 90px; right:45px; padding: 2px 4px; width: 101px; font-size:11px; color: red; font-weight:bold; text-align: center; text-transform: uppercase; -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); background-color: yellow } Image1.jpg -------------Product list-------------------------------- With this mod when you place a product on sale (check: Display the "on sale" icon) you will get a yellow banner with ON Sale similar to the NEW banner in the products image. Placed in bottom left so you could have a NEW banner as well as the ON SALE banner. (see pic) Add {if $product.on_sale}<span class="on_sale">{l s='On Sale'}</span>{/if} to product-list.tpl (themes/default/product-list.tpl) Will look like this when done: <img src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'home_default')}" alt="{$product.legend|escape:'htmlall':'UTF-8'}" {if isset($homeSize)} width="{$homeSize.width}" height="{$homeSize.height}"{/if} />{if $product.on_sale}<span class="on_sale_prod">{l s='On Sale'}</span>{/if}{if isset($product.new) && $product.new == 1}<span class="new">{l s='New'}</span>{/if} If you wish you can remove <span class="on_sale">{l s='On sale!'}</span> from the product-list.tpl file to remove the ON SALE from the price block on the right. (line 48) Add the code below to the product-list.css file. (themes/default/css/product-list.css) Make a space afterthis block #product_list li span.new and paste the code below. (around line 64) #product_list li span.on_sale_prod { display: block; position: absolute; top: 90px; right:45px; padding: 2px 4px; width: 101px; font-size:11px; color: red; font-weight:bold; text-align: center; text-transform: uppercase; -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); background-color: yellow } Image2.jpg Hi, I had a small doubt. The Prestasho pversion I am using is 1.6. I am using this theme - http://www.templatemonster.com/demo/45950.html Now according to this demo, the SALE banner appears on the Discount products in the left column. I was wondering If I can customize the code such that the SALE banner appears on all discounted products? It would be of great help if you can answer. Thanks in advance. Regards, Prerana Link to comment Share on other sites More sharing options...
Recommended Posts