Laravel/Adapt base template

From Aimeos documentation

Laravel
Other languages:
English 100%

To see all components and get everything working, you also need to create your main Blade template in resources/views/app.blade.php. The Aimeos bundle provides eight blocks that can be placed anywhere on the pages:

  • aimeos_styles (.css files)
  • aimeos_scripts (.js files)
  • 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. @yield('aimeos_header')
  8.     <title>Laravel</title>
  9.     <link href='//fonts.googleapis.com/css?family=Roboto:400,300' rel='stylesheet' type='text/css'>
  10.     <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
  11. @yield('aimeos_styles')
  12. </head>
  13. <body>
  14.     <nav class="navbar navbar-default">
  15.         <div class="container-fluid">
  16.             <div class="navbar-header">
  17.                 <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
  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.                 <a class="navbar-brand" href="#">Laravel</a>
  24.             </div>
  25.             <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
  26.                 <ul class="nav navbar-nav">
  27.                     <li><a href="/">Home</a></li>
  28.                 </ul>
  29.                 <div class="navbar-right">
  30. @yield('aimeos_head')
  31.                 </div>
  32.             </div>
  33.         </div>
  34.     </nav>
  35.     <div class="col-xs-12">
  36. @yield('aimeos_nav')
  37. @yield('aimeos_stage')
  38. @yield('aimeos_body')
  39. @yield('aimeos_aside')
  40. @yield('content')
  41.     </div>
  42.     <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  43.     <script src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
  44.     <script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>
  45. @yield('aimeos_scripts')
  46. </body>
  47. </html>


<< Previous: Install the Aimeos package | Next: Test the installation >>