Laravel/Create new pages

From Aimeos documentation

Laravel
Other languages:
English 100%

The Aimeos package contains all pages necessary to create a complete web shop. Sometimes you might want to add additional pages that should contain Aimeos shop components. On your new page, you might want components like the small basket or the list of last seen products from the catalog session component. If you only want to modify the output of existing pages, please take a look at the article about adapting pages instead.

Assuming that you've already created a controller, a controller action, and a template for your new page (if not, take a look into the Basic section of the Laravel documentation), this article contains the required steps to add the Aimeos components to your page.

Adapt your controller

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

  1. namespace App\Http\Controllers;
  2.  
  3. class ExampleController extends Controller
  4. {
  5.     public function indexAction()
  6.     {
  7.         $params = app( '\Aimeos\Shop\Base\Page' )->getSections( 'mypage' );
  8.         // do some more stuff
  9.         return \View::make('mypagetmpl', $params);
  10.     }
  11. }

The result of the first line of this method will be an array with keys for "aibody" and "aiheader" that contain the associative arrays of the component names and the rendered HTML. 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::make()" method 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 config/shop.php file of your Laravel application. The parameter you passed to the getSections() method call in your controller will be used as the required configuration key. In this example we have used "mypage":

  1. 'page' => array(
  2.     'mypage' => array('basket/mini','catalog/session'),
  3. ),

Now you have told your controller action that the method using the "mypage" parameter (which in this case is the getSections() method) 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", and the product detail component is identified by "catalog/detail". This works for all components 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 available in your template 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('shop::base')
  2.  
  3. @section('aimeos_styles')
  4. @stop
  5.  
  6. @section('aimeos_scripts')
  7. @stop
  8.  
  9. @section('aimeos_header')
  10. @stop
  11.  
  12. @section('aimeos_head')
  13. @stop
  14.  
  15. @section('aimeos_nav')
  16. @stop
  17.  
  18. @section('aimeos_stage')
  19. @stop
  20.  
  21. @section('aimeos_body')
  22. @stop
  23.  
  24. @section('aimeos_aside')
  25. @stop

You must extend your template from the base template of the Aimeos shop package. If not extended, the base CSS and Javascript files will be missing and no styling will be applied. There is no client side code available for the full functionality.

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

  1. @section('aimeos_header')
  2.     <?= $aiheader['basket/mini'] ?>
  3.     <?= $aiheader['catalog/session'] ?>
  4. @stop
  5.  
  6. @section('aimeos_head')
  7.     <?= $aibody['basket/mini'] ?>
  8. @stop
  9.  
  10. @section('aimeos_aside')
  11.      <?= $aibody['catalog/session'] ?>
  12. @stop

We have chosen the "aimeos_head" block for placement of the basket mini-body (aibody['basket/mini']). The mini-basket will be positioned in the same place as it appears on the other shop pages. You are free to put it in every block you want except the "aimeos_header" block, which instead contains aiheader['basket/mini']. The header data must always be placed in the "aimeos_header" block to be effective. Both lines within the header data must be printed directly using the "<?= ... ?>" tags to avoid the HTML being escaped by the Blade template engine. The order inside the "aimeos_header" block is usually not important.

The same rules apply to the catalog session-body (aibody['catalog/session']). In our example we have chosen to place the catalog session-body in the "aimeos_aside" block.

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