Symfony/Create new pages

From Aimeos documentation

Other languages:
English 100%

The Aimeos bundle contains all pages which are necessary to create a complete web shop. But sometimes you might want some additional pages that should contain Aimeos components too, like the small basket or the last seen products from the catalog session component. If you only want to modify the output of existing pages, please take a look into the article about adapting pages instead.

Assuming that you already created a controller, action and a template for your new page (if not, take a look into the Symfony documentation), this article contains the required steps to add the Aimeos components as well.

Adapt your controller

The easiest and most efficient way to retrieve the body and header parts from Aimeos components is to use the "aimeos_page" service and call the getSections() method inside your controller action:

  1. namespace Acme\DemoBundle\Controller;
  3. use Symfony\Bundle\FrameworkBundle\Controller\Controller;
  5. class ExampleController extends Controller
  6. {
  7.     public function indexAction()
  8.     {
  9.         $output = $this->get( 'aimeos_page' )->getSections( 'mypage' );
  10.         // do some more stuff
  11.         return $this->render( 'AcmeDemoBundle:Example:index.html.twig', $output );
  12.     }
  13. }

The result of the first line will be an array with keys for "aibody" and "aiheader" which contains associative arrays of the component name and the rendered HTML itself, e.g.

  1. $ouput = array(
  2.     'aibody' => array(
  3.         'basket/mini' => '<div> ... rendered HTML ... </div>',
  4.         'catalog/session' => '<div> ... rendered HTML ... </div>'
  5.     ),
  6.     'aiheader' => array(
  7.         'basket/mini' => '... HTML head tags ...',
  8.         'catalog/session' => '... HTML head tags ...'
  9.     )
  10. );

This array is then passed to the render() method so there will be "aibody" and "aiheader" variables available in the template.

Configure the components

Up to now, there would be no output because you haven't defined that you need some components in your template. This is done in the app/config/config.yml file of your Symfony application. Remind yourself of the parameter passed to the getSections() method call: We've used "mypage" in this example and this will be the required configuration key:

  1. aimeos_shop:
  2.     page:
  3.         mypage: ['basket/mini','catalog/session']

Now you have told your action that the "mypage" parameter should render the body and header output for the "basket/mini" and the "catalog/session" components.

Available components are identified using the directory structure of the HTML clients in the core. Thus, the catalog session component in the "Client/Html/Catalog/Session" directory is addressed via the string "catalog/session". Similarly, the product listing component is identified by "catalog/list" or the product detail compoent by "catalog/detail". This works for all compoents besides the ones that are in the "Client/Html/Common" and "Client/Html/Email" directory.

Please keep in mind that some components need specific parameters like the "catalog/detail" component, which requires at least a value for the "d_prodid" parameter. There's a complete list of parameters used available for reference.

Modify your template

After adding the configuration, there are two variables in your template available containing arrays: "aibody" and "aiheader". They store the rendered HTML that should now be displayed somewhere in your template which should contain these blocks:

  1. {% extends 'AimeosShopBundle::base.html.twig' %}
  3. {% block aimeos_header %}
  4. {% endblock %}
  6. {% block aimeos_head %}
  7. {% endblock %}
  9. {% block aimeos_nav %}
  10. {% endblock %}
  12. {% block aimeos_stage %}
  13. {% endblock %}
  15. {% block aimeos_body %}
  16. {% endblock %}
  18. {% block aimeos_aside %}
  19. {% endblock %}

You must extend your template from the base template of the Aimeos shop bundle. Otherwise, the CSS and Javascript files would be missing and no styling would be applied resp. no client side code is available for the full functionality.

The single blocks correspond to the blocks of your root layout template which you have created after installation. Depending on where you want to display the output, you have to insert the necessary line into the corresponding block, for example

  1. {% block aimeos_header %}
  2.     {{ aiheader['basket/mini']|raw }}
  3.     {{ aiheader['catalog/session']|raw }}
  4. {% endblock %}
  6. {% block aimeos_head %}
  7.     {{ aibody['basket/mini']|raw }}
  8. {% endblock %}
  10. {% block aimeos_aside %}
  11.     {{ aibody['catalog/session']|raw }}
  12. {% endblock %}

For the basket mini body, we use the "aimeos_head" block so the small basket will be located in the same place like in the other pages but you are free to put it in every block you want except the "aimeos_header" block. The same applies to the catalog session body in the "aimeos_aside" block. The header data must be always placed in the "aimeos_header" block to be effective but the order inside the "aimeos_header" block is most of the time not important. Both lines need the "|raw" modifier after specifying which component to display. This avoids the HTML being escaped by the Twig template engine.

If there are empty blocks after you've added all the output, you can remove them safely.