I have an array with products in it. Each product is a separate block (card) on the page which appears after user uses checkboxes on the same page. The product cards are buttons. What I need to do is that when user clicks on any product card it opens a popup which is linked to said card. Like if user clicks on ‘product1 card’ it opens ‘product1 popup’, ‘product2 card’ opens ‘product2 popup’ etc.
I’m new to JS so i would appreciate any help, thanks!
Here is how I tried to do it, but it doesn’t work.
// Creating an array and put an individual popup code as 'popupHtml'
function showProducts(selectedValues) {
const resultsList = document.querySelector('.results__list');
const products = [
{
id: 'giorgiocasa',
name: 'Giorgiocasa',
values: ['cont', 'high', 'mirgroup'],
popupHtml: `<div class="popup__container">
<button class="popup__close-button" type="button"></button>
<img src="./images/giorgiocasa2.png" class="popup__image" alt="giorgiocasa">
<div class="popup__text">
<p class="popup__title">Giorgiocasa</p>
<a class="popup__link" href="#">Официальный сайт</a>
<p class="popup__description">Представительство: <span>MIRGROUP</span></p>
<p class="popup__subtitle">Условия работы</p>
<p class="popup__description">Скидка: 50%
<br>Предоплата: 50%
<br>Сроки производства: 45 рабочих дней
</p>
</div>
</div>`
},
{
id: 'piermaria',
name: 'Piermaria',
values: ['classic', 'midHigh', 'mirgroup'],
popupHtml: `<div class="popup__container">
<button class="popup__close-button" type="button"></button>
<img src="./images/giorgiocasa2.png" class="popup__image" alt="giorgiocasa">
<div class="popup__text">
<p class="popup__title">Piermaria</p>
<a class="popup__link" href="#">Официальный сайт</a>
<p class="popup__description">Представительство: <span>MIRGROUP</span></p>
<p class="popup__subtitle">Условия работы</p>
<p class="popup__description">Скидка: 50+3%
<br>Предоплата: 50%, заказ до 2000 евро - 100%
<br>Сроки производства: 45 рабочих дней
</p>
</div>
</div>`
},
];
let matchingProducts = [];
// Creating and adding a product card or 'no results' to the page
if (selectedValues.length === 0) {
const noResultsHtml = '<p class="results__text">НЕТ РЕЗУЛЬТАТОВ</p>';
resultsList.innerHTML = noResultsHtml;
return;
}
products.forEach(function(product) {
let matchCount = 0;
selectedValues.forEach(function(value) {
if (product.values.includes(value)) {
matchCount++;
}
});
if (matchCount === selectedValues.length) {
matchingProducts.push(product);
}
});
resultsList.innerHTML = '';
if (matchingProducts.length === 0) {
const noResultsHtml = '<p class="results__text">НЕТ РЕЗУЛЬТАТОВ</p>';
resultsList.insertAdjacentHTML('beforeend', noResultsHtml);
} else {
let html = '';
matchingProducts.forEach(function(product) {
html += `<li>
<button class="results__card" type="button" id="${product.id}"><span class="results__card-text">${product.name}</span></button>
</li>`;
});
resultsList.insertAdjacentHTML('beforeend', html);
}
}
// results__card are all button tags
const buttons = document.querySelectorAll('.results__card');
// Trying to open a popup linked to the specific product card after click
buttons.forEach((button) => {
button.addEventListener('click', () => {
const popupContent = button.dataset.popupHtml;
const popup = document.createElement('div');
popup.classList.add('popup-container');
popup.innerHTML = popupContent;
const container = document.querySelector('.popup');
container.appendChild(popup);
});
});
const resultsCards = document.querySelectorAll('.results__card');
resultsCards.forEach(function(card) {
card.addEventListener('click', function() {
const productId = this.dataset.productId;
const product = products.find(function(p) {
return p.id === productId;
});
// My popup opens with popup_opened class and closes with adding popup_closed class.
const popup = document.querySelector('.popup');
popup.innerHTML = product.popupHtml;
popup.classList.remove('popup_closed');
popup.classList.add('popup_opened');
});
});
