Edit this page on GitHub

Ajax panel

You can download a plugin showcasing the topic here.

Description

AjaxPanel is a jQuery based extension to the Shopware Frontend Framework. It mimics iFrame behaviour by integrating content from different controller actions through ajax into a single view and intercepting, usually page changing, events and transforming them into XHR-Requests.

The diagram below shows how this schematically behaves:

Basic usage

The AjaxPanel plugin is part of the b2b frontend and will scan your page automatically for the trigger class b2b--ajax-panel. The most basic ajax panel looks like this:

<div
    class="b2b--ajax-panel"
    data-url="{url controller="b2bcontact" action="grid"}"
>
    <!-- will load content here -->
</div>

After $(document).ready() is triggered it will trigger a XHR GET-Request and replace it's inner html with the responses content. Now all clicks on links and form submits inside the container will be changed to XHR-Requests. A streamlined example of this behaviour can be found in the B2BAjaxPanel Example Plugin, but it is used across the B2B-Suite.

Extended usage

Make links clickable

Any HTML element can be used to trigger a location change in a ajax panel, just add a class and set a destination:

<p class="ajax-panel-link" data-href="{url controller="b2bcontact" action="grid"}">Click</p>

Ignore links

It might be necessary that certain links in a panel really trigger the default behaviour, you just have to add a class to the link or form:

<a href="http://www.shopware.com" class="ignore--b2b-ajax-panel">Go to Shopware Home</a>

<form class="ignore--b2b-ajax-panel">
    [...]
</form>

Link to a different panel

One panel can influence another one by defining and linking to an id.

 <div ... data-id="foreign"></div>
 <a [...] data-target="foreign">Open in another component</a>

Ajax Panel Plugins

The B2B-Suite comes with a whole library of simple helper plugins to add behaviour the ajax panels.

As you can see, there is the AjaxPanelPluginLoader responsible for initializing and reinitializing plugins inside b2b-panels. Let's take our last example and extend it with a form plugin.

<div
    class="b2b--ajax-panel"
    data-url="{url controller="b2bcontact" action="grid"}"
    data-plugins="b2bAjaxPanelFormDisable"
>
    <!-- will load content here -->
</div>

This will disable all form elements inside the panel during panel reload.

While few of them add very specific behaviour to the grid or tab's views. There are also a few more commonly interesting plugins.

The b2bAjaxPanelModal plugin helps opening ajax panel content in a modal dialog box. Let's extend our initial example:

<div
    class="b2b--ajax-panel b2b-modal-panel"
    data-url="{url controller="b2bcontact" action="grid"}"
    data-plugins="b2bAjaxPanelFormDisable"
>
    <!-- will load content here -->
</div>

This will open the content in a modal box.

TriggerReload

Sometimes change in one panel needs to trigger a reload in another panel. This might be the case if you are editing in a dialog and displaying a grid behind it. In this case you can just trigger a reload on other panel id's, just like that:

<div class="b2b--ajax-panel" data-url="{url controller="b2bcontact" action="grid"}" data-id="grid">
    <!-- grid -->
</div>

<div class="b2b--ajax-panel" data-url="{url controller="b2bcontact" action="edit"}" data-ajax-panel-trigger-reload="grid">
    <!-- form -->
</div>

Now every change in the form view will trigger a reload in the grid view.

TreeSelect

This TreeSelect plugin allows to display a tree view with enabled drag and drop. In the view the div-element needs the class is--b2b-tree-select-container and the data attribute data-move-url="{url action=move}". The controller have to implement a move action, which accepts the roleId, relatedRoleId and the type.

Possible types: * prev-sibling * last-child * next-sibling

Top

Search results