Главная » Карточки товара - доработка скрипта с использованием rest оператора

Карточки товара - доработка скрипта с использованием rest оператора


21.06.2021, 15:33
В предыдущем материале разбиралось создание карточек товара, с помощью rest оператора немного оптимизируем скрипт.

Сейчас структура карточки рендерится в блоке div, который не имеет никаких классов, в тоже время внутри него есть блок div с классом .col

Код

  render() {
  const element = document.createElement('div');
  element.innerHTML = `
    <div class="col">
    <div class="card h-100">
    <img src=${this.src} class="card-img-top" alt=${this.alt}>
    <div class="card-body">
    <h5 class="card-title">${this.title}</h5>
    <p class="card-text">${this.descr}</p>
    </div>
    <div class="card-footer text-white bg-danger">
    <p>Цена: <strong>${this.price} руб</strong></p>
    </div>
    </div>
    </div>
     `;
  }

Нужно избавиться от этого блока, а блоку div, в котором рендерится карточка товара, добавить класс .col, более того, возможно в ходе работы нам понадобится добавить этому блоку какие-то дополнительные классы, желательно и это учесть тоже.

А так как мы не знаем, сколько именно в будущем мы захотим добавить классов к этому блоку, то поэтому будем использовать rest оператор.

Добавляем его последним аргументом в конструктор, добавляем произвольное имя, например, classes, и записываем в свойства:

Код

class MenuCard {
  constructor(src, alt, title, descr, price, parentSelector, ...classes) {
  this.src = src;
  this.alt = alt;
  this.title = title;
  this.descr = descr;
  this.price = price;
  this.classes = classes;
  this.parent = document.querySelector(parentSelector);
  this.transfer = 70; /* установим какой-то курс доллара */
  this.changeToRUB(); /* вызываем метод конвертации валюты */
  }

В this.classes у нас будет содержаться массив (вспоминаем про работу rest оператора), поэтому чтобы иметь возможность работать с каждым из его элементов в отдельности (вытащить название класса и подсоединить его к блоку div), нам понадобиться его перебрать, используем для этого метод forEach()

Код

this.classes.forEach(className => element.classList.add(className));

Здесь className - это каждый из элементов перебираемого массива, мы обращаемся к создаваемому блоку div и добавляем ему каждый раз новый класс (по мере их выбора из массива)

Теперь мы можем убрать блок-обёртку с классом .col

Код

   render() {
   const element = document.createElement('div');
  this.classes.forEach(className => element.classList.add(className));
   element.innerHTML = `
     <div class="card h-100">
     <img src=${this.src} class="card-img-top" alt=${this.alt}>
      <div class="card-body">
      <h5 class="card-title">${this.title}</h5>
      <p class="card-text">${this.descr}</p>
      </div>
      <div class="card-footer text-white bg-danger">
      <p>Цена: <strong>${this.price} руб</strong></p>
      </div>
     </div>
      `;
   }

А класс .col мы поместим последним аргументом в объявлении классов наших карточек:

Код

new MenuCard(
  "img/camry.png",
  "Camry",
  "Toyota Camry",
  "Toyota Camry - эталон комфорта и безопасности.",
  26746,
  ".cards_list",
  "col"
).render();

new MenuCard(
  "img/lendcruser.png",
  "Land Cruiser",
  "Toyota Land Cruiser 200",
  "Легендарный внедорожник Toyota Land Cruiser 200.",
  84571,
  ".cards_list",
  "col"
).render();

new MenuCard(
  "img/rav4.png",
  "Rav 4",
  "Toyota Rav 4",
  "Тойота РАВ 4- это пятиместный компактный кроссовер.",
  24103,
  ".cards_list",
  "col"
).render();

Нужно также прописать дефолтный класс, на случай, если при объявлении класса забудут прописать класс .col.

Используем для этого проверку условия в методе render(), что если в classes ничего не передалось, то мы присвоим класс .col для блока div:

Если в classes ничего не передалось, вернётся пустой массив (который, кстати, не превращается в логический false), поэтому проверку условия делаем на количество элементов в возвращаемом массиве

Код

  render() {
  const element = document.createElement('div');
  if (this.classes.length === 0) {
  this.element = 'col';
  element.classList.add(this.element);
  } else {
  this.classes.forEach(className => element.classList.add(className));
  }

  element.innerHTML = `
  <div class="card h-100">
  <img src=${this.src} class="card-img-top" alt=${this.alt}>
  <div class="card-body">
  <h5 class="card-title">${this.title}</h5>
  <p class="card-text">${this.descr}</p>
  </div>
  <div class="card-footer text-white bg-danger">
  <p>Цена: <strong>${this.price} руб</strong></p>
  </div>
  </div>
  `;

  this.parent.append(element); /* помещаем созданный элемент в родительский блок */
  }

Теперь, если при объявлении класса не будет в качестве аргумента задан класс, то блоку div автоматически добавится класс .col, за счёт проверки условия.

КОММЕНТАРИИ (0)