Question

I’ve got a Fancybox 2 iframe modal window that contains an ‘Add to Cart’ form. When the form is submitted, a success/confirmation page will be loaded within the Fancybox modal window.

I want to run a script on this success/confirmation page that closes the Fancybox window and redirects the parent window to this URL: ‘/shop/basket’ How can I do this?

Here’s the code I’ve got at the moment (which just closes the Fancybox window, but doesn’t do the parent window redirect):

<script type="text/javascript">
  $(function() { parent.$.fancybox.close(); });
</script>

Edit:

This is how I initialise the Fancybox within my functions.js file:

$(".add-to-cart-popup").fancybox({
    width       : 580,
    height      : 744,
    closeClick  : false,
    scrolling   : 'auto'
});

Edit 2:

This code does what I’m looking for – but can anyone think of any better ways of doing this? This is just something I’ve hacked together:

<script type="text/javascript">
  $(function() { parent.$.fancybox.close(); });
  window.parent.location.href = '/shop/basket';
</script>

Answer 1

Don’t try the redirect from the child page, but from the parent page itself.

If you have this code in your parent page (functions.js) :

$(".add-to-cart-popup").fancybox({
    width       : 580,
    height      : 744,
    closeClick  : false,
    scrolling   : 'auto'
});

Then just add the afterClose callback to it like ;

$(".add-to-cart-popup").fancybox({
    width       : 580,
    height      : 744,
    closeClick  : false,
    scrolling   : 'auto',
    afterClose  : function() {
       location.href = "/shop/basket";
    }
});

… you still need to perform parent.$.fancybox.close(); from the child page