Add dynamic content via AJAX calls
Overview
This guide will show you how to add dynamic content to your storefront. It combines and builds upon the the guides about adding custom Javascript and adding a custom controller, so you should probably read them first.
Setting up the Controller
For this guide we will use a very simple controller that returns a timestamp wrapped in the JSON format.
Here's a video dealing with the creation of a controller that returns JSON data from our free online training "Backend Development".
As mentioned before this guide builds up upon the adding a custom controller guide. This means that this article will only cover the differences between returning a template and a
JSON response and making it accessible to XmlHttpRequests.<plugin base>/Storefront/Controller/ExampleController.php
1
<?php declare(strict_types=1);
2
​
3
namespace SwagBasicExample\Storefront\Controller;
4
​
5
use Shopware\Core\Framework\Routing\Annotation\RouteScope;
6
use Shopware\Storefront\Controller\StorefrontController;
7
use Symfony\Component\HttpFoundation\JsonResponse;
8
use Symfony\Component\Routing\Annotation\Route;
9
​
10
/**
11
* @Route(defaults={"_routeScope"={"storefront"}})
12
*/
13
class ExampleController extends StorefrontController
14
{
15
/**
16
* @Route("/example", name="frontend.example.example", defaults={"XmlHttpRequest"=true}, methods={"GET"})
17
*/
18
public function showExample(): JsonResponse
19
{
20
return new JsonResponse(['timestamp' => (new \DateTime())->format(\DateTimeInterface::W3C)]);
21
}
22
}
Copied!
As you might have seen this controller isn't too different from the controller used in the article mentioned before. The route annotation has an added
defaults={"XmlHttpRequest"=true} to allow XmlHttpRequest and it returns a JsonResponse instead of a normal Response. Using a JsonResponse instead of a normal Response causes the data structures passed to it to be automatically turned into a JSON string.The following
services.xml and routes.xml are identical as in the before mentioned article, but here they are for reference anyways:<plugin root>/src/Resources/config/services.xml
1
<?xml version="1.0" ?>
2
​
3
<container xmlns="http://symfony.com/schema/dic/services"
4
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
5
xsi:schemaLocation="http://symfony.com/schema/dic/services http://symfony.com/schema/dic/services/services-1.0.xsd">
6
​
7
<services>
8
<service id="SwagBasicExample\Storefront\Controller\ExampleController" public="true">
9
<call method="setContainer">
10
<argument type="service" id="service_container"/>
11
</call>
12
</service>
13
</services>
14
</container>
Copied!
<plugin root>/src/Resources/config/routes.xml
1
<?xml version="1.0" encoding="UTF-8" ?>
2
<routes xmlns="http://symfony.com/schema/routing"
3
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
4
xsi:schemaLocation="http://symfony.com/schema/routing
5
https://symfony.com/schema/routing/routing-1.0.xsd">
6
​
7
<import resource="../../Storefront/Controller/**/*Controller.php" type="annotation" />
8
</routes>
Copied!
Preparing the Plugin
Now we have to add a
Storefront Javascript plugin to display the timestamp we get from our controller.Again this is built upon the adding custom Javascript article, so if you don't already know what storefront
plugins are, hold on and read it first.<plugin root>/src/Resources/app/storefront/src/example-plugin/example-plugin.plugin.js
1
import HttpClient from 'src/service/http-client.service';
2
import Plugin from 'src/plugin-system/plugin.class';
3
​
4
export default class AjaxPlugin extends Plugin {
5
init() {
6
// initalize the HttpClient
7
this._client = new HttpClient();
8
​
9
// get refernces to the dom elements
10
this.button = this.el.children['ajax-button'];
11
this.textdiv = this.el.children['ajax-display'];
12
​
13
// register the events
14
this._registerEvents();
15
}
16
​
17
_registerEvents() {
18
// fetch the timestamp, when the button is clicked
19
this.button.onclick = this._fetch.bind(this);
20
}
21
​
22
_fetch() {
23
// make the network request and call the `_setContent` function as a callback
24
this._client.get('/example', this._setContent.bind(this), 'application/json', true)
25
}
26
​
27
_setContent(data) {
28
// parse the response and set the `textdiv.innerHTML` to the timestamp
29
this.textdiv.innerHTML = JSON.parse(data).timestamp;
30
}
31
}
Copied!
Adding the Template
The only thing that is now left, is to provide a template for the storefront plugin to hook into:
<plugin root>/src/Resources/views/storefront/page/content/index.html.twig
1
{% sw_extends '@Storefront/storefront/page/content/index.html.twig' %}
2
​
3
{% block cms_content %}
4
<div>
5
<h1>Swag AJAX Example</h1>
6
​
7
<div data-ajax-helper>
8
<div id="ajax-display"></div>
9
<button id="ajax-button">Button</button>
10
</div>
11
</div>
12
{% endblock %}
Copied!
Next steps
The controller we used in this example doesn't do a lot, but this pattern of providing and using data is generally the same. Even if you use it to fetch data form the database, but in that case you probably want to learn more about the DAL here.
Last modified 18d ago
Copy link
Edit on GitHub