Creating the layout
Multiple technologies are used to create the layout—more specifically, the top layout—using the <html> and <body> tags, and the two div containers for the products and the cart panels respectively are going to be built with a Play template engine, named Twirl. Using this template, the inner HTML of the product and cart instances of div are going to be filled with ScalaTags.
Let's first create the main entry point. We named it index.html, and it is implemented by creating a file called index.scala.html in the view package of the server.
The content is as follows:
@(title: String)
<!DOCTYPE html>
<html>
<head>
<title>@title</title>
</head>
<body>
<div class="container">
<div class="row">
<div id="productPanel" class="col-8">
<div id="products" class="row">
</div>
</div>
...
