Hey guys, going back to what we started I’ve been modifying and adding some more functionalities to the code you provided but now I have an issue. I created the array of objects storing the data for the html structure:
var data = [
{
product: "Haori Jacket",
url: "haorijacket.html",
image: "img/haori-jacket.jpg",
altDesc: "Jacket",
price: "$210.00",
outwear: ""
},
{
product: "Swing Dress",
url: "swingdress.html",
image: "img/swing-dress.jpg",
altDesc: "Dress",
price: "$218.00",
dress: ""
},
{
product: "Jane Skirt",
url: "",
image: "img/jane-skirt.jpg",
altDesc: "Shirt",
price: "$150.00",
sale: "$263.00",
bottom: ""
},
{
product: "Romy Top",
url: "",
image: "img/romy-top.jpg",
altDesc: "Blouse",
price: "$199.00",
sale: "$300.00",
top: ""
}
];
....
Then following @gunhoo93 code I have the template:
function clothingView(item, index) {
return (`
<a href="${item.url}" class="shop-item">
${item.sale ? `<span class="shop-item__sale">Sale</span>`: ''}
<img data-src=${item.image} alt="${item.altDesc}" class="shop-item__img">
<div class="quickview">
<span class="quickview__icon">Quick View</span>
<span class="quickview__info">${item.product}
<br>
<span class="quickview__price">${item.price}
${item.sale ? `<span class="quickview__price--sale">${item.sale}</span>`: ''}
</span>
</span>
<span class="clothing-index">${index}</span>
</div>
</a>
`);
};
// Append template literal to html structure
for (var i = 0; i < data.length; ++i) {
$('.all-items').append(clothingView(data[i], i))
}
Then I am filtering the array based on attributes:
saleData = data.filter(obj => 'sale' in obj);
for (var i = 0; i < saleData.length; ++i) {
$('.sale').append(clothingView(saleData[i], i))
}
Then the popup:
function swapPopup(clothing) {
$('#clothingImg').prop('src', clothing.image)
$('#clothingName').text(clothing.product)
$('#clothingPrice').text(clothing.price)
$('#clothingSale').text(clothing.sale) // This is supposed to be only for items on sale
}
var currentPopup = 0;
$('.quickview__icon').click(function(e) {
event.preventDefault();
$('.overlay').css({'opacity': '1', 'visibility': 'visible'});
currentPopup = $(e.target).parent().children('.clothing-index').text();
swapPopup(data[currentPopup]);
});
And this is what is happening:
This item does not have the “sale” attribute, but after I click on a item that has this attribute, suddenly (on the popup window) all items have this attribute. I only want this to show on the popup when I click an item with the sale attribute.