Jump to content

Pop up module


Phillys93
 Share

Recommended Posts

Hello

I'm developing a pop up module. It is going to splash some information when a user visit my shop.

 

I don't know which approach is the best. Should I use a hook (which one is suitable?) or should I just override all other elements with a increasing z-index and absolute positioning?

 

I have seen some modules which is splashing a login form when visiting the shop. How are they doing it?

Share this post


Link to post
Share on other sites

if i were you i will use two hooks. header & footer

 

  1. header to include all css / js files
  2. footer to display popup

 

with css you can define z-index for overlay and div with popup (opactiy, z-index, width, height etc.)

and with js script - create jquery function to display this popup

 

my popup module is based on this little know-how ;)

  • Like 1

Share this post


Link to post
Share on other sites

In my case jQuery UI modal dialog will work better. But I've got problem to invoke the dialog. This is my code in /modules/privateshop/. jQuery UI is loaded as well as privateshop.js. I can see the HTML code for the pop up dialog in developer console but the dialog doesn't appear.

 

privateshop.php:

...
public function hookHeader($params) {
  $this->context->controller->addJqueryUI('ui.dialog');
  $this->context->controller->addCSS(($this->_path).'privateshop.css', 'all');
  $this->context->controller->addJS(($this->_path).'privateshop.js');
}
...

privateshop.js:

$(document).ready(function() {
   $("#dialog-modal").dialog({
      modal: true,
      closeOnEscape: false,
   });
});

privateshop.tpl:

<div id="dialog-modal" title="Basic modal dialog">
     <p>This is a pop up!</p>
</div>

 

Can someone please give some help?

Edited by Phillys93 (see edit history)

Share this post


Link to post
Share on other sites

so what kind of problem you've got? some error messages in console log?

scripts you trying to add:

 

 

$this->context->controller->addJqueryUI('ui.dialog');
$this->context->controller->addCSS(($this->_path).'privateshop.css', 'all');
$this->context->controller->addJS(($this->_path).'privateshop.js');

appear in the website body (in <header> section) ?

Share this post


Link to post
Share on other sites

I get this error: 

Uncaught TypeError: Object [object Object] has no method 'button' jquery.ui.dialog.min.js:4
t.widget._createTitlebar jquery.ui.dialog.min.js:4
(anonymous function) jquery.ui.widget.min.js:4
t.widget._create jquery.ui.dialog.min.js:4
(anonymous function) jquery.ui.widget.min.js:4
e.Widget._createWidget jquery.ui.widget.min.js:4
e.(anonymous function).(anonymous function) jquery.ui.widget.min.js:4
(anonymous function) jquery.ui.widget.min.js:4
e.extend.each jquery-1.7.2.min.js:2
e.fn.e.each jquery-1.7.2.min.js:2
e.fn.(anonymous function) jquery.ui.widget.min.js:4
(anonymous function) privateshop.js:2
o jquery-1.7.2.min.js:2
p.fireWith jquery-1.7.2.min.js:2
e.extend.ready jquery-1.7.2.min.js:2
c.addEventListener.B jquery-1.7.2.min.js:2

Do you have any clue?

Share this post


Link to post
Share on other sites

What is the syntax for loading jQuery UI core code in Prestashop?

$this->context->controller->addJqueryUI();
$this->context->controller->addJqueryUI('ui.dialog');

Is that right?

 

UPDATE1: That doesn't work either...

 

UPDATE2: To get it work, I added the same version of jQuery UI as the regular jQuery.

this->context->controller->addJS('http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js');
Edited by Phillys93 (see edit history)

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More