Slim/Create new pages

From Aimeos documentation

Slim
Other languages:
English 100%

The Aimeos package 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.

This article contains the required steps to add Aimeos components to a new page.

Create your controller

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

  1. namespace Aimeos\Slim\Controller;
  2.  
  3. use Interop\Container\ContainerInterface;
  4. use Psr\Http\Message\ServerRequestInterface;
  5. use Psr\Http\Message\ResponseInterface;
  6.  
  7. class Mypage
  8. {
  9. 	public static function indexAction( ContainerInterface $container, ServerRequestInterface $request, ResponseInterface $response, array $args )
  10. 	{
  11. 		$result = $container->get( 'aimeos_page' )->getSections( 'mypage', $request, $response, $args );
  12. 		return $container->get( 'view' )->render( $response, 'mypage.html.twig', $result );
  13. 	}
  14. }

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 view, so the "aibody" and "aiheader" variables will be available in the template.

Configure the components

Up to now, there would be no data in the aibody and aiheader arrays because you haven't defined that one or more components should be available. This is done in the ./src/aimeos-settings.php file of your Slim 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. 'page' => array(
  2.     'mypage' => array('basket/mini','catalog/session'),
  3. ),

Now you have told your action that the action using 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 can contain these blocks:

  1. {% extends 'aimeos.html.twig' %}
  2.  
  3. {% block aimeos_header %}
  4. {% endblock %}
  5.  
  6. {% block aimeos_head %}
  7. {% endblock %}
  8.  
  9. {% block aimeos_nav %}
  10. {% endblock %}
  11.  
  12. {% block aimeos_stage %}
  13. {% endblock %}
  14.  
  15. {% block aimeos_body %}
  16. {% endblock %}
  17.  
  18. {% block aimeos_aside %}
  19. {% endblock %}

You must extend your template from the base template of the Aimeos shop package. Otherwise, the base 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 app layout template, which is also available in the ./templates/ directory. Depending on where you want to display the output, you have to insert the necessary lines into the corresponding block, for example

  1. {% block aimeos_header %}
  2.     {{ aiheader['basket/mini']|raw }}
  3.     {{ aiheader['catalog/session']|raw }}
  4. {% endblock %}
  5.  
  6. {% block aimeos_head %}
  7.     {{ aibody['basket/mini']|raw }}
  8. {% endblock %}
  9.  
  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.