0

I'm customizing OpenCart 3.
By clicking a button in front-page footer, a modal panel opens which includes an iframe, like this: 

<footer>
    <div class="container">
        <div class="content">
            <i class="fa fa-plus-circle" aria-hidden="true" data-toggle="modal" data-target="#myModal"></i>
            <div class="modal fade bd-example-modal-lg" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-body">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><i class="fa fa-times-circle" aria-hidden="true"></i></button>
                            <iframe width="100%" height="{{ img_h }}" src="{{ addnewpro }}"></iframe>
                        </div>
                    </div>
                </div>
            </div>      
        </div>

iframe contains a php page for entering a new product which locates in admin panel.

So far everything is OK! The problem is I can't find a way to close the opened modal (#myModal) after entering the new product and saving it. I tried many different approaches including session, etc.

I Created Session after adding product in php page: 

$this->session->data['newprosaved'] = 'saved';

I checked session in footer's php page: 

if (isset($this->session->data['newprosaved'])) {
     $data['saved'] = $this->session->data['newprosaved'];
     unset($this->session->data['newprosaved']);
}

Then tried to access it in footer.twig: 

<script type="text/javascript"><!--
$(document).ready(function() { 
    if ('{{ saved }}'  == 'saved' && $('#myModal').hasClass('in')) {
        $('#myModal').modal('hide');

        $('#myModal').remove();
    }
});
</script>

But it doesn't work!
Is there any other method to do it?

Kardo
  • 1,658
  • 4
  • 32
  • 52
  • your modal hasn't got any save button, where is the save button? – madalinivascu Dec 06 '17 at 11:30
  • @madalinivascu: save is done within php page – Kardo Dec 06 '17 at 11:31
  • remove comment tags ` – JoshKisb Dec 06 '17 at 11:32
  • Are you sure you're not setting "saved" only inside your iframe ? That means that everything outside (your web page actually) is not aware about this. This is a HTML security, you might not be able to bypass it. However, JavaScript allows you to communicate, but you have to be very careful with this. Maybe after your action is done, you can send a signal like "done" from inside the iframe to the webpage. Your wabpage would be listening to that signal and remove the iframe – Zyigh Dec 06 '17 at 11:32
  • @JoshuaKisubi: I did, but no change. – Kardo Dec 06 '17 at 11:34
  • @Zyigh: That's exactly what I want to do and it's some hours struggling with it. But I don't know how? – Kardo Dec 06 '17 at 11:36
  • @Zyigh: any suggestion how to do it? – Kardo Dec 06 '17 at 11:40
  • @Kardo Don't is the best answer I can give you... Or look at this https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage – Zyigh Dec 06 '17 at 11:43

1 Answers1

2

Unfortunately the answer was easy, although it wasted some few hours of my time.

I created a session after saving the item: 

$this->session->data['newprosaved'] = 'saved';

Then revoked it on php page load (inside iframe): 

if (isset($this->session->data['newprosaved'])) {
    $data['newprosaved'] = $this->session->data['newprosaved'];
    unset($this->session->data['newprosaved']);
}

I added a javascript code to iframe: 

if ('{{ newprosaved }}' == 'saved') {
    window.parent.closeModal();
}

Then javascript closeModal funtion to parent page: 

window.closeModal = function(){
        $('#myModal').modal('hide');
};
Kardo
  • 1,658
  • 4
  • 32
  • 52