www.webdeveloper.com
Results 1 to 4 of 4

Thread: Hide conditionnally a button according to his rendered url

  1. #1
    Join Date
    Mar 2011
    Posts
    39

    Hide conditionnally a button according to his rendered url

    hello


    I need to display conditionally my shopping cart button using Javascript and Css. My goal is to hide the button when no items are present inside the cart.

    The code of my button is:

    <span id="mycartbutton" style="float: right; clear: both;">
    <a class="button"href="$(shopping_cart_url)">My Cart</a>
    </span>
    When nothing is present in the cart, the url of the button render like this:

    /.../mode=show_cart

    When one or more items are present, the url of the button render like this:

    /.../mode=show_cart&cart_id=10332&first_reservation_id=717

    Unfortunately I'm not a coder and I don't have any knowledges of JavaScript but I suppose is possible to make a check to rendered url of the button.

    Actually I use the follow javascript:

    <script type='text/javascript'>
    function on_site_form_loaded(event) {
    if (event=='product_list')
    document.getElementById('mycartbutton').style.display='none';
    }
    </script>
    ..this allow me to hide the button on product list as desired BUT even if some items are inside the cart who is not what I want.

    I suppose is possible to modify this javascript for make a check to rendered url button for see if contain for example "cart_id". If not is necessary to apply the style "display=none" to the button.

    I asked this in another forum but the answer was wrong because they told to use a code who check the URL page instead to check the URL button.


    Any clue please ?

    thank for your time

    cheers

  2. #2
    Join Date
    Apr 2013
    Posts
    56
    It would be better if you would handle this on server side, but you can hack it on client side with javascript also. Assuming that your cart with items will always have cart_id you can check for substring in href attribute of anchor element.
    For example something like:

    Code:
    if($("#mycartbutton").find("a").attr("href").indexOf("cart_id") === -1){
    	$("#mycartbutton").find("a").hide();
    }

  3. #3
    Join Date
    Jul 2008
    Location
    urbana, il
    Posts
    2,787
    use CSS:
    Code:
    #mycartbutton a.button { display: none; }
    #mycartbutton a.button[href*=cart_id] { display: inline-block; }

  4. #4
    Join Date
    Mar 2011
    Posts
    39
    Quote Originally Posted by rnd me View Post
    use CSS:
    Code:
    #mycartbutton a.button { display: none; }
    #mycartbutton a.button[href*=cart_id] { display: inline-block; }
    excellent..you made my day !!

    Is hours and hours I play with javascript for nothing.. I did not know it was possible to do that with css.. I tried the solution of "coding123" but I got conflict with another javascript.

    Many thank and all the best

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles