Replace Colorbox with Reveal (Foundation 4.0) - Responsive Design

microcipcipmicrocipcip Member
in Help edited May 2013
I have successfully built a Responsive FoxyCart Checkout/Receipt template, however I find it difficult to replace Colorbox with Reveal. I have followed this tutorial, so I have added the JS on "http://cdn.foxycart.com/YOURDOMAIN/foxycart.js"; with the code in "Example 3". This is the code from "Example 3" which I have changed:
... else {
// Add notification that product is being added here.
// Remove iframe URL (to refresh)
$('#popup-foxycart iframe').attr('src', 'about:blank');
setTimeout(function() {
// Add iframe URL (to refresh)
$('#popup-foxycart iframe').attr('src', 'https://YOURDOMAIN.foxycart.com/cart');
// Open Reveal
$('#popup-foxycart').delay(100).foundation('reveal', 'open');
}, 250);
jQuery.getJSON(href + '&output=json&callback=?', function(data){
// Automatically update JSON and minicart helper objects
fcc.cart_update();
// Add notification that the product has successfully been added here.
});
return false;
}...

Basically I open the iframe in the cart after the setTimeout 250, this because I wanted to avoid to open the iframe before the JSON has sent the data to FoxyCart, and now, I have two issues which I don't know how to fix:
1) Sometimes the JSON is sent after that the cart is open, even with the setTimeout, is there a way to open the cart only when the JSON has been sent silently?
2) This is the most difficult issue, Safari is blocking Third Party Cookies, is there a workaround?

If necessary, I can provide a working example.
Thank You.
Comments
  • fc_adamfc_adam FoxyCart Team
    @microcipcip,

    So from what I can tell you don't actually need to use the JSONP approach - you're not looking to silently add the product to the cart, you're just wanting to use the reveal modal rather than colorbox.

    With that in mind, I'd actually suggest using the 4th example, and instead of using JSONP, actually set up the iFrame to be the add to cart URL. Something like this should do it I'd think:
    $('#popup-foxycart iframe').attr('src', href);
    $('#popup-foxycart').delay(100).foundation('reveal', 'open');
    }, 250);
    

    If the JS is functioning as it should, that should be loading the cart with the cart session ID as part of the add to cart URL as well - in the shape of an attribute with a name of "fcsid". That will be used to track the cart across different domains.

    Give that a try and see if it fixes your issues.
  • Hi,

    Thanks for your help!
    I have upgraded my code and now it seems to work for the third issue I was having (the quantity error not showing up in the Cart) but Safari is still blocking the Cart due to the cookies. If I disable the cookies it works all right.

    You can check it in the demo website, I have updated it.

    Also, how do I update the "Shopping bag (0)" number easily? At the moment I use this function, do you know if there is a better way?
    //Check if FoxyCart was opened, than upgrade it
    setInterval(function() {
    if($("#popup-foxycart.open")[0]) {}
    else {
    if($("#popup-foxycart.is-opened")[0]) {
    $('#popup-foxycart').removeClass('is-opened');
    fcc.cart_update();
    }
    }

    }, 2000);
  • fc_adamfc_adam FoxyCart Team
    @microcipcip,

    The best way to do it is trigger the postprocess event queue when the modal is closed. Looking at the foundation documentation, it looks like you can specify a function for when the modal is closed: http://foundation.zurb.com/docs/components/reveal.html

    You'll just need to call this in the closed callback function: fcc.cart_update();

    In terms of the third-party cookies issue - it looks like the add to cart URL isn't including the fcsid value. If you change your call to look like this - that should get around the issue
    $('#popup-foxycart iframe').attr('src', href + fcc.session_get());
    

    Ah - I see now, you're having to fake the form, so adding the session isn't working automatically as it should. Doing the above will correct that.
  • Thank you so much! Your solution works perfectly.

    I cannot use the "close" function of Reveal because Reveal can be inizialized only one time (and I use it in several other places), but all the other issues have been solved.
  • fc_adamfc_adam FoxyCart Team
    @microcipcip,

    One approach you could take is to when you load the iframe and open the modal yourself, add a class to the modal to note that it is the FoxyCart cart loaded. Then, in closed, you check if that class is present - and only if it is do you run the cart_update function and then remove the class. That way you can restrict it to just instances of the cart in the modal.
  • Thanks for everything. It works perfectly.
Sign In or Register to comment.