Динамически менять контента в popup?

Question

[Neolq]

Есть карточки с товаром, при клике на них, нужно вызывать popup и менять контент в нём(картинки в слайдере, текст и тд.).
В моём js, нужно отследить ко какой карточке был произведен клик и в соответствии с этим, менять наполнение.
Не могу понять как сделать что бы работало, не судите строго, если что-то неправильно, то было бы супер, если поможете разобраться.

const cardRecommended = document.querySelectorAll('.recommended__card')
const popupRecommended = document.querySelector('.recommended__popup')
const popupPicture = document.querySelectorAll('.recommended-popup__picture')

for (let i = 0; i < cardRecommended.length; i++) {
   cardRecommended[i].addEventListener('click', function (e) {
      popupRecommended.classList.toggle('-open')

      if (cardRecommended[0]) {
         popupPicture[0].innerHTML = '<img src="img/recommended/peeler.png" alt="">'
         popupPicture[1].innerHTML = '<img src="img/recommended/peeler.png" alt="">'
         popupPicture[2].innerHTML = '<img src="img/recommended/peeler.png" alt="">'
      } else if (cardRecommended[1]) {
         popupPicture[0].innerHTML = '<img src="img/recommended/garlic-press.png" alt="">'
         popupPicture[1].innerHTML = '<img src="img/recommended/garlic-press.png" alt="">'
         popupPicture[2].innerHTML = '<img src="img/recommended/garlic-press.png" alt="">'
      }
   })
}

<div class="recommended__popup recommended-popup">
            <div class="recommended-popup__product">
                <div class="recommended-popup__slider">
                    <div class="recommended-popup__picture"></div>
                    <div class="recommended-popup__picture"></div>
                    <div class="recommended-popup__picture"></div>
                </div>
                <button class="recommended-popup__favorite-btn favorite-btn">
                </button>
                <div class="recommended-popup__arrows">
                    <button class="slider-arrow recommended-popup-arrow recommended-popup-arrow--next">
                    </button>
                    <button class="slider-arrow recommended-popup-arrow recommended-popup-arrow--prev">
                    </button>
                </div>
                <div class="recommended-popup__dots"></div>
            </div>
            <div class="recommended-popup__content">
                <div class="recommended-popup__title">julienne peeler</div>
                <div class="recommended-popup__price">26$</div>
                <div class="recommended-popup__text">Guessing is for fortune tellers. Prepare your food at a perfect temperature with Deiss thermometer.</div>
                <button class="recommended-popup__btn button--style-3">add to cart</button>
                <button class="recommended-popup__cross">
                </button>
            </div>
        </div>

Answer 1

[iBird Rose]

по нормальному это нужно делать через бекенд. но раз уж костыляешь через фронт, то лучше всего тебе это сделать в виде табов. т.е. изначально создать в html все разновидности контента модалки и сделать им display: none; а потом просто при клике - нужный делать display: block.
p.s. чтобы картинки не грузились все сразу - сделай для них своеобразный lazy load. т.е. оставь src пустым, а путь к картинке задай в data-src атрибуте к примеру, а потом при открытии модалки именно в этом табе подменяй src

Comments

[Neolq]

Такой вопрос, если за мной только вёрстка макета, я могу оставить подключение попап на бекенд разработчика?

[iBird Rose]

Neolq, да

[Neolq]

iBird Rose, спасибо

[Сергей delphinpro]

iBird Rose,

создать в html все разновидности контента модалки

Зачем? А если там пара десятков товаров?

Не лучше ли сделать один шаблон и пачку голых данных в json? При клике рендерить шаблон и показывать в модалке.

[iBird Rose]

Сергей delphinpro, ну по скрину там не сильно понятно, но это очень выглядит как магазин. а зачем костылять магазин через js? он все равно всю логику нормально не пропишет. тем более пишет на чистом js без реактов, vue и т.д. поэтому вообще смысла не вижу в его случае это через фронт делать

[Сергей delphinpro]

iBird Rose, ну не знаю. Чтобы заюзать шаблоны на фронте, необязательно пилить всё на реактах/вью. Есть минималистичные шаблонизаторы на js без зависимостей.
Где-то в разметке прописываешь шаблон в script type=text/template, в дата атрибуте для каждой карточки выводишь данные для нее в джейсоне. Остается по клику сичтать атрибут, отрендерить шаблон с этими данными и вставить в пустую заготовку модалки. Где тут костыли?

[iBird Rose]

Сергей delphinpro, ну все тут сводится к тому, что в любом случае нужен будет json. и именно из бекенда, а не самописный на html. ибо данные товара в любой момент могут поменяться. а раз из бекенда будет json - зачем плодить все это на фронте, если тут уже можно по старинке при клике на модалку получать данные с бека и сразу их в модалке и показывать