scripts/components/modalCard.js - main - merulaalba/RestoApp

scripts/components/modalCard.js
174 строки6 KB
merulaalba
Bug fixes
19 июл 2026, 16:36
19 июл 2026, 16:3684230d2
import { CardsDimensions, supplementsNames } from '../variables.js';
import { createBadge } from './badge.js';

const modalCard = (product, allProductsData = {}) => {
  const template = document.getElementById('card-modal-template');
  if (!template) return null;
  const templateClone = template.content.cloneNode(true);

  const finalFragment = document.createDocumentFragment();

  // Добавила изображение продукта
  const imageWrapper = templateClone.querySelector('.modal__image-wrapper');
  const modalImage = templateClone.querySelector('.modal__image');

  if (imageWrapper && modalImage) {
    modalImage.src = product.img;
    modalImage.alt = product.title;
    modalImage.width = CardsDimensions.productModalImg;
    modalImage.height = CardsDimensions.productModalImg;
  }

  // Блок с основной информацией о блюде
  const modalInfoBlock = templateClone.querySelector('.modal__info');
  if (!modalInfoBlock) return null;

  const title = modalInfoBlock.querySelector('.modal__info-title');
  const description = modalInfoBlock.querySelector('.modal__info-description');
  const totalPriceButton = modalInfoBlock.querySelector('.modal__total-price');

  if (title && description && totalPriceButton) {
    title.textContent = product.title;
    description.innerHTML = product.description;

    if (product.sizes.length > 0) {
      totalPriceButton.textContent = `${product.sizes[0].price} ₽`;
    }
  }

  // Бейджи
  const badgesList = modalInfoBlock.querySelector('.badges-list');
  createBadge(badgesList, product, allProductsData.badges, 'modal');

  // Секция с порциями
  const sectionSizes = modalInfoBlock.querySelector('.modal__sizes');
  const sizesSwitcher = modalInfoBlock.querySelector('.modal__sizes-switcher');
  const portionTemplate = document.getElementById('portion-template');
  const weightElement = templateClone.querySelector('.modal__info-weight');

  if (product.sizes.length <= 1) {
    sectionSizes.remove();
    weightElement.textContent = `${product.sizes[0].g} г`;
  } else {
    weightElement.remove();
    product.sizes.forEach(sizeObj => {
      const clone = portionTemplate.content.cloneNode(true);

      const listItem = clone.querySelector('.portion__item');
      const btn = clone.querySelector('input[type="radio"');
      const spanSize = clone.querySelector('.portion__size');
      const spanWeight = clone.querySelector('.portion__weight');
      const spanPrice = clone.querySelector('.portion__price');

      if (btn) {
        btn.dataset.price = sizeObj.price;
        btn.setAttribute('data-price', `${sizeObj.price}`);
        btn.value = sizeObj.size;
      }

      if (spanSize) spanSize.textContent = sizeObj.title;
      if (spanWeight) spanWeight.textContent = `${sizeObj.g} г`;
      if (spanPrice) spanPrice.textContent = `${sizeObj.price} ₽`;

      if (listItem && sizesSwitcher) {
        sizesSwitcher.appendChild(listItem);
      }
    });

    const firstButton = sizesSwitcher.querySelector('label input[value="standard"');
    firstButton.checked = true;

    if (totalPriceButton) {
      totalPriceButton.textContent = `${firstButton.value} ₽`;
    }
  }

  // Секция с добавками
  const supplementsList = modalInfoBlock.querySelector('.supplements__list');
  const supplementTemplate = document.getElementById('supplement-template').content;

  if (Array.isArray(product.supplements) && product.supplements.length > 0 && supplementsList && supplementTemplate) {
    product.supplements.forEach(supplId => {
      const allSupplements = allProductsData.supplements || [];
      const supplInfo = allSupplements.find(item => item.id === supplId);

      if (supplInfo) {
        const clone = supplementTemplate.cloneNode(true);

        const checkbox = clone.querySelector('input[type="checkbox"]');
        const label = clone.querySelector('.supplements__description span:first-child');
        const priceSpan = clone.querySelector('.supplements__price');
        const weightSpan = clone.querySelector('.supplements__weight');
        const img = clone.querySelector('.supplements__img');

        if (checkbox && label && priceSpan && img) {
          checkbox.id = `additive-${supplInfo.id}`;
          checkbox.name = 'additives';
          checkbox.value = supplementsNames[supplInfo.id];
          checkbox.dataset.price = supplInfo.price;

          label.innerHTML = supplInfo.title;
          priceSpan.textContent = `+${supplInfo.price} ₽`;
          img.src = supplInfo.img;
          img.alt = supplInfo.title;

          if (supplInfo.g !== null) {
            weightSpan.textContent = `${supplInfo.g} г`;
          } else {
            weightSpan.remove();
          }

          supplementsList.appendChild(clone);
        }
      }
    });
  } else if (modalInfoBlock.querySelector('.modal__supplements')) {
    const supplementsSection = modalInfoBlock.querySelector('.modal__supplements');
    supplementsSection?.remove();
  }

  const modalMyModal = templateClone.querySelector('.modal__my-modal');

  return modalMyModal;
}

function addModalInteractivity(dialog, product) {
  const form = dialog.querySelector('form[name="product-order-form"]');
  const totalPriceSpan = dialog.querySelector('.modal__total-price');

  if (product.sizes.length > 0) {
    totalPriceSpan.textContent = `${product.sizes[0].price} ₽`;
  }

  const updateTotalPrice = () => {
    const formData = new FormData(form);

    let basePrice = 0;
    const selectedSizeValue = formData.get('size');

    const sizeButton = form.querySelector(`[name="size"][value="${selectedSizeValue}"]`);
    if (sizeButton) {
      basePrice = parseInt(sizeButton.dataset.price || 0);
    }

    const additivesSum = Array.from(formData.getAll('additives')).reduce((sum, additiveValue) => {
      const checkbox = form.querySelector(`input[name="additives"][value="${additiveValue}"]`);
      return sum + parseInt(checkbox?.dataset.price || 0);
    }, 0);

    totalPriceSpan.textContent = `${basePrice + additivesSum} ₽`;
  };

  form.addEventListener('change', updateTotalPrice);
  form.addEventListener('click', updateTotalPrice);

  form.addEventListener('submit', (evt) => {
    evt.preventDefault();

    const finalData = Object.fromEntries(new FormData(form));

    closeDialog();
  });
}

export { modalCard, addModalInteractivity };