Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 12 of 12
  1. #1
    New to the CF scene
    Join Date
    Nov 2013
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    How To Compare Text Inside Div and Then Hide Text

    Hi,

    I have a category page that lists pricing for products. What I'm trying to accomplish is use JS to pull the contents inside the div that lists the price, strip out the $ sign, compare that to a price I designate. If the price inside the div is >= the price I designate, use some css to hide the price. What is the best way of going about this?

    Here's an example of a page with prices listed: Folding Chairs | FoldingChairsandTables.com

    The price is inside the div class=ProductPriceRating

  • #2
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,981
    Thanks
    56
    Thanked 557 Times in 554 Posts
    one question before we start: is it your page, the one you are linking to? I only ask because javascript is limited in its ability to interact with pages on other domains

  • #3
    New to the CF scene
    Join Date
    Nov 2013
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    It is my page. However, it's a shopping-cart platform. The amount of access they give us to certain files is limited to say the least. I wouldn't normally go about handling it this way but I don't see another way.

  • #4
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,379
    Thanks
    11
    Thanked 592 Times in 572 Posts
    does this need to work for just you, or for anybody who comes to your site?
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/9/03) IE7:0.1, IE8:4.6, IE11:9.1, IE9:3.1, IE10:3.0, FF:17.2, CH:46, SF:11.4, NON-MOUSE:38%

  • #5
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,981
    Thanks
    56
    Thanked 557 Times in 554 Posts
    ah, ok - I was going to suggest that you put a data-attrib on each div and fill it with the price, but I guess you may not be able to do that. If it's the divs with the class name "ProductPriceRating", you could do something like this:
    Code:
    <script>
    var max =17.62; // or whatever your maximum price would be 
    
    var divs = document.querySelectorAll(".ProductPriceRating");
    var txt = document.body.textContent?"textContent":"innerText";
    for (var i=0; i<divs.length; i++){
    var splits = divs[i][txt].split("$");
    var len=splits.length-1;
    var pr = splits[len];
    if(pr>max){
    divs[i].style.display="none";
    	}
    }
    </script>
    otherwise, you may have to dig around the DOM a little bit...

  • #6
    New to the CF scene
    Join Date
    Nov 2013
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I made a few changes and that did exactly what I was needing it to do. Perfect! What I did was have it change the html inside the div if the price was equal to the value I designated. I basically set a manual price for that product. Horrible way of doing it, but certain products have bulk pricing and I'd like the lowest price for a certain product displayed and this was the only way I could think of doing it. The downside now is that it will change the price on any and all products that have that same price. Could I do something like:

    Code:
    $("#CategoryContent .ProductList li .ProductImage a img[alt*='8.75']")
    and set a 'tag' inside the product thumbnails image alt attribute. This way the price and the alt tag will need to match before changing anything. What do you think?

  • #7
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,981
    Thanks
    56
    Thanked 557 Times in 554 Posts
    sorry, I've read this a few times now and I can't get my head around what it is you're trying to do. Can you give an example?

  • #8
    New to the CF scene
    Join Date
    Nov 2013
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by xelawho View Post
    sorry, I've read this a few times now and I can't get my head around what it is you're trying to do. Can you give an example?
    Sure! Sorry for the confusion. As I said prior, the access they give us to certain files is a bit limited. So in order to display certain things, I keep a word (tag) inside the products image thumbnail. Here's an example:

    Code:
    $("#CategoryContent .ProductList li .ProductImage a img[alt*='USA']").each(function( index ) {
       $(this).parents('li').find('.ProductImage').append('<img src="https://cdn2.bigcommerce.com/n-arxsrf/lxku4v/product_images/uploaded_images/usa-made.png?t=1407522778" alt="Made In The USA" class="usa-made"/>');
    });
    This searches the products image alt tag. If the word "USA" appears, then it will display an image of a flag for that product.

    So what I did with the price (with your help) was hide the price if it's set at a certain amount, and I have it displaying what I want it to say.
    Code:
    <script>
    var max = 9.49
    var divs = document.querySelectorAll(".ProductPriceRating");
    var txt = document.body.textContent?"textContent":"innerText";
    
    for (var i=0; i<divs.length; i++){
       var splits = divs[i][txt].split("$");
       var len=splits.length-1;
       var price = splits[len];
       if(price == max ){
          divs[i].innerHTML = "<em class='PriceReplace'>As Low As $8.75</em>";
       }
    }
    </script>
    This works great, but for anything with a price of 9.49 it will have it's price changed when this only needs to happen to 4-5 products. So I'd like the script to be able to compare something such as a specific word in the alt tag again, so: if any word in the alt tag is equal to the word i'm looking for AND the price is 9.49, THEN run the script and change the price.

  • #9
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,981
    Thanks
    56
    Thanked 557 Times in 554 Posts
    Ah, I get it now. But wouldn't it just be simpler to look for images with that alt text and change their caption? Or did I not get it?

  • #10
    New to the CF scene
    Join Date
    Nov 2013
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by xelawho View Post
    Ah, I get it now. But wouldn't it just be simpler to look for images with that alt text and change their caption? Or did I not get it?
    Close. I am searching the images alt text using:
    Code:
    $("#CategoryContent .ProductList li .ProductImage a img[alt*='USA']").each(function( index ) {
       $(this).parents('li').find('.ProductImage').append('<img src="https://cdn2.bigcommerce.com/n-arxsrf/lxku4v/product_images/uploaded_images/usa-made.png?t=1407522778" alt="Made In The USA" class="usa-made"/>');
    });
    In that instance I'm searching for the word 'USA' in the alt tag.

    What I want to do is to ONLY initiate this code:
    Code:
    <script>
    var max = 9.49
    var divs = document.querySelectorAll(".ProductPriceRating");
    var txt = document.body.textContent?"textContent":"innerText";
    
    for (var i=0; i<divs.length; i++){
       var splits = divs[i][txt].split("$");
       var len=splits.length-1;
       var price = splits[len];
       if(price == max ){
          divs[i].innerHTML = "<em class='PriceReplace'>As Low As $8.75</em>";
       }
    }
    </script>
    when BOTH the price is equal to $9.49 AND the image alt tag contains the word 'USA'. Does that make better sense?

  • #11
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,981
    Thanks
    56
    Thanked 557 Times in 554 Posts
    I think so. Like this?
    Code:
    var alt2search="USA"; //the string in the alt text that you want to match (can appear anywhere in the alt text - doesn't need an exact match)
    var txt2search=9.49; // the price in the caption that you want to match
    var todisplay="<em class='PriceReplace'>As Low As $8.75</em>"; //the html you want to replace the price with if both conditions are met
    
    $("#CategoryContent .ProductList li .ProductPriceRating").each(function(){
    var splits = $(this).text().split("$");
       var len=splits.length-1;
       var price = splits[len];
    if(price==txt2search && $(this).parent().find("img").attr("alt").indexOf(alt2search)!=-1){
    $(this).html(todisplay);
    	}
    });

  • #12
    New to the CF scene
    Join Date
    Nov 2013
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Yeah that's it! I think I was having trouble placing the if statement properly. I appreciate all your help!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •