Social Networking Top

Phone Mail

  • 0493 24 39 77
  • This email address is being protected from spambots. You need JavaScript enabled to view it.

Language Switcher

Prestashop Inside Joomla, iframe with autoheight cross domains

I'll leave in the middle if it's a good idea or not to use an iframe to "incorporate" your Prestashop inside your Joomla website. But is it technically possible (and to have it auto adjust the height, also from remote domain)? Absolutely (If and only if you have access to both pages). Here one way how you can do it:

1.    First we need to grab two files from Github: https://github.com/davidjbradshaw/iframe-resizer/tree/master/js . We are interested in those files:

image001

2.    Login to the FTP of your Prestashop (or Prestashop Cloud). Copy the iframeResizer.ContentWindow.min.js to the /themes/default-bootstrap/js/autoload map. Obviously if you use another theme you will want to put it in the autoload map of that theme.
 image003

3.    Now log in to your Prestashop Management and go to Advanced Parameters and select performance

image005

At the bottom, make sure your set the “Smart Cache for Javascript” on NO
 image006
Then click the Save button on the bottom right of the page. Finally click the Clear Cache on top right of the page.
 image007
4.    We are done with the setup of Prestashop, we now need to log to the FTP of the Joomla site, go to the libraries folder, best is to create a new folder, give it the name you prefer (I chose CForce), then put the iframeResize.min.js inside that map.
image008 

5.    Now log to the backend of the Joomla site and go to your Menu Manager, select new
 image010
In my case I’ll use a Featured Articles, as I don’t use that option and it allows me to have a “blank” page.
 image011
You could go with a wrapper (iframe) item instead, but I don’t want that for some other reasons.
 image012
6.    Now that you have your link (in my case Shop), then you need to create the module you will be using as iframe on the page. Go to Module Manager, select new and create a new module with type: “Custom HTML Advanced Module”.  If you don’t have it in your list, you need to download and install it first. It’s free. (http://extensions.joomla.org/extension/custom-html-advanced).

image013

Now on the main module window, on the custom HTML put the following code (you need to change the second line, to point to the page you want to display):
 

<div>
<iframe src="http://remotedomainpage/" width="100%" scrolling="no" frameBorder="0"></iframe>
</div>
<script type="text/javascript">
iFrameResize({
log                     : false,                  // Enable console logging
enablePublicMethods     : true,                  // Enable methods within iframe hosted page
resizedCallback         : function(messageData){ // Callback fn when resize is received
    $('p#callback').html(
        '<b>Frame ID:</b> '    + messageData.iframe.id +
        ' <b>Height:</b> '     + messageData.height +
        ' <b>Width:</b> '      + messageData.width +
        ' <b>Event type:</b> ' + messageData.type
    );
},
messageCallback         : function(messageData){ // Callback fn when message is received
    $('p#callback').html(
        '<b>Frame ID:</b> '    + messageData.iframe.id +
        ' <b>Message:</b> '    + messageData.message
    );
    alert(messageData.message);
},
closedCallback         : function(id){ // Callback fn when iFrame is closed
    $('p#callback').html(
        '<b>IFrame (</b>'    + id +
        '<b>) removed from page.</b>'
    );
}
            });
</script>

Now assign the module to your page, on the menu assignment tab:
 image014
image015
 
Finally go on the HTML Header Options tab, and add the path to your iframe Resizer script. The path to the file we put under libraries under point 4.
 image016
Save and close your module. Clear your cache and purge expired.
Check your page on the front end. All should be good now.

Leave your comments

Post comment as a guest

0

Comments (66)

Load Previous Comments