Symfony/Adapt base template

From Aimeos documentation

Symfony
Other languages:
English 100%


To see all components and get everything working, you also need to adapt your Twig base template in app/Resources/view/base.html.twig. The Aimeos bundle provides eight blocks that can be placed anywhere on the pages:

  • aimeos_styles (.css files, maybe compressed)
  • aimeos_scripts (.js files, maybe compressed)
  • aimeos_header (HTML head tags like product title and meta information)
  • aimeos_head (head section including the small basket for example)
  • aimeos_nav (shop navigation and faceted search)
  • aimeos_stage (stage area including breadcrumb navigation)
  • aimeos_body (main content for product lists, details or the checkout process)
  • aimeos_aside (user related content, e.g. last seen products)

This is a working example using the Twitter bootstrap CSS framework:

  1. <!DOCTYPE html>
  2. <html lang="en" class="no-js">
  3.     <head>
  4.         <meta charset="UTF-8" />
  5.         <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.         <meta name="viewport" content="width=device-width, initial-scale=1">
  7. {% block aimeos_header %}{% endblock %}
  8.         <title>{% block title %}Aimeos shop{% endblock %}</title>
  9.         <link rel="icon" type="image/x-icon" href="{{ asset('favicon.ico') }}" />
  10.         <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
  11. {% block aimeos_styles %}{% endblock %}
  12.     </head>
  13.     <body>
  14.         <div class="navbar navbar-static" role="navigation">
  15.           <div class="container">
  16.             <div class="navbar-header">
  17.               <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
  18.                 <span class="sr-only">Toggle navigation</span>
  19.                 <span class="icon-bar"></span>
  20.                 <span class="icon-bar"></span>
  21.                 <span class="icon-bar"></span>
  22.               </button>
  23.             </div>
  24.           </div>
  25. {% block aimeos_head %}{% endblock %}
  26.         </div>
  27.         <div class="col-xs-12">
  28. {% block aimeos_nav %}{% endblock %}
  29. {% block aimeos_stage %}{% endblock %}
  30. {% block aimeos_body %}{% endblock %}
  31. {% block aimeos_aside %}{% endblock %}
  32.         </div>
  33.         <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
  34.         <script src="https://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
  35. 	<script src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
  36.         <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
  37. {% block aimeos_scripts %}{% endblock %}
  38.     </body>
  39. </html>


<< Previous: Install the Aimeos bundle | Next: Setup the administration interface >>