Skip navigation
TikiVooDooTrucker
TikiVooDooTrucker Calculating status...
Currently Being Moderated

Marking Products "SALE" and "Out Of Stock"

Aug 2, 2012 8:16 PM

Categories: eCommerce Tags: #out #of #bold #red #mark #stock #sale #jscript

I was informed the only way to add bold red "SALE" on products in catalogues and product pages as well as "Out Of Stock" is "by using some js/styles".  Has any one created these codes as of yet and if so... where would I put them once I have them?  Thanks.

306 Views   5 Replies   Latest reply: Liam Dilley, Aug 6, 2012 9:12 PM
 
Replies
  • Liam Dilley
    4,051 posts
    Feb 28, 2012
    Currently Being Moderated
    1. Liam Dilley,
    Aug 2, 2012 9:28 PM   in reply to TikiVooDooTrucker
    Report

    It is all up to you and your layout and your apporach to it.

    You can do this in pure CSS if you like, You can make images for each and css hide them and use the tags availible for on sale for example to know to then show that item on a product when this occurs.

    You would do it for the small product layout, if your using small product backup on there and if you wanted these also to show on the large product layout.
    It is down to your specific requirements really as there a lot you can do.

     
    |
    Mark as:
  • TikiVooDooTrucker
    Currently Being Moderated
    2. TikiVooDooTrucker,
    Aug 6, 2012 8:03 PM   in reply to Liam Dilley
    Report

    Within a Catalogue, I want all products which have been clicked "on Sale" when uploaded, to have next to the price and under the thumbnail the word "SALE" in bold red.  The only way you would know a product is on sale right now is if you click on the product and go to the product page and see the priced crossed out and the sale price underneath.  If the bold, red "SALE" could be on the product page as well... great.  But more importantly, the "SALE" on the Catalogue pages.  AND... Is displaying the words "Out Of Stock" even possible?  Does someone already have these codes ready and could possibly tell me where to insert them into into my web?  Thanks.

     
    |
    Mark as:
  • mario_gudelj
    1,579 posts
    Oct 13, 2010
    Currently Being Moderated
    3. mario_gudelj,
    Aug 6, 2012 9:09 PM   in reply to TikiVooDooTrucker
    Report

    There is a tag {tag_onsale} available inside the product layouts that will render either 1 or 0, depending on the "On Sale?" setting inside the product details. You can then use this inside a class, like this: <div class="im-on-sale-{tag_onsale}">SALE</div> and then setup your CSS like this:

     

    .im-on-sale-0{display:none}

     

    or you can do it other way around, which is probably better as it will eliminate the flash of sale text.

     

    Cheers,

     

    -mario

     
    |
    Mark as:
  • Liam Dilley
    4,051 posts
    Feb 28, 2012
    Currently Being Moderated
    4. Liam Dilley,
    Aug 6, 2012 9:11 PM   in reply to TikiVooDooTrucker
    Report

    It is not something you can just stick some code in.

    Depends on your site so people would need to first see it.

     

    Steps are along the lines of:

    Add a span with word sale in the places you want it to show up.

    Add a class to the small product layout containing element of the whole thing - likely to be a div.

     

    so the class would use the tag and be - sale{tag_onsale}

    Then anything when this is true can be targeted.

    You hide the span by default in your css using display:none;

    And then when it is on sale and the class is sale1 you then display:block;

    Style it up red and as you need.


    Like I mentioned, it depends on the exact method and layout you have on how.

     
    |
    Mark as:
  • Liam Dilley
    4,051 posts
    Feb 28, 2012
    Currently Being Moderated
    5. Liam Dilley,
    Aug 6, 2012 9:12 PM   in reply to mario_gudelj
    Report

    Ahh crap, I took a call, you beat me to it Mario

     
    |
    Mark as:
Actions

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points