0

Здравствуйте не очень шарю в JS.Есть карточки товаров и есть один попап на все. Нужно чтоб при открытии в попап копировался блок с инфо о товаре. Подскажите как реализовать. У меня получается скопировать но копируется со всех карточек, а нужно чтоб копировалось с той карточки на которой вызывается попап.

const popupLinks = document.querySelectorAll('.popup-link');
const popupBody = document.querySelector('.popup');
const popupContent = document.querySelector('.popup__content');
const popupCloseIcon = document.querySelectorAll('.popup__close');
const body = document.querySelector('body');
const productCard = document.querySelectorAll('.product__card');
const productCardInfo = document.querySelectorAll('.product__card-inner');

let unlock = true;

const timeout = 300;


if (productCard.length > 0) {

    productCard.forEach(productCardItem => {

        productCardInfo.forEach(productInfo => {
            popupLinks.forEach(popupLink => {

                popupLink.addEventListener('click', function(e) {

                    const cloneProductCardInfo = productInfo.cloneNode(true);

                    popupContent.prepend(cloneProductCardInfo);

                    if (popupBody) {
                        popupOpen(popupBody);
                        e.preventDefault();
                    }
                });
            });
        });

    });

}
if (popupCloseIcon.length > 0) {
    for (let index = 0; index < popupCloseIcon.length; index++) {
        const el = popupCloseIcon[index];
        el.addEventListener('click', function(e) {
            popupBody.classList.remove('popup-active');
            popupContent.classList.remove('content-active');
            body.classList.remove('lock');
            e.preventDefault();
            console.log(this.popupContent);
        });
    }
}

function popupOpen(popupBody) {
    if (popupBody) {
        const popupActive = document.querySelector('.popup-active');
        popupBody.classList.add('popup-active');
        popupContent.classList.add('content-active');
        body.classList.add('lock');

        popupBody.addEventListener('click', function(e) {
            if (!e.target.closest('.popup__content')) {
                popupClose(e.target.closest('#popup'));

            }
        });
    }


}

function popupClose(popupActive) {
    if (unlock) {
        popupActive.classList.remove('popup-active');
        popupContent.classList.remove('content-active');
        body.classList.remove('lock');

    }
}
.product__grid-template {
    padding-top: 25px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 300px));
    grid-gap: 20px;
    background-color: rgb(203 212 213 / 96%);
    justify-content: center;
    padding-bottom: 40px;
    z-index: 10;
}

.product__card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    border: 2px solid gray;
    border-radius: 6px;
    background-color: rgb(247, 247, 247, 0.9);
}

.product__card-image {
    position: relative;
    width: 200px;
    height: 250px;
    margin: 5px auto;
    padding-bottom: 10px;
}

.product__card-image img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 250px;
    border-radius: 6px;
}

.hover-image {
    opacity: 0;
    transition: all ease-in-out 0.5s;
}

.product__card-image:hover .hover-image {
    opacity: 1;
    transition: all ease-in-out 0.5s;
}

.product__card-image:hover img.main-img,
.product__card-image:hover img.main-img:hover {
    opacity: 0;
    transition: all ease-in-out 0.5s;
}

.product__card-inner {}

.product__card-title {
    padding: 20px 10px 10px 10px;
    font-size: 16px;
    text-align: center;
    text-transform: uppercase;
}

.product__card-info {
    padding: 5px 10px;
    font-size: 14px;
    line-height: 1.2;
    text-align: center;
}

.product__description {
    padding: 10px;
}

.product__description span {
    display: block;
}

.product__card-price {
    padding-top: 5px;
    padding-bottom: 15px;
    text-align: center;
}

.product__card-price p {
    font-size: 22px;
    font-weight: 900;
    color: rgb(255, 16, 16);
}

.product__card-button,
.btn {
    background-color: rgb(55, 73, 151);
    width: 50px;
    margin: 0 auto;
    padding: 15px 30px;
    border-radius: 6px;
    margin-bottom: 20px;
    transition: all 0.3s ease;
}

