Pop up module

[Phillys93]

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?

[vekia]

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

[PascalVG]

Hi Phillys, Vekia,

 

Wouldn't a simple fancybox not do the work?

 

http://fancybox.net/

 

My 2 cents,

pascal

[vekia]

even with fancybox it is necessary to define js script for it and also css styles

+ attach fancy libraries for each page (in front controller set media function) more info here: http://www.prestashop.com/forums/topic/235465-fancybox-use-on-any-page/

[Phillys93]

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 September 6, 2013 by Phillys93 (see edit history)

[vekia]

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) ?

[Phillys93]

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?

[vekia]

i will try to add also ui core main file, not only "plugin" like dialog / button

[Phillys93]

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 September 7, 2013 by Phillys93 (see edit history)