How to call Iframe from an Iframe using jQuery in Wordpress Plugin?

Question

I have an app (WordPress Plugin) called from an iFrame in Wordpress Woocommerce store. All works fine. The app generates products and adds them to the cart and allowing the visitor to get to the cart and pay. Using jQuery Modals.

Currently I am using redirect to provide the visitor access to the cart. BUT, I would like the visitor to stay (come back) after the checkout. The idea is that all visitor interaction is handled with Modals Such that the visitor can continue using the app and generate more products.

Is that possible? Is there a better option?

My current code is as follows:

function contact_woo_shop(orderfilename, urlAtts, counts, table){
var pid=0
jQuery.post(
            ts_woo.ajax_url, 
            {'action': 'do_ts_woo','order': orderfilename,             
   'board': urlAtts,'table': table},
            function(response) {
                  if(response.success){
                     pid = response.data;
                     console.log("do_ts_woo. SUCCESS response="+response.data);
  /* I WISH TO CANCEL THIS REDIRECT in favor of another MOdal with Iframe below*/
                     window.location.replace("https://orig-site.co.il/cart/?add-to-cart="+response.data);

                  } else {
                     console.log("do_ts_woo. FAILURE response="+response.data);
                  }
            }
).done(function(response) {
  console.log("DONE do_ts_woo. DONE response="+response.data);

   /* I wish to have the Modal & Iframe here */
  jQuery("#dialog").dialog({
        autoOpen: false,
        show: "fade",
        hide: "fade",
        modal: true,
        open: function (ev, ui) {
          jQuery('#myIframe').attr('src',"https://orig-site.co.il/cart/?add-to-cart="+pid);
        },
        height: 'auto',
        width: 'auto',
        resizable: true,
        title: 'Tilesim'
      });

     jQuery("#opener").click(function () {
        jQuery("#dialog").dialog("open");
        return false;
      })

 })
 .fail(function(msg) {
    alert( "error msg="+msg );
 })
 .always(function() {
   // alert( "finished" );
 });

}

score 0 · Answer 1 · answered Jan 03 '19 at 00:47

0

You could look at a plugin that is already accomplishing this and see how they are accomplishing this: [https://wordpress.org/plugins/woo-awesome-checkout-popup-form/][1]
Or you could accomplish this by automatically re-directing the user on the order accomplished page after a certain amount of time. For example, wait 1 second and then re-direct back to a store page.

answered Jan 03 '19 at 00:47

NickC

332
1
15

thanks. I prefer the first option. I shall look at it. Did you tryit? Does it handles all the links the Woocomrece comes with? I can get the checkout into jQuery modal - not as iFarme, so any link will take you out of the Modal window. I need solution for this case I wonder if the plugin on your first option support that? – Mulli Jan 03 '19 at 01:30

score 0 · Answer 2 · answered Jan 03 '19 at 07:09

I managed to open an iFrame from within an iFrame using the nice & clean solution for jquery iframe dialog As it seems, technically, there is no limit to this sequence. @NickC Thanks for your help!

Final note: Untill now I was trying to avoid iframe at all cost. This is the first example where application (SAAS) is running clients' code on behalf of the client. This use case is different from running (dumb) iFrame(some.html).

How to call Iframe from an Iframe using jQuery in Wordpress Plugin?

2 Answers2