Текущее состояние и задача
На сайте уже есть множество товаров, но при клике на них ничего не происходит. Задача – при клике на товар отображать модальное окно со всей информацией о нём.
Создание компонента ShowFullItem
Создадим компонент ShowFullItem. Его содержимое пока пустое. Используем сниппет для создания класса.
Управление видимостью модального окна
В основном компоненте создадим состояние showFullItem со значением false (модальное окно скрыто по умолчанию). Добавим условную отрисовку компонента ShowFullItem в зависимости от значения showFullItem.
Метод onShowItem
Создадим метод onShowItem, инвертирующий значение showFullItem с помощью унарного оператора !. Этот метод будет управлять видимостью модального окна.
Передача метода в компоненты
Передадим метод onShowItem как свойство onShowItem в компонент Items, а затем из Items – в компонент Item.
Обработка клика на картинке
В компоненте Item добавим обработчик события onClick для каждой картинки, вызывающий переданный метод onShowItem. Добавим для изображений курсор pointer.
Отображение информации о товаре
Создадим в основном компоненте состояние fullItem (пустой объект). Метод onShowItem будет принимать параметр – элемент товара. Этот элемент сохраним в fullItem. В ShowFullItem передадим fullItem как свойство для отображения информации. В Items передадим в Item текущий элемент.
Доработка компонента ShowFullItem
В ShowFullItem добавим div с классом full-item для вывода информации о товаре. Передадим в ShowFullItem методы onAdd и onShowItem. Клик на картинку будет скрывать модальное окно, клик на «плюс» – добавлять товар в корзину.
Добавление стилей
Скопируем стили из main для full-item.
Создание модального окна
Добавим div для модального окна: внешний div будет фоном, внутренний – контейнером для информации. Добавим стили: position: fixed;, width: 100%;, height: 100%;, background-color: rgba(0, 0, 0, 0.8);, большой z-index. Вложенному div зададим ширину (например, 600px), отступы, background-color: white;, скругление углов.
Функционал отображения товаров в модальном окне реализован. Можно добавить кнопку «Закрыть» и доработать стили.