WDD 330: Web Frontend Development II

W03 Team Activity: Dynamic Header and Footer

Overview

This activity will finish the process of converting the SleepOutside site to a dynamic site.

Activity Instructions

Complete the following assignment as a team. Designate one team member as the "main driver" and collaborate on their copy of the code. Everyone on the team should be actively engaged in writing the code and contributing to the solution. Once the solution is working, make sure that everyone on the team gets a copy of the code. Each week let someone else be the "main driver" of the coding.

Core Requirements

Trello

1. In the synchronous meeting, the driver should visit the team's copy of the project Trello board.
2. Add each of the attending team members to the Team Activity 03: Dynamic header and footer card.
3. Move it to the "Doing" list in Trello.
4. Read the details of the card together.

GitHub Branch

1. Pull any changes from the team GitHub project before proceeding.
2. Create a new branch named driverinitials--team3 where driverinitials is the driver's initials.

The Header and Footer

The code for the header and footer of the site should be same or nearly the same on all pages of a site. We currently have four copies, one on each .html file in the site. If you need to make a change to the header you will have to visit each page to keep them the same. That is a bother with four pages and it becomes unmanageable with larger sites.

Just as it was for the product list, templating can be a solution for this issue as well.

There is a difference this time in that there is only one copy of the template, and there is little information that needs to be updated. The header and footer are mostly static. Instead of embedding the template in JavaScript like you did with the product listing, this time you will pull the template HTML into a separate file that you can load in with AJAX.

1. Create another directory called partials (make sure you put this new directory in src/public).
2. Add two new files to the partials directory: header.html and footer.html.
3. Copy the HTML from src/index.html page using the inside of the header and footer elements and place that HTML into its respective file.
4. Add an id attribute to the header and footer elements in the index.html file.
   Example: header.html

   Do not just copy this code as it may not match up with your work!

   <div class="logo">
     <img src="/images/noun_Tent_2517.svg" alt="tent image for logo">
     <a href="index.html"> Sleep<span class="highlight">Outside</span></a>
   </div>
   <div class="cart">
     <a href="cart.html">
       <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
       ...all the SVG code ...
       </svg>
     </a>
   </div>

   Example: index.html

   (Do not copy this code as it may not match up with your work!)

   <header class="divider" id="main-header">
   </header>

5. To load the templates you can start with the renderListWithTemplate function you wrote last week, but will need to make some changes. We are only rendering one template instead of a list. We also need to write a function to request the HTML file with the header and footer.

   ✔ Copy the renderListWithTemplate function in utils.mjs and paste it back into utils.mjs.
   ✔ Rename it to renderWithTemplate.
6. Modify the new function by removing the loop and passing in four parameters:
   ✔ template
   ✔ parentElement
   ✔ data
   ✔ callback
7. The header should be mostly static HTML. However, if your team has completed the cart icon cards (animation or number of items), you may need to add back that functionality. This is a great use case for a callback function, but the callback will not always be necessary.
   In the renderWithTemplate function
   ✔ Insert the template into the parentElement
   ✔ Add an if statement that checks for the existence of the callback parameter, if it exists then call it.
   Example: utils.mjs renderWithTemplate

   export function renderWithTemplate(template, parentElement, data, callback) {
     parentElement.innerHTML = template;
     if(callback) {
       callback(data);
     }
   }

   This example uses innerHTML to insert the template into the parentElement. Other possible options include:

   parentElement.insertAdjacentHTML("afterbegin", template);

   const fragment = document.createRange().createContextualFragment(template);
                   parentElement.replaceChildren(fragment);

   What are the advantages and disadvantages of each approach?

8. Add a function to the utils.mjs named loadTemplate. This asynchronous function fetches the content of the HTML file given a path. The response to the fetch is converted to text and returns the HTML content as a string.
   Example: utils.mjs loadTemplate

   export async function loadTemplate(path) {
     const res = await fetch(path);
     const template = await res.text();
     return template;
   }

9. Add a function to the utils.mjs named loadHeaderFooter that can be exported. It needs to be able to do the following:
   1. Load the header and footer templates in from the partials using the loadTemplate.
   2. Grab the header and footer placeholder elements out of the DOM.
   3. Render the header and footer using renderWithTemplate.
   Example: utils.mjs loadHeaderFooter (header example only)

   const headerTemplate = await loadTemplate("../partials/header.html");
   
   const headerElement = document.querySelector("#main-header");
   
   renderWithTemplate(headerTemplate, headerElement);

10. Update main.js to import in loadHeaderFooter and then call that imported function to load the header and footer into src/index.html.
11. Do the same thing for
    • product_pages/index.html,
    • cart/index.html, and
    • cart/checkout.html (you will probably need to create a checkout.js file for this).

Stretch Activity

The cart was already a dynamic page. It read the list of items out of localStorage and then built the HTML to display the items. Update the shopping cart to match the rest of the application.

Refactor the Shopping Cart

1. Create a ShoppingCart.mjs module similar to what you did for ProductList.
2. Convert it to use a template like you did for the ProductList.

Example Solution

Make a Pull Request

After you have completed what you can, reviewed the example solution, and gotten your code working:

1. the driver should commit and push the changes,
2. the driver should submit a pull request for this branch,
3. the team reviews the pull request, closes it, and merges the branch back into the Main, and
4. finally, someone moves the Trello card to "Done".

Submission

Return to Canvas to report on your work.