Как сделать счётчик количества товаров которые соответствуют фильтру?

Для создания счётчика количества товаров, которые соответствуют фильтру, вам понадобится некоторый JavaScript код.

Прежде всего, вам потребуется HTML разметка для отображения счётчика и товаров. Предположим, у вас есть контейнер с классом "products" и счётчик соответствующих товаров с id "counter". HTML мог бы выглядеть так:

<div class="products">
  <h2>Товары</h2>
  <p>Количество товаров: <span id="counter">0</span></p>
  <ul id="product-list">
    <!-- здесь будут отображаться товары -->
  </ul>
</div>

Затем, вам нужно будет написать JavaScript код, который будет фильтровать товары и обновлять счётчик в соответствии с выбранным фильтром. Вот пример такого JavaScript кода:

// Получаем ссылки на необходимые элементы
const productList = document.getElementById('product-list');
const counter = document.getElementById('counter');

// Пример данных с товарами
const products = [
  { name: 'Товар 1', category: 'электроника' },
  { name: 'Товар 2', category: 'продукты' },
  { name: 'Товар 3', category: 'электроника' },
  { name: 'Товар 4', category: 'одежда' },
  // добавьте больше товаров, чтобы протестировать фильтр
];

// Функция для отображения товаров, которые соответствуют фильтру
function renderProducts(filter) {
  // Очищаем список товаров перед отображением
  productList.innerHTML = '';

  // Фильтруем товары на основе выбранной категории
  const filteredProducts = products.filter(product => product.category === filter);

  // Обновляем счётчик
  counter.textContent = filteredProducts.length;

  // Отображаем отфильтрованные товары
  filteredProducts.forEach(product => {
    const item = document.createElement('li');
    item.textContent = product.name;
    productList.appendChild(item);
  });
}

// Пример использования функции renderProducts
renderProducts('электроника');

В приведённом выше коде, мы начинаем с объявления переменных, которые ссылается на необходимые элементы HTML. Затем у нас есть массив с данными о товарах и функция "renderProducts", которая принимает фильтр в качестве аргумента.

Внутри функции "renderProducts" мы сначала очищаем список товаров, затем фильтруем товары на основе выбранной категории, обновляем счётчик и наконец отображаем отфильтрованные товары.

В приведённом примере, функция "renderProducts" вызывается с аргументом "электроника". Вы можете вызывать эту функцию с любым другим значением фильтра для обновления счётчика и отображения соответствующих товаров.

Надеюсь, этот ответ был полезен и помог вам разобраться, как создать счётчик количества товаров, которые соответствуют фильтру, используя JavaScript.