If I had 40 products to add/manage, then I would want to separate the products’ data from the html structure. I would do that by having a js file with just the products stored in an array of objects, with each object containing all the relevant data of a specific product. Then I would have a loop to iterate through the array and display each product on the page with a specific “template” structure for each product. The template would be used to dynamically generate the html for the 40 products, instead of you having to manually create the html for the 40 products. I took your four products and created the array like:
const products = [
{
product: "Haori Jacket",
url: "https://www.pinterest.com/pin/ASQyu4IhVADMC-1ZPfodm2IgJJD-Q2dKvL8t-bQZv-H5rfuxCX52s94/",
image: "https://static1.squarespace.com/static/560c458be4b0af26f729d191/560c5de0e4b083d9c365515f/560d4f67e4b00b2c2a29ab00/1443712877696/lauren-winter-haori-jacket_0250.jpg?format=750w",
altDesc: "Clothing item",
price: 210
},
{
product: "Swing Dress",
url: "https://www.pinterest.com/pin/449304500297815470/",
image: "https://static1.squarespace.com/static/560c458be4b0af26f729d191/560c5de0e4b083d9c365515f/560d5226e4b0e3eb29871ecf/1443713579307/lauren-winter-swing-dress_0183.jpg?format=2500w",
altDesc: "Clothing item",
price: 218
},
{
product: "Haori Jacket",
url: "https://www.pinterest.com/pin/ASQyu4IhVADMC-1ZPfodm2IgJJD-Q2dKvL8t-bQZv-H5rfuxCX52s94/",
image: "https://static1.squarespace.com/static/560c458be4b0af26f729d191/560c5de0e4b083d9c365515f/560d4fd9e4b03b1013fd1f56/1443712996946/lauren-winter-lounge-jumpsuit-black_0284.jpg?format=750w",
altDesc: "Clothing item",
price: 298
},
{
product: "Swing Dress",
url: "https://www.pinterest.com/pin/449304500297815470/",
image: "https://static1.squarespace.com/static/560c458be4b0af26f729d191/560c5de0e4b083d9c365515f/560d542ae4b088b5adb66691/1443714094740/ulihu-blue-linen-crop-top_0320.jpg?format=750w",
altDesc: "Clothing item",
price: 125
}
];
The above data could be stored in a separate file and linked in to the html file before the main part of the script (the part you have already written plus the code that generates the actual product html - seen below):
// dynamically generate a string using a Template Literal via the reduce method
const productsHTML = products.reduce((html, {product, url, image, altDesc, price}) => {
const productID = product.replace(/\s/g,'_');
price = price.toFixed(2);
return html += `<a href="${url}" class="shop-item">
<img src="${image}" alt="${altDesc}" class="lazy shop-item__img" id="${productID}Img">
<div class="quickview">
<span class="quickview__icon" id="${productID}">Quick View</span>
<span class="quickview__info">${product}<br><span class="quickview__info--price" id="${productID}Price">$${price}</span></span>
</div>
</a>`
},'');
// appends the above html to the products section
$('.products-container').append(productsHTML);
Using the above code, the section where you manually had the products would now only contain the following:
<section class="products-container container"></section>
Everything after the above section would remain the same in your html file.