Edit trick

Changes will be published after manual review

Title

Give your trick a describing title. Do not start with «How to...».

Your trick

Keep it short and concise! Markdown is supported.

The purpose of this trick is to load a page (its content only) in a dialog window.

We will need three parts : 
* an Ajax handler to manage the page loading
* a popup partial
* some JavaScript to handle the dialog open/close

> This tricks use `Alpine JS` to handle the dialog closing by clicking the cancel button or outside the dialog.  
> You can easily replace @click attributes by vanilla JavaScript events.

### Add Ajax handler to your layout
This handler will load a page of the site whose url will be given with a `data-request-data` attribute, and the push a partial refresh for the popup content.

```php
function onLoadPopUp()
{
    $pageUrl = post('url');
    $content = '<h1>Nothing to load ...</h1>';
    $title = 'My Popup';

if ($pageUrl) {
        $handlerController = new Cms\Classes\Controller;

$router = new \Cms\Classes\Router(\Cms\Classes\Theme::getActiveTheme());
        $page = $router->findByUrl($pageUrl);
        $page->layout = null;

// if the page loaded is a static page from Winter.Pages plugin 
        // and make use of placeholders and/or customs fields, 
        // then you need an "empty" layout repeating your defintions for thoses.
        // $page->layout = 'empty';

$content = $handlerController->runPage($page, false);
        $title = $page->meta_title ?: $page->title;
    }

$this['popupTitle'] = $title;
    $this['popupContent'] = $content;

return [
        '#dialogContent' => $this->renderPartial('popup/_content')
    ];
}
```

### Add popup's partials
The two partials defining the popup and its content.

```
? themes
 ┗ ? yourtheme
   ┗ ? partials
     ┗ ? popup
       ┃ ? _content.htm
       ┗ ? default.htm
```

1 - **partials/popup/default.htm file :**
```twig
<dialog id="dialog">
    <div class="dialog--container" id="dialogContent" @click.outside="closeDialog()">
    </div>
</dialog>
```

2 - **partials/popup/_content.htm file :**
```twig
<div class="dialog--headerbar">
    <span class="dialog--title">{{ popupTitle }}</span>
    <button class="btn--cancel" @click="closeDialog()" type="reset" aria-label="Cancel">
        Cancel
    </button>
</div>
<div class="dialog--content">
    {{ popupContent | raw }}
</div>
```

3 - **In your layout, add :** 
```php
{% partial 'popup/default' %}
```

### Add some Javascript to show/hide the dialog popup in your theme's asset
These functions are intended to manage the display of an HTML `<dialog>` element.

```js
window.openDialog = () => {
    document.querySelector('#dialog').showModal()
}
window.closeDialog = () => {
    document.querySelector('#dialog[open]').close()
}
```

### Add the Ajax handler trigger
On a link or a button, allows the triggering of the Ajax handler and the opening of the dialog.  
In this example the page with the url `/thepageurl` will be loaded, it must be accessible to the site visitors.

```twig
<a class="..."
    data-request="onLoadPopUp"
    data-request-data="url: '/thepageurl'"
    data-request-success="openDialog()"
>Link text</a>
```

References

Add additional online resources to your trick

Name

URL

Name

URL

+ Add reference

Topics

If your trick fits more than one topic select multiple. Select at least one.

Backend Plugin Development CMS Twig Themes Deployment