.product__card-button:hover,
.btn:hover {
    background-color: rgb(115, 115, 194);
    transition: all 0.3s ease;
}

.product__card-button a {
    color: #ffffffff;
}
.popup {
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    left: 0;
    top: 0;
    opacity: 0;
    visibility: hidden;
    transition: all ease 0.3s;
    overflow-y: auto;
    overflow-x: hidden;
}

.popup-active {
    opacity: 1;
    visibility: visible;
    transition: all ease 0.3s;
}

.popup__body {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.popup__content {
    position: relative;
    max-width: 420px;
    background-color: rgba(244, 258, 267, 0.885);
    color: #000000;
    padding: 20px 50px;
    border-radius: 6px;
    transition: all ease 0.3s;
    opacity: 0;
    transform: translate(0px, -100%);
    z-index: 10;
    height: 0;
}

.content-active {
    height: 100%;
    transition: all ease 0.3s;
    opacity: 1;
    transform: translate(0px, 0%);
}

.popup__close {
    position: absolute;
    top: -15px;
    left: 97%;
    background-color: #ffffffff;
    font-size: 16px;
    font-weight: 900;
    border: red 2px solid;
    color: #000000;
    padding: 8px;
    border-radius: 50%;
    cursor: pointer;
    transition: all ease 0.3s;
}

.popup__close:hover {
    background-color: black;
    color: #ffffffff;
    border-color: #ffffffff;
    transition: all ease 0.3s;
}

.popup__title {
    font-size: 30px;
    text-align: center;
    text-transform: uppercase;
    padding-top: 50px;
}

.popup__img {
    position: relative;
    object-fit: cover;
    width: 280px;
    margin: 20px auto;
}

.popup__img img {
    text-align: center;
}

.popup__price {
    text-align: center;
    font-size: 25px;
    color: red;
}

.popup__price p {
    padding: 5px;
}

.form__body {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px;
}

.form__body label {
    position: absolute;
    color: #000000;
    transition: all ease 0.3s;
    top: 14px;
    left: 3%;
    font-size: 18px;
}

.input__name-body,
.input__number-body {
    position: relative;
    margin-top: 20px;
    margin-bottom: 20px;
}

input[type='text'],
input[type='number'] {
    width: 300px;
    outline: none;
    border: none;
    border-radius: 4px;
    padding: 15px 10px;
}

input:focus+label {
    transform: translate(-10%, -200%) scale(0.9);
    transition: all ease 0.3s;
}

[type="text"]:not(:placeholder-shown)+label,
[type="number"]:not(:placeholder-shown)+label {
    transform: translate(-10%, -200%) scale(0.9);
    transition: all ease 0.3s;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

input::placeholder {
    color: transparent;
}

.popup__btn {
    text-align: center;
    margin-top: 10px;
    margin-bottom: 30px;
}

.btn {
    color: rgb(225, 226, 236);
    font-size: 20px;
}

.popup__info {
    text-align: center;
    text-transform: uppercase;
    font-size: 20px;
    padding: 10px 5px;
}
<div class="product">
        <div class="inner">
            <div class="product__grid-template">
                <div class="product__card">

                    <div class="product__card-image">
                        <img class="main-img" src="img/bottle-dekor.jpg" alt="">
                        <img class='hover-image' src="img/bottle-dekor.jpg" alt="">
                    </div>
                    <div class="product__card-inner">
                        <div class="product__card-title">
                            <h3 class="card-title">декоративное украшение для барной стойки</h3>
                        </div>
                        <div class="product__card-info">
                            <div class="product__description">
                                <p class='card-description'>Cтеклянная черная бутылка на качающейся подставке с узорами - летящими золотыми пегасами.
                                    <!--<span>-->Выглядит необычно и шикарно!
                                    <!--</span>-->Пегас - символ превосходства, мощи, силы, скорости, свободы и красоты!
                                    <!--<span>-->Это изделие будет прекрасным подарком ручной работы для ценителей эксклюзивных предметов интерьера.
                                    <!--</span>-->Изделие с подставкой 52х21 см. Вес 3.7кг.Объемом 4.5л.</p>
                            </div>
                            <div class="product__card-price">
                                <p>Цена: 10000 р.</p>
                            </div>

                        </div>
                    </div>
                    <div class="product__card-button popup-link">
                        <a href="#">Купить</a>
                    </div>
                </div>
                <div class="product__card">

                    <div class="product__card-image">
                        <img class="main-img" src="img/bottles.jpg" alt="">
                        <img class='hover-image' src="img/bottles.jpg" alt="">
                    </div>
                    <div class="product__card-inner">
                        <div class="product__card-title">
                            <h3 class="card-title">денежные бутылочки</h3>
                        </div>
                        <div class="product__card-info">
                            <div class="product__description">
                                <p class='card-description'>Такой подарок принесет вам процветание и удачу!Бутылочки красивы и необычны, подойдут к любому празднику и юбилею! Такой подарок удивит и порадует ваших близких!</p>
                            </div>
                            <div class="product__card-price">
                                <p>Цена: 10000 р.</p>
                            </div>

                        </div>
                    </div>
                    <div class="product__card-button popup-link">
                        <a href="#">Купить</a>
                    </div>
                </div>
                <div class="product__card">

                    <div class="product__card-image">
                        <img class="main-img" src="img/kopilka.jpg" alt="">
                        <img class='hover-image' src="img/kopilka.jpg" alt="">
                    </div>
                    <div class="product__card-inner">
                        <div class="product__card-title">
                            <h3 class="card-title">копилка для мальчика</h3>
                        </div>
                        <div class="product__card-info">
                            <div class="product__description">
                                <p class='card-description'>
                                    Копилка для мальчика. Выполнена на заказ.
                                </p>
                            </div>
                            <div class="product__card-price">
                                <p>Цена: 10000 р.</p>
                            </div>

                        </div>
                    </div>
                    <div class="product__card-button popup-link">
                        <a href="#">Купить</a>
                    </div>
                </div>
                <div class="product__card">

                    <div class="product__card-image">
                        <img class="main-img" src="img/ng-venok.jpg" alt="">
                        <img class='hover-image' src="img/ng-venok.jpg" alt="">
                    </div>
                    <div class="product__card-inner">
                        <div class="product__card-title">
                            <h3 class="card-title">новогодний венок на дверь</h3>
                        </div>
                        <div class="product__card-info">
                            <div class="product__description">
                                <p class='card-description'>Новогодний венок на дверь/стену. Диаметр 30см. При изготовлении использованы искуственные ветки, ёлочные шары, шишки сосновые, искуственные серебряные листья.</p>
                            </div>
                            <div class="product__card-price">
                                <p>Цена: 10000 р.</p>
                            </div>

                        </div>
                    </div>
                    <div class="product__card-button popup-link">
                        <a href="#">Купить</a>
                    </div>
                </div>
                </div>
        </div>
    </div>
    <div class="popup" id="popup">

        <div class="popup__body">
            <div class="popup__content">
                <div class="popup__close">X</div>
                <!-- <h3 class="popup__title">название товара</h3> -->
                <!-- <div class="popup__img">
                    <img src="img/img2.jpg" alt="">
                </div> -->
                <!-- <div class="popup__price">
                    <p>Цена:</p>
                    <p>10000 р.</p>
                </div> -->
                <div class="popup__form">
                    <form action="#" class="form__body">
                        <div class="input__name-body">
                            <input type="text" name="name" id="name" placeholder="Введите Имя">
                            <label for="name" class="input__name">Введите Имя</label>

                        </div>
                        <div class="input__number-body">
                            <input type="number" id="number" name="number" placeholder="Номер телефона">
                            <label for="number" class="input__number">Номер телефона</label>

                        </div>
                    </form>
                </div>
                <div class="popup__btn">
                    <a href="" class="btn">Отправить</a>
                </div>
                <div class="popup__info">
                    <h3>Мы перезвоним Вам в ближайшее время.</h3>
                </div>
            </div>
        </div>
    </div>

1 ответ 1

2

Объяснять, что именно я сделал, довольно долго и вы наверняка не поймете в письменной форме, вам проще будет свой и мой код сравнить.

const popupLinks = document.querySelectorAll('.popup-link');
const popupBody = document.querySelector('.popup');
const popupContent = document.querySelector('.popup__content');
const popupContentProducCard = document.querySelector('.popup__content--clone-product-card');
const popupCloseIcon = document.querySelectorAll('.popup__close');
const body = document.querySelector('body');
const productCard = document.querySelectorAll('.product__card');

let unlock = true;

const timeout = 300;

if (productCard.length > 0) {
  productCard.forEach((productCardItem) => {
    const productInfo = productCardItem.querySelector('.product__card-inner');
    const popupLink = productCardItem.querySelector('.popup-link');

    popupLink.addEventListener('click', function(e) {
      const cloneProductCardInfo = productInfo.cloneNode(true);
      popupContentProducCard.innerHTML = '';
      popupContentProducCard.append(cloneProductCardInfo);

      if (popupBody) {
        popupOpen(popupBody);
        e.preventDefault();
      }
    });
  });
}
if (popupCloseIcon.length > 0) {
  for (let index = 0; index < popupCloseIcon.length; index++) {
    const el = popupCloseIcon[index];
    el.addEventListener('click', function(e) {
      popupBody.classList.remove('popup-active');
      popupContent.classList.remove('content-active');
      body.classList.remove('lock');
      e.preventDefault();
      console.log(this.popupContent);
    });
  }
}

function popupOpen(popupBody) {
  if (popupBody) {
    const popupActive = document.querySelector('.popup-active');
    popupBody.classList.add('popup-active');
    popupContent.classList.add('content-active');
    body.classList.add('lock');

    popupBody.addEventListener('click', function(e) {
      if (!e.target.closest('.popup__content')) {
        popupClose(e.target.closest('#popup'));
      }
    });
  }
}

function popupClose(popupActive) {
  if (unlock) {
    popupActive.classList.remove('popup-active');
    popupContent.classList.remove('content-active');
    body.classList.remove('lock');
  }
}
.product__grid-template {
  padding-top: 25px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 300px));
  grid-gap: 20px;
  background-color: rgb(203 212 213 / 96%);
  justify-content: center;
  padding-bottom: 40px;
  z-index: 10;
}

