O'Reilly logo

Continuous Integration, Delivery, and Deployment by Sander Rossel

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Creating the Product page

Next up is the product page. In your views folder, create a new file and call it product.html. This is by far the simplest page:

<div class="row">
   <div class="col-lg-12 text-center">
      <h2>{{name}}</h2>
      <p>
         <img src="http://placehold.it/300x300" alt="..." />
      </p>
      <p>{{description}}</p>
      <p>{{'&euro; ' + price}}</p>
      <p>
         <a href="shopping-cart.html" class="btn btn-primary">Buy</a>
      </p>
   </div>
</div>

That is all there is to it. The text-center class, while called text-center, will actually center everything.

We can put the scripts for utils, repository, and the product page itself in the header:

<script src="..\scripts\utils.js"></script> <script src="..\scripts\repository.js"></script> <script src="..\scripts\product.js"></script> ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required