Cart not displaying Thickbox (now: Colorbox)

jitpaljitpal Member
in Help edited May 2010
Hi I'm having a minor issue, that I'm sure is because of some mistake I made somewhere but I thought I would ask it here anyhow. The view cart link works great, the cart shows up in the regular thickbox. No problems. However, when you add a product to the cart the product gets added, the cart shows up in the regular browser window instead of the thickbox. I triple checked that I have all the foxycart files being added and the form button's type is submit and the opening looks like this:
<form action="https://pensfast.foxycart.com/cart"; class="foxycart" method="post">

Anything else I should be aware of that I'm potentially missing or what portions of code do I need to whisper to someone to get this sorted out? Thanks
Comments
  • lukeluke FoxyCart Team
    Hello jitpal. All of your add to cart links and forms need to have class="foxycart" as well.

    Hope that helps.
  • fc_adamfc_adam FoxyCart Team
    @jitpal, your very last inline script tag has an additional
    });
    
    , one more than is required, and its causing a javascript error, maybe fix that up and see if your issue persists...
  • jitpaljitpal Member
    @fc_adam Thanks for finding that error, I fixed that but the cart still won't show up in the thickbox.

    @luke The form has the foxycart class.

    Any other ideas?
  • fc_adamfc_adam FoxyCart Team
    @jitpal, I think I see whats going on now. When the 'customise and order' button is hit, you bring in all the form for the product then, and as such FoxyCart didnt have a chance to do its thing to link FoxyBox. There is some code on the wiki to rebind add to cart links, but this isn't quite what you are after. There is a way to rebind forms too, but I want to pass it by Brett as he handles the front end javascript stuff the most, expect a reply shortly.
  • fc_adamfc_adam FoxyCart Team
    @jitpal, surprisingly this doesnt come up heaps often, so the solution at the moment isn't heaps pretty, but it should be cleaned up in a future version to make it easier to rebind the foxybox functionality to dynamically created forms. For the time being though, you'll need to copy the function which adds the foxybox function to the form elements from the foxycart_includes file, I've included it below for your reference. Basically you'll need to execute the following code *after* you have added in the html for the product form.
    jQuery("form.foxycart").submit(function(){
    	MyFoxyData = jQuery(this).serialize(false);
    	MyFoxyID = jQuery(this).attr('id');
    	// if they defined fc_PreProcess(), let them process the form data before we pass it along
    	if (typeof(fc_PreProcess) == 'function') { 
    		if (!fc_PreProcess(MyFoxyData, MyFoxyID)) {
    			return false;
    		}
    	}
    	// if we want to go directly to the checkout or do a redirect, don't show the foxybox 
    	if (MyFoxyData.match("cart=checkout") || MyFoxyData.match("redirect=")) {
    		location.href = "https://"; + FoxyDomain + "/cart.php?" + MyFoxyData + fc_AddSession();
    	} else {
    		// show ThickBox
    		fc_tb_show(null,"https://"; + FoxyDomain + "/cart.php?" + MyFoxyData + fc_AddSession(),false);
    		// Add to Thick Box's close link so that it will update the cart
    		jQuery("a.fc_tb_closeWindowButton").click(function(){
    			fc_UpdateCart(FoxyDomain);
    			return false;
    		});
    		// this ensures their submit doesn't actually go anywhere
    	}
    	return false;
    });
    

    Let us know if you have any further issues.
  • jitpaljitpal Member
    It worked beautifully. You guys rock. Thanks
  • jitpaljitpal Member
    edited September 2010
    Hi guys, you helped me with this code before but with version 7.0, it obviously doesn't work. I'm also completely inept with javascript so my attempts at modification for 7.0 aren't working. Any ideas how to rebind it for the new colorbox based cart. Thanks.
  • brettbrett FoxyCart Team
    @jitpal, 0.7.0's foxycart.js _should_ handle all this for you automatically. We did a lot of testing before we released 0.7.0, but if you're seeing a situation where it's not working definitely let us know.
  • Thanks Brett, I removed that custom code and it's still not working. I didn't get a chance to check in IE, but it's definitely not working in Firefox. Webkit seems to be fine. It's probably thanks to my spectacularly bad coding skills and I do intend on overhauling the page so I won't need a workaround but until I get to that, seeing the cart in the colorbox would be much better than a full page. Is there an easy fix, at least temporarily? I can whisper you a link if you need. Thanks.
  • brettbrett FoxyCart Team
    Send me the link and I'll take a look, along with what browsers do and don't work if you could.
  • brettbrett FoxyCart Team
    Hi @jitpal
    Two things I'm seeing that may or may not be the cause.
    1) You have jQuery defined in multiple places. The first is 1.4.1, then after that you include the 1.4.2 that FoxyCart requires. You can just include 1 of them at the 1.4.2 version. Multiple copies of jQuery can cause problems.

    2) Your template is including colorbox twice as well. It's included in the wp-content/themes/theunstandard line as well as in the foxycart.complete.js.

    The js error is that jQuery.colorbox isn't defined, so it's probably related to one of those two issues.
  • Thanks Brett, I fixed that. However, the cart is still showing up without the colorbox in Firefox. Any ideas? Thanks
  • brettbrett FoxyCart Team
    You sure? It's working for me now. Try clearing your cache?
    Also, when I scroll in Firefox or Chrome I get an "offset is null" error. You may want to look at the $(window).scrollTop bit you have to make sure that's ok.
  • Yeah I cleared the cache and still the same. I even checked on another computer and same issue using Firefox. I did fix that scrolling issue. I wonder why it isn't showing up correctly. I would appreciate a quick look, if you get a chance.
  • brettbrett FoxyCart Team
    Hmmm... I'm seeing it fail now on Firefox 3.5.x. Was working on a different comp on 3.6.x. It's throwing an error that jQuery.colorbox isn't a function, but I'm not seeing an obvious reason why. We'll take a look. The good news is that it's "working" as far as actually _trying_ to run the code ;) It's just erroring along the way.
  • brettbrett FoxyCart Team
    Sorry for the delay. One of our team members (who I'd assigned this thread to) has a bad flu.

    Here's what I've figured out:
    * On the initial page load, if you enter "jQuery.colorbox()" in the js console (Firebug or Webkit Inspector), Colorbox will load.
    * Once you click the "Customize & Order" button, something happens, and...
    * If you run "jQuery.colorbox()", it'll give you the error we're after.

    I've taken a look around your javascript and I'm not seeing where you have the ...
    Ah ha! Got it.
    Look at what your AJAX call is doing on #customize-button click. You're loading up some HTML to put in your #content. View source on what that HTML actually is and you'll see the extra jQuery call we were looking for earlier.

    My recommendations:
    * Check the console when you hit the customize button. First off, you're submitting to a page that's 301 redirecting, so you might as well just fix that AJAX path requested in the first place.
    * Next, look at the page being requested. Since that's HTML you're going to stick inside of HTML, you don't need (and shouldn't have) the <head> section or the <body> tags at all.

    That should do it, I think. Let us know how it goes.
  • Awesome Brett, it worked. I can't believe I didn't notice that. Thank you so much.
  • brettbrett FoxyCart Team
    No worries. Too me quite a bit longer to find than I think it should have, but then again, it's a pretty awesome little form you have built there.
  • brettbrett FoxyCart Team
    Response to whisper but not whispering because I'm not positive whispers generate email notifications:

    @jitpal, are you still having an issue? If so, let me know how to reproduce it. Looks ok to me at this point though, so hopefully that's good.
  • brettbrett FoxyCart Team
    Response to whisper:
    Yeah... definitely seeing the problem in IE8, but unfortunately my IE8 keeps hard crashing when I try to debug it. Perhaps @fc_adam can take a look.

    Something else I mentioned in the past is that the initial request to something like http://pensfast.tld/order-form?pid=528 is getting redirected to http://pensfast.tld/order-form/?pid=528 (slash before the ?). Maybe not a big problem but generating an extra request that you could clean up.

    I'm not seeing anything obviously wrong though in what you're doing. The .process() doesn't seem to be applied, which will be done with the .live() functionality in jQuery. But I don't see why. We'll take a look and let you know if we can figure anything out.
  • Thanks for taking a look and I fixed that request.
  • fc_adamfc_adam FoxyCart Team
    @jitpal, I can't even get the page to load in IE8 without it crashing. Running IE8 in compatibility mode I can get it to actually not crash, but couldn't find anything a miss... Can you get the page to load in IE8 fine?
  • Thanks for taking a look @fc_adam. Yeah the page loads fine for me, I've tried it on 3 different computers. An old P4 with XP/IE8, an i7 machine with Win7/IE8 and also my Mac with Win7 running in VMWare Fusion with IE8. The pages load fine with no errors, it's just that the cart won't open in the colorbox.
  • brettbrett FoxyCart Team
    Fwiw, I had my IE8 on Win7 (clean install) keep crashing when I attempted to use the developer tools. So... yeah. I don't see anything obviously wrong, but clearly something's going wrong.

    @fc_adam, thoughts on manually attaching the Colorbox / .cart.process() to the form? From the behavior it seems like that'd be the problem, though I don't know why it'd be off.
Sign In or Register to comment.