.product__card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  border: 2px solid gray;
  border-radius: 6px;
  background-color: rgb(247, 247, 247, 0.9);
}

.product__card-image {
  position: relative;
  width: 200px;
  height: 250px;
  margin: 5px auto;
  padding-bottom: 10px;
}

.product__card-image img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 250px;
  border-radius: 6px;
}

.hover-image {
  opacity: 0;
  transition: all ease-in-out 0.5s;
}

.product__card-image:hover .hover-image {
  opacity: 1;
  transition: all ease-in-out 0.5s;
}

.product__card-image:hover img.main-img,
.product__card-image:hover img.main-img:hover {
  opacity: 0;
  transition: all ease-in-out 0.5s;
}

.product__card-inner {}

.product__card-title {
  padding: 20px 10px 10px 10px;
  font-size: 16px;
  text-align: center;
  text-transform: uppercase;
}

.product__card-info {
  padding: 5px 10px;
  font-size: 14px;
  line-height: 1.2;
  text-align: center;
}

.product__description {
  padding: 10px;
}

.product__description span {
  display: block;
}

.product__card-price {
  padding-top: 5px;
  padding-bottom: 15px;
  text-align: center;
}

.product__card-price p {
  font-size: 22px;
  font-weight: 900;
  color: rgb(255, 16, 16);
}

