Hands-On Full-Stack Web Development with ASP.NET Core

Product cards query

You are now ready to query for products from the REST API and display them in the page:

1. Add the HTML in bold to index.html:

<div class="app-main">  <div>    <ul id="menu"></ul>  </div>  <div id="productsContainer" class="clear-fix"></div>  <div class="clear-fix"></div></div>

2. Implement a products query and execute it when a category changes by adding the code in bold to app.js:

function syncProducts() {  const productsContainer = $('#productsContainer');  const category = $('#menu > li').filter('.menu-   selected').attr('categoryName');  productsContainer.empty();  window.api.getProducts(category, items => {    productsContainer.append(      items.map(item => renderTemplate('product-item', item)));  });}function setupAppMenu() { $('#menu').menu({items: ...