Как генерировать карточки товаров?

Question

[VladimirEvgen]

Реализовал LocalStorage, корзину, фильтры и пр. Как карточки товаров делать? Т.е какими методами происходит генерация карточек товаров?

Comments

[VladimirEvgen]

Хочу дополнить. Что пробовал уже генерить через модальные окна, но есть две проблемы - первая - нет URL конкретного товара, а вторая при открытии, подтягивается инфа из первой строки моей БД.

[mletov]

Серверная часть на Node.js? Или ее вообще нет, только фронт?

[VladimirEvgen]

mletov, серверной части нет.
Есть файл JS из которого формируются товары. Ну Вот, пример:

let shopItemsData = [
  //рыбки
  {
    pass:"store-product fish Other",
    id:"OtherMG",
    name:"Мраморный Гурами",
    price: 20,
    desc: " Отличительной особенностью этих рыб является наличие дополнительного органа дыхания – лабиринта.",
    img: "images/img-1.jpg"
  },
  {
    pass:"store-product fish Other",
    id:"OtherPN",
    name:"Пециллия Неоновая",
    price: 65,
    desc: "Пецилии относятся к группе живородящих рыб. Это означает, что для вида характерно не метание икры, а рождение уже сформированных мальков.",
    img: "images/img-2.jpg"
  },
.....

И потом на странице это все выглядит следующим образом:

<div id="product-id-OtherMG" class="item store-product fish Other" style="display: block;">
           <div class="product-card">
             <div class="product-thumb">
               <a href="product.html"><img src="images/img-1.jpg" alt=""></a>
             </div>
             <div class="product-details">
               <h4><a href="product.html">Мраморный Гурами</a></h4>
               <p> Отличительной особенностью этих рыб является наличие дополнительного органа дыхания – лабиринта.</p>
             <div class="product-bottom-details d-flex justify-content-between">
               <div class="product-price">
                 20 руб.
               </div>
               <div class="product-links">

                  <div class="buttons">
                <i onclick="decrement(OtherMG)" class="fa-solid fa-minus me-3"></i>
                <div id="OtherMG" class="quantity">
                0
                    </div>
                <i onclick="increment(OtherMG)" class="fa-solid fa-plus me-3"></i>
              </div>

               </div>
               </div>
             </div>
             </div>
           </div>

[Вадим]

VladimirEvgen, Так а в чём Ваш вопрос то?
Как сгенерировать разметку?
https://learn.javascript.ru/modifying-document
https://learn.javascript.ru/template-element

[VladimirEvgen]

Вадим, возможно!
Спасибо! Изучу!!