hide an element with jquery

st.a@gmx.chst.a@gmx.ch Member
in Help edited December 2008
hi there,
I'm an absolute jquery noob...

I found this example:
<script type="text/javascript" charset="utf-8">
	/* <![CDATA[ */
	function cart_quantity_check() {
		// remove checkout if less than 12
		if (fc_json.total_price < 20) {
			fc_HideCheckout();
			// Display a notification message
			$j("span.fc_cart_notice").html("Mindestbestellwert CHF 20.-");
		}
	}
	$j(document).ready(function(){
		// The setTimeout gets around a Thickbox issue.
		setTimeout("cart_quantity_check()", 0);
	});
	/* ]]> */
</script>
which hides the "checkout" button within foxycart if the total price isn't 20 bucks...

now I'd like to hide another input that is on my page... could someone show me how?

here's the code I want to hide:
<div id="checkout"><form method='post' action='https://yamatuti.foxycart.com/cart'>;
			<input type='hidden' name='cart' value='checkout' />
			<input type='submit' class="yama_checkout" onmouseover="this.className='yama_checkout_over'" onmouseout="this.className='yama_checkout'" name='submit' value='ZUR KASSE' />
			</form>

		</div>

thanks
stefan
Comments
  • brettbrett FoxyCart Team
    Hi Stefan.
    First, I'd recommend checking out some of the jQ tutorials on www.jquery.com. If you have a decent handle on CSS it's actually quite easy.

    With jQuery you use CSS syntax (mostly) to select elements, so a simple hide would just be $j('input.yama_checkout').hide();

    Or you could do $j('input[@name=submit]').hide();
    Or $j('#checkout .yama_checkout').hide();

    Etc. We highly recommend at least a basic familiarity with jQuery, as it really opens up a huge number of possibilities, and it's probably one of the easiest js frameworks to learn.
  • hi there,

    I took a look at some tutorials and must say that jquery looks quite easy and logic...
    anyways... I coudn't get the code working!

    here's what I've tried:
    <script type="text/javascript">
    	// Your code goes here
    	$(document).ready(function(){
       		// Your code here
       		function cart_quantity_check() {
       			if (fc_json.total_price < 20) {
       				$j('#checkout .yama_checkout').hide();
       			}
       		}
     	});
    </script>
    

    and it didn't work

    this works:
    <script type="text/javascript">
    	$(document).ready(function(){
       		$j('#checkout .yama_checkout').hide("slow");
     	});
    </script>
    

    so how do I sucessfully check the cart? do I have to include some special files?
    I've included the following ones:
    <script src="https://xxx.foxycart.com/files/foxycart_includes.js"; type="text/javascript" charset="utf-8"></script>
    <link rel="stylesheet" href="https://xxx.foxycart.com/files/foxybox.css"; type="text/css" media="screen" charset="utf-8" />
    <script src="http://www.xxx.ch/sys/modules/foxee/foxee.js"; type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript" src="http://www.xxx.ch/js/jquery.js"></script>;
    

    and below that, there's the code..
    I would be very glad if someone could provide a working example... (I will post this into the faq if you want me to!)

    cheers and good mornin america ;-)
  • st.a@gmx.chst.a@gmx.ch Member
    edited December 2008
    I might ask a supplementary question before anybody answers:

    In fact, I would like to make a message appear, similar to the cart message that the minimum value is CHF 20...

    so, as long as there's not 20 bucks in the cart, the message would appear, and as soon as the minimum value is reached, everything is back to normal...

    cheers stefan
  • damn, I forgot something that might be the almost the same:
    I want to hide the whole cart if there's no items in them and then make it show as soon as there's one product...
    If I only knew jquery... but the shop has to be online tomorrow... AAAAND the 20 bucks feature is a must until then!
    so pleeeaasse wake up america ;-)
  • lukeluke FoxyCart Team
    Hey Stefan. It sounds like your question is essentially a JQuery question. As I'm sure you can appreciate, we generally try to keep our support related specifically to FoxyCart functionality, otherwise we'd spend all of our time developing people's checkout flows for free and not adding new features to FoxyCart. That would make everyone mad. :)

    So that being said, I took a look at the site a bit and... well... there's not much I can do since I only understand English.

    What you're describing should be pretty simple. Just setup a div with an id and give it a style="display:none;" then in your cart quantity check function, put an else in there to show() that div (the previous case should hide it). Hope that helps.
  • hi, well, you're right...

    so I shorten my question:

    what does the function cart_quantity_check() do exactely?
    where can I find that function... sorry... I'm very new to jquery (well since this afternoon) and also very new to firebug... and you guys seem to be working a lot with both of them...

    I just want to hide something based on fc_json.total_price... but I don't know what I'm doing wrong... well... I will eat some dinner, maybe afterwards all is clear!

    thanks anyways!
    stefan
  • brettbrett FoxyCart Team
    Hi Stefan.
    The function cart_quantity_check() does exactly what you define it to do. When you use the "function" word you're basically saying, "Hey, here's a new function." So there's nothing to it beyond what you're seeing.

    I tried that link you whispered to me but it just goes to a blank screen.

    That said, the issue with your code is that you're defining the function, not running it. You have some code in the document.ready() function, which runs when the doc is ready, BUT the code that's running is saying "here's a new function", and not "run this code".

    So you could define the function outside the document.ready() block, then call the function from within the doc.ready block:
    cart_quantity_check();

    That'll _run_ the function, which you'd defined above. Make sense?

    Also, as far as showing/hiding additional fields, that's def a jQuery thing, but is pretty basic. Just use some if/then/else statements to show/hide elements as necessary. I know it might sound like it's way over your head, but trust me, once you get the basics of if/then/else and jQuery handled you'll really be surprised at what you can handle. The basic logic is identical to what you're doing, but you'd show() instead of hide() what you want.

    Let us know how that goes.
  • hi brett, hi luke,

    well, now I understand why it coudn't work..
    in fact: the fc_json.total_price is only available if the cart is available.

    so, now I've put the jquery code within the checkout template and it works...
    that's the script (inside the head tag):
    (yama_kontrolle is a div I created and it's set to display:none)

    <script type="text/javascript" charset="utf-8">
    /* <![CDATA[ */
    $j(document).ready(function(){

    // wenn mindestbestellwert noch nicht erreicht
    if (fc_json.total_price < 20) {

    $j('#fc_checkout_container').hide();
    $j('#yama_kontrolle').show();
    }
    });
    /* ]]> */

    I wanted to use this on my own template but I don't know how I can reach the cart, check for the price and do something...
    maybe there's a function that calls the total price within foxycart_includes.js that I could benefit of?

    is there any documentation with explanations of the available functions in the foxycart_includes?
    cheers
    stefan
  • brettbrett FoxyCart Team
    The fc_json object should be available to you at any point on your own page, the cart, checkout, or receipt.

    The potential issue is that foxycart_includes.js returns fc_json, but if you try to run something on document.ready() it might happen before fc_json is returned and loaded. To get around that you could stick your function inside of fc_BuildFoxyCart():
    http://wiki.foxycart.com/docs:json

    That's called when the thickbox cart is closed, but it's also called when fc_json is returned, so that might be the cause of the confusion.

    You can view source on foxycart_includes.js and see the paths to the un-minified versions of the files if you want to.
Sign In or Register to comment.