.product__card-button,
.btn {
  background-color: rgb(55, 73, 151);
  width: 50px;
  margin: 0 auto;
  padding: 15px 30px;
  border-radius: 6px;
  margin-bottom: 20px;
  transition: all 0.3s ease;
}

.product__card-button:hover,
.btn:hover {
  background-color: rgb(115, 115, 194);
  transition: all 0.3s ease;
}

.product__card-button a {
  color: #ffffffff;
}

.popup {
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  left: 0;
  top: 0;
  opacity: 0;
  visibility: hidden;
  transition: all ease 0.3s;
  overflow-y: auto;
  overflow-x: hidden;
}

.popup-active {
  opacity: 1;
  visibility: visible;
  transition: all ease 0.3s;
}

.popup__body {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.popup__content {
  position: relative;
  max-width: 420px;
  background-color: rgba(244, 258, 267, 0.885);
  color: #000000;
  padding: 20px 50px;
  border-radius: 6px;
  transition: all ease 0.3s;
  opacity: 0;
  transform: translate(0px, -100%);
  z-index: 10;
  height: 0;
}

.content-active {
  height: 100%;
  transition: all ease 0.3s;
  opacity: 1;
  transform: translate(0px, 0%);
}

.popup__close {
  position: absolute;
  top: -15px;
  left: 97%;
  background-color: #ffffffff;
  font-size: 16px;
  font-weight: 900;
  border: red 2px solid;
  color: #000000;
  padding: 8px;
  border-radius: 50%;
  cursor: pointer;
  transition: all ease 0.3s;
}

.popup__close:hover {
  background-color: black;
  color: #ffffffff;
  border-color: #ffffffff;
  transition: all ease 0.3s;
}

.popup__title {
  font-size: 30px;
  text-align: center;
  text-transform: uppercase;
  padding-top: 50px;
}

.popup__img {
  position: relative;
  object-fit: cover;
  width: 280px;
  margin: 20px auto;
}

.popup__img img {
  text-align: center;
}

.popup__price {
  text-align: center;
  font-size: 25px;
  color: red;
}

.popup__price p {
  padding: 5px;
}

.form__body {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px;
}

.form__body label {
  position: absolute;
  color: #000000;
  transition: all ease 0.3s;
  top: 14px;
  left: 3%;
  font-size: 18px;
}

.input__name-body,
.input__number-body {
  position: relative;
  margin-top: 20px;
  margin-bottom: 20px;
}

input[type='text'],
input[type='number'] {
  width: 300px;
  outline: none;
  border: none;
  border-radius: 4px;
  padding: 15px 10px;
}

input:focus+label {
  transform: translate(-10%, -200%) scale(0.9);
  transition: all ease 0.3s;
}

[type="text"]:not(:placeholder-shown)+label,
[type="number"]:not(:placeholder-shown)+label {
  transform: translate(-10%, -200%) scale(0.9);
  transition: all ease 0.3s;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

input::placeholder {
  color: transparent;
}

.popup__btn {
  text-align: center;
  margin-top: 10px;
  margin-bottom: 30px;
}

.btn {
  color: rgb(225, 226, 236);
  font-size: 20px;
}

.popup__info {
  text-align: center;
  text-transform: uppercase;
  font-size: 20px;
  padding: 10px 5px;
}
<div class="product">
  <div class="inner">
    <div class="product__grid-template">


      <div class="product__card">
        <div class="product__card-image">
          <img class="main-img" src="img/bottle-dekor.jpg" alt="">
          <img class='hover-image' src="img/bottle-dekor.jpg" alt="">
        </div>
        <div class="product__card-inner">
          <div class="product__card-title">
            <h3 class="card-title">декоративное украшение для барной стойки</h3>
          </div>
          <div class="product__card-info">
            <div class="product__description">
              <p class='card-description'>Cтеклянная черная бутылка на качающейся подставке с узорами - летящими золотыми пегасами.
                <!--<span>-->Выглядит необычно и шикарно!
                <!--</span>-->Пегас - символ превосходства, мощи, силы, скорости, свободы и красоты!
                <!--<span>-->Это изделие будет прекрасным подарком ручной работы для ценителей эксклюзивных предметов интерьера.
                <!--</span>-->Изделие с подставкой 52х21 см. Вес 3.7кг.Объемом 4.5л.</p>
            </div>
            <div class="product__card-price">
              <p>Цена: 10000 р.</p>
            </div>

          </div>
        </div>
        <div class="product__card-button popup-link">
          <a href="#">Купить</a>
        </div>
      </div>


      <div class="product__card">
        <div class="product__card-image">
          <img class="main-img" src="img/bottles.jpg" alt="">
          <img class='hover-image' src="img/bottles.jpg" alt="">
        </div>
        <div class="product__card-inner">
          <div class="product__card-title">
            <h3 class="card-title">денежные бутылочки</h3>
          </div>
          <div class="product__card-info">
            <div class="product__description">
              <p class='card-description'>Такой подарок принесет вам процветание и удачу!Бутылочки красивы и необычны, подойдут к любому празднику и юбилею! Такой подарок удивит и порадует ваших близких!</p>
            </div>
            <div class="product__card-price">
              <p>Цена: 10000 р.</p>
            </div>

          </div>
        </div>
        <div class="product__card-button popup-link">
          <a href="#">Купить</a>
        </div>
      </div>


      <div class="product__card">
        <div class="product__card-image">
          <img class="main-img" src="img/kopilka.jpg" alt="">
          <img class='hover-image' src="img/kopilka.jpg" alt="">
        </div>
        <div class="product__card-inner">
          <div class="product__card-title">
            <h3 class="card-title">копилка для мальчика</h3>
          </div>
          <div class="product__card-info">
            <div class="product__description">
              <p class='card-description'>
                Копилка для мальчика. Выполнена на заказ.
              </p>
            </div>
            <div class="product__card-price">
              <p>Цена: 10000 р.</p>
            </div>

          </div>
        </div>
        <div class="product__card-button popup-link">
          <a href="#">Купить</a>
        </div>
      </div>


      <div class="product__card">
        <div class="product__card-image">
          <img class="main-img" src="img/ng-venok.jpg" alt="">
          <img class='hover-image' src="img/ng-venok.jpg" alt="">
        </div>
        <div class="product__card-inner">
          <div class="product__card-title">
            <h3 class="card-title">новогодний венок на дверь</h3>
          </div>
          <div class="product__card-info">
            <div class="product__description">
              <p class='card-description'>Новогодний венок на дверь/стену. Диаметр 30см. При изготовлении использованы искуственные ветки, ёлочные шары, шишки сосновые, искуственные серебряные листья.</p>
            </div>
            <div class="product__card-price">
              <p>Цена: 10000 р.</p>
            </div>

          </div>
        </div>
        <div class="product__card-button popup-link">
          <a href="#">Купить</a>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="popup" id="popup">

  <div class="popup__body">
    <div class="popup__content">
      <div class="popup__close">X</div>
      <div class="popup__content--clone-product-card">
        <!-- <h3 class="popup__title">название товара</h3> -->
        <!-- <div class="popup__img">
                    <img src="img/img2.jpg" alt="">
                </div> -->
        <!-- <div class="popup__price">
                    <p>Цена:</p>
                    <p>10000 р.</p>
                </div> -->
      </div>

      <div class="popup__form">
        <form action="#" class="form__body">
          <div class="input__name-body">
            <input type="text" name="name" id="name" placeholder="Введите Имя">
            <label for="name" class="input__name">Введите Имя</label>

          </div>
          <div class="input__number-body">
            <input type="number" id="number" name="number" placeholder="Номер телефона">
            <label for="number" class="input__number">Номер телефона</label>

          </div>
        </form>
      </div>
      <div class="popup__btn">
        <a href="" class="btn">Отправить</a>
      </div>
      <div class="popup__info">
        <h3>Мы перезвоним Вам в ближайшее время.</h3>
      </div>
    </div>
  </div>
</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.