The Foxy forums are on the move!

We're in the process of moving our forums over to a new system, and so these forums are now read-only.
If you have a question about your store in the meantime, please don't hesitate to reach out to us via email.

Can I use other JQuery functions?

davebiasdavebias Member
in Help edited December 2007
Hi,
Later today, I'm setting up a client with a FoxyCart account and beginning an integration with a Textpattern CMS.

My initial look-see at the FoxyCart docs indicate that calls to jquery.js must be removed from pages calling FoxyCart. As it happens, my client's cart pages use JQuery functions to show/hide "details" divs. I also use swfobject.js to embed a tiny mp3 player. The page in question: http://72.47.196.47/music

My question is this: Does the FoxyCart js fully contain JQuery and will calls to JQuery functions still work? And will it interfere in any way with swfobject?

thanks!
Comments
  • lukeluke FoxyCart Team
    Hey Davebias, welcome to FoxyCart!

    I assume you're referring to this line:

    "If you're using another javascript library, or if you're already calling jQuery elsewhere in your template you'll want to remove it."
    http://wiki.foxycart.com/docs:gettingstarted?s=jquery

    I'm honestly not sure why that's in there. Because we're using no conflict mode ( http://wiki.foxycart.com/docs:defaults?s=jquery ) you should be able to use whatever you want. To use the JQuery we already include for you (yes, it's a full version), just call it with $j like so:

    $j("#myFoxyDiv").hide();

    As for swfobject.js... I guess my answer would be to give it a shot and see what happens. :)
  • brettbrett FoxyCart Team
    To go into detail with what Luke said: You don't have to remove it, though things can get a little odd even though we're in "no conflict" mode. You might want to just use the FoxyCart jQuery to get rid of another 20k on your page load.

    Depending on how additional jQuery plugins (swfobject) are coded, it might be really easy or really difficult to make the change from $() to $j(). Please let us know if it does conflict though.
  • oh, yeah it conflicts... or something... I'm not a javascripter or a JQuery expert. Just a humble copy-paste-tinker kinda guy...

    You said: just call it with $j like so: $j("#myFoxyDiv").hide(); - But I've got no idea what that means...

    http://72.47.196.47/music
    The "details" divs are supposed to be off and should toggle on/off by clicking the details bar.
    Installing the foxycart includes breaks this.

    Although because I don't know much about javascript, I'm not sure what is breaking...

    Here's my show/hide code (lifted from somewhere and tweaked to work)
    $(document).ready(function() {
    $('div.songnotes> div').hide();
    $('div.songnotes> h6').click(function() {
    $(this).next().slideToggle('fast');
    });
    });

    I might be playing with fire here, but it worked and I'm sure it can work again... I'm just lost about how to get it working.
  • brettbrett FoxyCart Team
    I might be missing you here, but all your $( should change to $j(

    That's step #1.

    The problem with calling jQuery, then calling the FoxyCart includes, is that you end up redefining the jQuery object, so the second call (with the no-conflict mode, where we're changing it from $() to $j() ) ends up taking over the first. You _might_ be able to get around this if you call your own jQuery after you call the FoxyCart includes, but I haven't tested that. But it's worth a try.

    But still, the better solution is to use $j( instead of $(.
    So it'd look like this:
    $j(document).ready(function() {
    $j('div.songnotes> div').hide();
    $j('div.songnotes> h6').click(function() {
    $j(this).next().slideToggle('fast');
    });
    });
    
    That should at least do _something_. Do you have Firebug installed? If not, get that and check what you're getting in your javascript console.

    Somewhat off topic, but the Firebug javascript console is an EXCELLENT way to test your jQuery. Paste it in there, run it, see if it works. Much faster than a typical javascript testing exercise.

    Let me know if I'm not making sense.
  • Hey!!

    The $j did the trick and no doubling up on the JQuery needed!

    Thanks SOOOOO much.

    Your help on this has solidified my love of FoxyCart - I'll be recommending it to everyone I know and design for...

    Oh, and thanks for the Firebug recommendation. I've installed it and it should prove extremely helpful.
  • brettbrett FoxyCart Team
    Firebug is maybe the best thing ever. There are a few things that once you live with for a week, you just can't imagine living without. Firebug is definitely near the top of that list. Firefox's Web Developer Toolbar (for the live CSS editing) is the perfect compliment. You can write your entire CSS right in Firefox. Just be careful you don't change tabs or you'll lose it all (so copy and save it often ;).
  • Hi,

    This $j solution worked great for me. Instead of using the jquery library that other people provide, I'm just including their function and letting it call FoxyCart's library.

    Interesting that firebug is mentioned in this thread, too. I enable it only when I need to troubleshoot sites. Adminning sites slows me down unless it's disabled.

    Peter
Sign In or Register to comment.