0

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>
Stephen
  • 553
  • 3
  • 12
  • 23
  • How do you initialize the fancybox, could you post that code ? – adeneo Dec 12 '12 at 18:59
  • Possible duplicate: http://stackoverflow.com/questions/3660710/fancybox-close-from-within-iframe-and-take-parent-page-to-the-link – Jason Dec 12 '12 at 19:00
  • I've added the Fancybox code to the original post, though I'm not sure if it's needed as I felt that my solution was going to need code adding to the original script that contained the Fancybox close function. – Stephen Dec 12 '12 at 22:11
  • I don't think this is a duplicate of the above question as I'm wanting to close the Fancybox window and redirect from a script which runs automatically on the success/confirmation page, not from a click event or hyperlink. – Stephen Dec 12 '12 at 22:49
  • @Stephen, what is the solution you have been using in the end? – Brabbeldas Oct 01 '15 at 13:45
  • @Brabbeldas Sorry, I can't even remember what project this was for now. I think my solution was the code used in Edit 2 above though. Sorry I can't be any more help. I just did a search for that code in my repositories but couldn't find anything. – Stephen Oct 02 '15 at 09:51

1 Answers1

7

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

JFK
  • 40,963
  • 31
  • 133
  • 306
  • That's a good answer and I'll mark it as such, though I do have an edge case that means I have to use my own solution rather than this. Using the afterClose callback will cause the parent page to redirect to the basket page even if the user never clicked on the 'Add to Cart' button and just decided to close the modal window. I only wanted to redirect them to the cart if they specifically clicked that button. Thanks. – Stephen Dec 13 '12 at 05:06
  • 1
    @Stephen : it's a good point. You could workaround it passing a variable form child and check that variable inside the `afterClose` callback before redirecting the page. On the other hand, I was wondering why you are using `parent.` if you are not using `type: "iframe"` – JFK Dec 13 '12 at 05:12
  • Thanks for the variable suggestion. I'll be honest, I'm just finding my way through this using trial and error so I'm probably not doing things in the best way, though they seem to work. I'll check through it again and see if I can improve it. Thanks. – Stephen Dec 13 '12 at 05:28