Template elements are commonly declared at the bottom of the body, just above the <script>
tags that have references to our external libraries. We are going to define some templates and then we will talk about each one of them:
<!-- templates --> <script type="text/html" id="header"></script> <script type="text/html" id="catalog"></script> <script type="text/html" id="add-to-catalog-modal"></script> <script type="text/html" id="cart-widget"></script> <script type="text/html" id="cart-item"></script> <script type="text/html" id="cart"></script> <script type="text/html" id="order"></script> <script type="text/html" id="finish-order-modal"></script>
Each template name is descriptive enough by itself, so it's easy to know what we are going to set inside them.
Let's see a diagram showing where we dispose each template on the screen:

Notice that the cart-item
template will...