In our Demo Shopping Application, created in previous chapters, we had all the products listed in a single page. We will add an additional button, named Buy, beside the Show button in each product. When a user clicks on the Buy button, the browser will display a modal confirming his/her action to add the particular product to the cart. The modal will have an Add to cart button, which will simulate the behavior of the product that is being added to the cart and then will close the modal. We won't be creating a real shopping cart in this book. It's up to you to decide which method you would like to use to create a shopping cart.

Open the application.html.erb file present in the layouts folder by navigating to app | views | layouts. We will create a global modal in this file. This modal will get triggered whenever the Buy button is clicked. The markup for this modal is as follows:

<div class="modal fade" id="buyModal">
  <div class="modal...