Главная » Использование классов на реальном примере: делаем карточки товара

Использование классов на реальном примере: делаем карточки товара


16.06.2021, 23:27
Задача: вывести с помощью JavaScript на странице сайта три карточки товара в едином стиле, но имеющие отличающиеся параметры (изображение, заголовок, описание, цена).


Это результат, который должен в итоге получиться

За основу взята вёрстка блоков с официального сайт bootstrap, а также файл с css-стилями для их оформления:

Код

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

Будущие карточки товара будут внутри одного родительского блока с классом .cards_list:

Код

<div class = "cards_list">
  Здесь все карточки товара
</div>

Каждая из карточек будет представлять собой отдельный блок div со следующей структурой:

Код

<div class="col">
  <div class="card h-100">
  <img src="изображение товара" class="card-img-top" alt="альтернативный текст">
  <div class="card-body">
  <h5 class="card-title">Заголовок карточки</h5>
  <p class="card-text">Описание товара в карточке</p>
  </div>
  <div class="card-footer text-white bg-danger">
  <p>Цена: <strong>цена товара руб</strong></p>
  </div>
  </div>
</div>

Выполнение задания

Создаём класс, с помощью которого будем создавать в дальнейшем наши карточки:

Код

class MenuCard {
  constructor() {
   
  }
}

Передаём в качестве аргументов в constructor() следующие данные:

src - путь к файлу с изображением карточки
alt - альтернативный текст изображения
title - заголовок карточки
descr - текстовое описание товара
price - цена

Код

class MenuCard {
  constructor(src, alt, title, descr, price) {

  }
}

Записываем их в свойства:

Код

class MenuCard {
  constructor(src, alt, title, descr, price) {
  this.src = src;
  this.alt = alt;
  this.title = title;
  this.descr = descr;
  this.price = price;
  }
}

Допустим, цена товара в будущем будем приходить с сервера, в долларах, добавим в наш класс метод changeToRUB() конвертации долларов в рубли, при этом в свойства запишем предварительно курс доллара в виде свойства this.transfer со значением 70:

Код

class MenuCard {
  constructor(src, alt, title, descr, price) {
  this.src = src;
  this.alt = alt;
  this.title = title;
  this.descr = descr;
  this.price = price;
  this.transfer = 70; /* установим какой-то курс доллара */
  }

  changeToRUB() {
  this.price = this.price * this.transfer;
  }
}

Вызываем метод конвертации валют в теле конструктора:

Код

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

  changeToRUB() {
  this.price = this.price * this.transfer;
  }
}

Добавляем в наш класс метод render(), который будет формировать вёрстку на странице:

Код

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

  changeToRUB() {
  this.price = this.price * this.transfer;
  }

  render() {
   
  }
}

Дальнейший алгоритм работы:

- создаём элемент и помещаем в него вёрстку с данными, которые получены в виде аргументов конструктора
- помещаем этот элемент на страницу в родительский блок

Создаём элемент внутри метода render() :

Код

  render() {
  const element = document.createElement('div');
  }

С помощью свойства innerHTML формируем структуру будущей карточки:

Код

  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>
  `;
  }

В качестве ещё одного аргумента (parentSelector) для конструктора передаём родительский блок, куда будут помещаться карточки.
В свойства конструктора добавляем ещё одно свойство, назовём его parent, значением которого будет полученный со страницы родительский блок

Код

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

  ...

}

С помощью метода append() помещаем созданный элемент внутрь родительского блока:

Код

  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>
  `;
   
  this.parent.append(element); /* помещаем созданный элемент в родительский блок */
  }

Класс готов и его можно использовать для создания экземпляров класса (наших карточек товара):

Код

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

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

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


Полный код скрипта


Код

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

  changeToRUB() {
  this.price = this.price * this.transfer;
  }

  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>
  `;

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

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

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

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



Демо-страница

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

Здесь можно увидеть доработку финального скрипта карточек товара (используется rest оператор)