Announcement

Collapse
No announcement yet.

SALE Image Overlay

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

  • 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, 05:08 PM.
    Joanne Barker
    VS Web Design
    [email protected]

  • #2
    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.
    Jeff

    The Wedding Printer

    Comment


    • #3
      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.
      Joanne Barker
      VS Web Design
      [email protected]

      Comment


      • #4
        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>
        Joanne Barker
        VS Web Design
        [email protected]

        Comment


        • #5
          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; }
          Jeff

          The Wedding Printer

          Comment


          • #6
            Brilliant!
            Joanne Barker
            VS Web Design
            [email protected]

            Comment


            • #7
              Site is looking great Joanne, Good Job!
              TheCartDesigner.com
              Not 3dcart Owned or Operated
              100% Independent 3dcart Expert


              Follow Us on Twitter

              Comment


              • #8
                Thanks...we're aiming to go live on the 14th! :-)
                Joanne Barker
                VS Web Design
                [email protected]

                Comment

                Working...
                X