Announcement

Collapse
No announcement yet.

SALE Image Overlay

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • vswebdesign
    replied
    Thanks...we're aiming to go live on the 14th! :-)

    Leave a comment:


  • thecartdesigner
    replied
    Site is looking great Joanne, Good Job!

    Leave a comment:


  • vswebdesign
    replied
    Brilliant!

    Leave a comment:


  • jcocking
    replied
    I am using a plain css overlay.
    HTML Code:
    <!--START: SALEPRICE-->
    <div class="price">
    <span class="price-old">25.98</span> <span class="price-new">23.75</span></div>
    <div class="sale_over"><img src="assets/templates/common/images/on_sale.png" /></div>
    <!--END: SALEPRICE-->
    I then used standard css to place the element over the image on the category page.

    HTML Code:
    .sale_over { position:absolute;z-index: 1;top: 0px;right: 3px; }

    Leave a comment:


  • vswebdesign
    replied
    Ok...so I did a premature victory dance. When I set 2 items on sale, the world came crashing down. Here's my updated code....

    For the thumbnail image area (needed to use the catalogid to identify the product needing the overlay):

    Code:
    <div style="overflow: hidden; height: 170px;"><div style="position: relative"><a href="product.asp?itemid=[catalogid]"><img src="thumbnail.asp?file=[THUMBNAIL]&amp;maxx=165&amp;maxy=0" alt="[name]" title="[name]" border="0" /></a><span id="[catalogid]"></span></div>
    To check to see if the On Sale text is present:

    Code:
    <span class="salep" data-id="[catalogid]">[product_onsale]:</span>
    And finally, the jquery code:

    Code:
    <script type="text/javascript">
    
    	$(document).ready(function() {
    		$('.salep').each(function() {
    			if($(this).html()=='[product_onsale]:') {
    				var aa = "#" +$(this).attr("data-id");
    				$(aa).html('<div style="position:absolute; top: 0; left:30px"><img src="/assets/images/SaleSash.png"></div>');
    			}
    		})
    	});
    </script>

    Leave a comment:


  • vswebdesign
    replied
    Thanks....that got me thinking and I was able to do what I wanted with a jquery script.

    Here's the line that contains my image and the div for the overlay wrapped in <span> tags with an id.

    Code:
    <div style="overflow: hidden; height: 170px;"><div style="position: relative"><a href="product.asp?itemid=[catalogid]"><img src="thumbnail.asp?file=[THUMBNAIL]&amp;maxx=165&amp;maxy=0" alt="[name]" title="[name]" border="0" /></a><span id="salebanner"></span></div>
    I also added <span> tags around the variable that displays my On Sale text:

    Code:
    <span id="salep">[product_onsale]:</span>

    I then included a small jquery function at the bottom of my category page:

    Code:
    <script type="text/javascript">
    
    	$(document).ready(function() {
    		if($('#salep').html()=='[product_onsale]:') {
    			$('#salebanner').html('<div style="position:absolute; top: 0; left:30px"><img src="/assets/images/SaleSash.png"></div>');
    		}
    	});
    </script>
    The function checks the inner HTML of the span tags with my On Sale text to see if it exists. If it does, it adds the <div> with the image overlay to the inner HTML of the <span id="salebanner"> tags.

    Leave a comment:


  • jcocking
    replied
    From what I have seen, you can only call the code blocks once. There are a couple of exceptions (i.e. pagination). Once in the code blocks, you can use the [itemsaleprice] multiple times.

    Leave a comment:


  • vswebdesign
    started a topic SALE Image Overlay

    SALE Image Overlay

    In my category pages, when an item is on sale, I'm trying to overlay a SALE image over my product image. I set the DIV that contains my image with a position of relative and then include a another div within that div to have a position of absolute and the image overlays nicely.

    Now, when I try to use the code <!--START: SALEPRICE--><div...><img..."</div><!--END: SALEPRICE-->, the rest of may page goes wonky with all the other products NOT on sale, showing the On Sale text with the sale price placeholder.

    This is the code that displays the overlay:

    Code:
    <div style="overflow: hidden; height: 170px;position: relative"><a href="product.asp?itemid=[catalogid]"><img src="thumbnail.asp?file=[THUMBNAIL]&amp;maxx=165&amp;maxy=0" alt="[name]" title="[name]" border="0" /></a><!--START: SALEPRICE--><div style="position:absolute; top: 0; left:30px"><img src="/assets/images/SaleSash.png"></div><!--END: SALEPRICE--></div>
    Is there a rule where you can only call the SALEPRICE stuff once?

    Oh, here's the page: Garlic Festival Salsas and Dip Mixes
    Attached Files
    Last edited by vswebdesign; 09-27-2013, 06:08 PM.
Working...
X