Shopware 6 uses a tool called Twig template engine to show the pages on the website. Once you understand how it works, you’ll find it easy and adaptable. If you’re a programmer like me, who mainly deals with the PHP aspect of Shopware 6, you’ll mostly need to learn how to pass PHP variables to Twig templates. This article will explain precisely how to do that.
Dumping the variables in Twig:
We must first be able to determine whether our PHP variable was supplied to the Twig template. The ‘dump’ command needs to be placed in our template someplace, as shown below.
{% block base_content %}
<p>Dump the variables of PHP in the twig template!</p>
{{ dump() }}
{% endblock %}
Now, you can go to the frontend of the website and see the outcome yourself, just like shown in the screenshot below.
To explore the dump, click on the triangles to reveal more detailed information. You can also use Ctrl + F to search for specific items, and the searched term will be highlighted for your convenience. It’s quite handy!
You can use the same way that the Twig template engine accesses variables to show a single variable. For example, if you only want to display the value of the variable “currencyFactor,” you can do it like this:
{% block base_content %}
<p>Dump the variables!</p>
{{ dump( context.context.currencyFactor ) }}
{% endblock %}
Now that we know how to display the variables that Twig can access, we can also pass our own custom variables to it.
Passing variables to a Twig template from a storefront controller.
The typical method for creating our own custom pages with our own custom URLs is through storefront controllers. The example below shows how TestController renders a storefront page using a Twig template called index.html.twig at the URL address “example.com/test”.
Create custom controller (Path: – custom/plugins/YourCustomPlugin/src/Controller/TestController.php):
<?php
namespace YourCustomPlugin\Storefront\Controller;
use Shopware\Core\Framework\Routing\Annotation\RouteScope;
use Shopware\Core\System\SalesChannel\SalesChannelContext;
use Shopware\Storefront\Controller\StorefrontController;
use Symfony\Component\HttpFoundation\Request;
use Symfony\Component\HttpFoundation\Response;
use Symfony\Component\Routing\Annotation\Route;
/**
* @RouteScope(scopes={"storefront"})
*/
class TestController extends StorefrontController
{
/**
* @Route("/test", name="frontend.testplugin.test", methods={"GET"})
*/
public function showPage(Request $request, SalesChannelContext $context): Response
{
return $this->renderStorefront('@YourCustomPlugin/storefront/page/test/index.html.twig', [
'customString' => 'Custom string value',
'customArray' => [ 'key1' => 'Value 1', 'key2' => 'Value 2' ]
]);
}
}
Create Twig template (Path – custom/plugins/YourCustomPlugin/src/Resources/views/storefront/page/test/index.html.twig):
{% sw_extends '@Storefront/storefront/base.html.twig' %}
{% block base_content %}
<p>Dump the string!</p>
{{ dump( customString ) }}
<p>Dump the array!</p>
{{ dump( customArray ) }}
<p>Dump the value of key1 of the array!</p>
{{ dump( customArray.key1 ) }}
{% endblock %}
Create routes.xml file (path – custom/plugins/YourCustomPlugin/src/Resources/config/routes.xml):
<?xml version="1.0" encoding="UTF-8" ?>
<routes xmlns="http://symfony.com/schema/routing"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://symfony.com/schema/routing http://symfony.com/schema/routing/routing-1.0.xsd">
<import resource="../../Storefront/Controller/**/*Controller.php" type="annotation" />
</routes>
This provided the following result, which is displayed at the URL address “example.com/test”:
Please contact us at manish@bay20.com or call us at +91-8800519180 for any support related to shopware. You can also visit the Shopware development page to check the services we offer.