I'm currently trying to populate a template with the array that I get from my localStorage. Everything displays fine in the cards except for the images. I have checked the URL paths and it is the right path because I had dummy cards in the markup just to check that the image path is correct before I cleared the innerHTML with calling generateShoppingCart(cart). In the browser dev tools, it says it could not load images and doesn't show any errors. Is there anything I'm doing wrong and is there a solution to this problem? I highly appreciate any feedback.
This is the HTML markup:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shopping Cart Page</title>
<link rel="preload" href="./img/clothing/hoodys/hoody-mockup.webp" as="image">
<meta name="description" content="Tailwindcss startup files for a new project">
<link rel="stylesheet" href="style.css">
<script defer src="./scripts/shoppingCart.js"></script>
</head>
<body>
<header>
<div class="container">
<nav class="flex items-center justify-between">
<div class="md:hidden cursor-pointer" data-nav-toggle>
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M4 6h16M4 12h16M4 18h7" />
</svg>
</div>
<a href="home-page.html" class="flex items-center"><img class="h-10 md:h-14"
src="./img/logo/pig-xxl.png" alt="bargaintravels logo"><span
class="font-bold md:text-2xl">BargainTravels</span></a>
<div class="flex gap-6 items-center">
<ul class="flex hidden dropdown-menu" data-nav>
<li><a class="flex gap-1" href="city-page.html">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
</svg> <span class="">Trips</span>
</a>
</li>
<li><a href="about-page.html">About</a></li>
<li><a href="shop-page.html">Shop</a></li>
</ul>
<div>
<a href="shopping-cart-page.html">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z" />
</svg>
</a>
</div>
</div>
<div class="hidden overlay" data-overlay></div>
</nav>
</div>
</header>
<main>
<section class="mt-fixed-sm md:mt-fixed-md">
<div class="container">
<h1>Shopping Cart</h1>
<div class="spacer grid-spacer md:grid-cols-3 lg:gap-16">
<div class="md:col-span-2 grid-spacer" data-shopping-cart>
<!-- card -->
<div class="cart-item">
<div class="col-span-1">
<img src="./img/clothing/hoodys/hoody-mockup.webp" alt="" loading="lazy">
</div>
<div class="col-span-2 flex flex-col">
<div>
<h3 class="font-semibold text-lg md:text-2xl">Hoody</h3>
<p class="text-gray-500 font-medium mt-2">R450</p>
</div>
<div class="more-info">
<div class="flex gap-4 items-center">
<label for="number">Quantity:</label>
<input type="number" name="number" id="number" min="0" value="1" required>
</div>
<button>Remove</button>
</div>
</div>
</div>
<!-- card -->
<div class="cart-item">
<div class="col-span-1">
<img src="./img/clothing/longsleeves/long-sleeve-mockup.webp" alt="" loading="lazy">
</div>
<div class="col-span-2 flex flex-col">
<div>
<h3 class="font-semibold text-lg md:text-2xl">Longsleeve</h3>
<p class="text-gray-500 font-medium mt-2">R450</p>
</div>
<div class="more-info">
<div class="flex gap-4 items-center">
<label for="number">Quantity:</label>
<input type="number" name="number" id="number" min="0" value="1" required>
</div>
<button>Remove</button>
</div>
</div>
</div>
<!-- card -->
<div class="cart-item">
<div class="col-span-1">
<img src="./img/clothing/pullovers/pullover-mockup.webp" alt="" loading="lazy">
</div>
<div class="col-span-2 flex flex-col">
<div>
<h3 class="font-semibold text-lg md:text-2xl">Pullover</h3>
<p class="text-gray-500 font-medium mt-2">R450</p>
</div>
<div class="more-info">
<div class="flex gap-4 items-center">
<label for="number">Quantity:</label>
<input type="number" name="number" id="number" min="0" value="1" required>
</div>
<button>Remove</button>
</div>
</div>
</div>
<!-- card -->
<div class="cart-item">
<div class="col-span-1">
<img src="./img/clothing/t-shirts/t-shirt-mockup.webp" alt="" loading="lazy">
</div>
<div class="col-span-2 flex flex-col">
<div>
<h3 class="font-semibold text-lg md:text-2xl">T-shirt</h3>
<p class="text-gray-500 font-medium mt-2">R450</p>
</div>
<div class="more-info">
<div class="flex gap-4 items-center">
<label for="number">Quantity:</label>
<input type="number" name="number" id="number" min="0" value="1" required>
</div>
<button>Remove</button>
</div>
</div>
</div>
<!-- card -->
<div class="cart-item">
<div class="col-span-1">
<img src="./img/clothing/jackets/jacket-mockup.webp" alt="" loading="lazy">
</div>
<div class="col-span-2 flex flex-col">
<div>
<h3 class="font-semibold text-lg md:text-2xl">Jacket</h3>
<p class="text-gray-500 font-medium mt-2">R450</p>
</div>
<div class="more-info">
<div class="flex gap-4 items-center">
<label for="number">Quantity:</label>
<input type="number" name="number" id="number" min="0" value="1" required>
</div>
<button>Remove</button>
</div>
</div>
</div>
</div>
<div class="md:col-span-1">
<h2 class="h3">Order Summary</h2>
<div class="spacer flow-content font-bold">
<div class="flex justify-between">
<p>Subtotal</p>
<span class="text-gray-500">R200</span>
</div>
<div class="flex justify-between">
<p>Shipping Cost</p>
<span class="text-gray-500">Free</span>
</div>
<div class="flex justify-between">
<p>Order Total</p>
<span class="text-gray-500">R950</span>
</div>
</div>
<button class="spacer btn w-full">Checkout</button>
</div>
</div>
</div>
</section>
</main>
<footer class="bg-accent text-white md:text-center">
<div class="container grid-spacer">
<ul class="footer-row">
<li><a href="about-page.html" class="footer-links-transiton">About us</a></li>
<li><a href="#" class="footer-links-transiton">Work for us</a></li>
<li><a href="#" class="footer-links-transiton">Contact us</a></li>
<li><a href="#" class="footer-links-transiton">Terms & conditons</a></li>
<li><a href="#" class="footer-links-transiton">Privacy policy</a></li>
</ul>
<ul class="footer-row">
<li>
<a href="#" class="social-icon">
Facebook
<svg class="h-6 w-6" height="24" width="24" aria-hidden="true" focusable="false"
data-prefix="fab" data-icon="facebook-f" class="svg-inline--fa fa-facebook-f fa-w-10"
role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512">
<path fill="currentColor"
d="M279.14 288l14.22-92.66h-88.91v-60.13c0-25.35 12.42-50.06 52.24-50.06h40.42V6.26S260.43 0 225.36 0c-73.22 0-121.08 44.38-121.08 124.72v70.62H22.89V288h81.39v224h100.17V288z">
</path>
</svg>
</a>
</li>
<li>
<a href="#" class="social-icon">
Instagram
<svg class="h-6 w-6" height="24" width="24" aria-hidden="true" focusable="false"
data-prefix="fab" data-icon="instagram" class="svg-inline--fa fa-instagram fa-w-14"
role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
<path fill="currentColor"
d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z">
</path>
</svg>
</a>
</li>
<li>
<a href="#" class="social-icon">
Twitter
<svg class="h-6 w-6" height="24" width="24" aria-hidden="true" focusable="false"
data-prefix="fab" data-icon="twitter" class="svg-inline--fa fa-twitter fa-w-16" role="img"
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path fill="currentColor"
d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z">
</path>
</svg>
</a>
</li>
<li>
<a href="#" class="social-icon">
Youtube
<svg class="h-6 w-6" height="24" width="24" aria-hidden="true" focusable="false"
data-prefix="fab" data-icon="youtube" class="svg-inline--fa fa-youtube fa-w-18" role="img"
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
<path fill="currentColor"
d="M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42.003 24.947-48.284 48.597-11.412 42.867-11.412 132.305-11.412 132.305s0 89.438 11.412 132.305c6.281 23.65 24.787 41.5 48.284 47.821C117.22 448 288 448 288 448s170.78 0 213.371-11.486c23.497-6.321 42.003-24.171 48.284-47.821 11.412-42.867 11.412-132.305 11.412-132.305s0-89.438-11.412-132.305zm-317.51 213.508V175.185l142.739 81.205-142.739 81.201z">
</path>
</svg>
</a>
</li>
</ul>
<p>© 2021 Bargaintravels. All rights reserved.</p>
</div>
</footer>
</body>
</html>
This is the JAVASCRIPT file:
const cart = JSON.parse(localStorage.getItem("SHOPPING_CART"));
const cardParent = document.querySelector("[data-shopping-cart]");
const generateShoppingCart = cart => {
cardParent.innerHTML = "";
cart.forEach(templateCard);
};
const templateCard = item => {
const { image, name, price, quantity } = item;
const card = `
<div class="cart-item">
<div class="col-span-1">
<img class="mockup" src="${image}" alt="A mockup of our ${name}">
</div>
<div class="col-span-2 flex flex-col">
<div>
<h3 class="font-semibold text-lg md:text-2xl">${name}</h3>
<p class="text-gray-500 font-medium mt-2">R${price}</p>
</div>
<div class="more-info">
<div class="flex gap-4 items-center">
<label for="number">Quantity:</label>
<input type="number" name="number" id="number" min="0" value="${quantity}" required>
</div>
<button>Remove</button>
</div>
</div>
</div>
`;
cardParent.innerHTML += card;
};
generateShoppingCart(cart);
Here is an example of one of the items in the array that I get back from my local storage
{
"name": "Longsleeve",
"price": 250,
"quantity": 1,
"size": "XS",
"color": "White",
"image": "./img/clothing/longsleeves/long-sleeve-mockup.webp"
}
