cosmopet-architecture/wp-content/themes/cosmopet/woocommerce/archive-product/archive-product-modal.twig

{# <div class="modal">
    <aside class="modal__aside">
        <div class="modal__item modal__filter">
            <button class="modal__close">
                <img src="assets/img/svg/main/black-x.svg" alt="">
            </button>

            <div class="modal__header">
                <p class="modal__title">Фильтры</p>
                {{sidebar_filters}}
            </div>
        </div>

        <div class="modal__item modal__basket">
            <button class="modal__close">
                <img src="assets/img/svg/main/black-x.svg" alt="">
            </button>
            <div class="modal__header">
                <p class="modal__title">Корзина</p>
                <div class="modal__content">
                    <div class="modal-basket__item modal-basket__item--return">
                        <p class="modal-basket-item__title">
                            Удаление товра из корзины: 5с
                        </p>

                        <button class="modal-basket-item__return">
                            Восстановить
                        </button>
                    </div>
                    <div class="modal-basket__item">
                        <div class="modal-basket-item__block-image">
                            <img src="assets/img/product/image.png" alt="" class="modal-basket-item__image">
                        </div>
                        
                        <div class="modal-basket-item__content">
                            <p class="modal-basket-item__title">Сухой корм, для крупны и средних пород</p>
                            <p class="modal-basket-item__sub-title">Индейка, 2 кг</p>
                            <div class="modal-basket-item__control">
                                <div class="counter counter--small">
                                    <button class="counter__button minus">
                                        <img src="assets/img/svg/main/minus.svg" alt="">
                                    </button>
                                    <input type="text" class="counter__input" value="1">
                                    <button class="counter__button plus">
                                        <img src="assets/img/svg/main/plus.svg" alt="">
                                    </button>
                                </div>

                                <p class="modal-basket-item__price">1280</p>
                            </div>
                        </div>
                    </div>
                    <div class="modal-basket__item">
                        <div class="modal-basket-item__block-image">
                            <img src="assets/img/product/image.png" alt="" class="modal-basket-item__image">
                        </div>
                        
                        <div class="modal-basket-item__content">
                            <p class="modal-basket-item__title">Сухой корм, для крупны и средних пород</p>
                            <p class="modal-basket-item__sub-title">Индейка, 2 кг</p>
                            <div class="modal-basket-item__control">
                                <div class="counter counter--small">
                                    <button class="counter__button minus">
                                        <img src="assets/img/svg/main/minus.svg" alt="">
                                    </button>
                                    <input type="text" class="counter__input" value="1">
                                    <button class="counter__button plus">
                                        <img src="assets/img/svg/main/plus.svg" alt="">
                                    </button>
                                </div>

                                <p class="modal-basket-item__price">1280</p>
                            </div>
                        </div>
                    </div>
                    <div class="modal-basket__item">
                        <div class="modal-basket-item__block-image">
                            <img src="assets/img/product/image.png" alt="" class="modal-basket-item__image">
                        </div>
                        
                        <div class="modal-basket-item__content">
                            <p class="modal-basket-item__title">Сухой корм, для крупны и средних пород</p>
                            <p class="modal-basket-item__sub-title">Индейка, 2 кг</p>
                            <div class="modal-basket-item__control">
                                <div class="counter counter--small">
                                    <button class="counter__button minus">
                                        <img src="assets/img/svg/main/minus.svg" alt="">
                                    </button>
                                    <input type="text" class="counter__input" value="1">
                                    <button class="counter__button plus">
                                        <img src="assets/img/svg/main/plus.svg" alt="">
                                    </button>
                                </div>

                                <p class="modal-basket-item__price">1280</p>
                            </div>
                        </div>
                    </div>
                    <div class="modal-basket__item">
                        <div class="modal-basket-item__block-image">
                            <img src="assets/img/product/image.png" alt="" class="modal-basket-item__image">
                        </div>
                        
                        <div class="modal-basket-item__content">
                            <p class="modal-basket-item__title">Сухой корм, для крупны и средних пород</p>
                            <p class="modal-basket-item__sub-title">Индейка, 2 кг</p>
                            <div class="modal-basket-item__control">
                                <div class="counter counter--small">
                                    <button class="counter__button minus">
                                        <img src="assets/img/svg/main/minus.svg" alt="">
                                    </button>
                                    <input type="text" class="counter__input" value="1">
                                    <button class="counter__button plus">
                                        <img src="assets/img/svg/main/plus.svg" alt="">
                                    </button>
                                </div>

                                <p class="modal-basket-item__price">1280</p>
                            </div>
                        </div>
                    </div>
                    <div class="modal-basket__item">
                        <div class="modal-basket-item__block-image">
                            <img src="assets/img/product/image.png" alt="" class="modal-basket-item__image">
                        </div>
                        
                        <div class="modal-basket-item__content">
                            <p class="modal-basket-item__title">Сухой корм, для крупны и средних пород</p>
                            <p class="modal-basket-item__sub-title">Индейка, 2 кг</p>
                            <div class="modal-basket-item__control">
                                <div class="counter counter--small">
                                    <button class="counter__button minus">
                                        <img src="assets/img/svg/main/minus.svg" alt="">
                                    </button>
                                    <input type="text" class="counter__input" value="1">
                                    <button class="counter__button plus">
                                        <img src="assets/img/svg/main/plus.svg" alt="">
                                    </button>
                                </div>

                                <p class="modal-basket-item__price">1280</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal__footer">
                <div class="modal__block-price">
                    <p class="modal-block-price__title">Общая стоимость</p>
                    <p class="modal-block-price__price">
                        8960
                    </p>
                </div>
                <div class="modal__block-button">
                    <div class="modal__button">
                        <button class="button button--gradient button--high button--100-perc">
                            Перейти к оформлению
                        </button>
                    </div>
                    <div class="modal__button">
                        <button class="to-know button--100-perc to-know--background-none">
                            <p>Продолжить покупку</p>
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <div class="modal__item modal__to-know modal__item--no-title">
            <button class="modal__close">
                <img src="assets/img/svg/main/black-x.svg" alt="">
            </button>
            <div class="modal__header">
                <p class="modal__small-title">Узнать о поступлении</p>
                <p class="modal__text">
                    Оставьте свой e-mail, и мы оповестим вас, когда продукт появится
                </p>

                <form action="" class="modal__form-sub">
                    <div class="label">
                        <label for="mail" class="label__title">
                            mail 
                        </label>

                        <div class="label__question">
                            text <br>
                            re
                        </div>
                    </div>
                    <input type="text" class="form__input" id="mail" placeholder="Email">
                    <div class="checkbox checkbox--small">
                        <div class="checkbox__state"></div>
                        <input type="checkbox" name="" id="" class="checkbox__input">
                        <label for="" class="checkbox__label">
                            Я ознакомился с <a href="#">политикой обработки персональных данных</a> и <a href="#">пользовательским соглашением</a>
                        </label>
                    </div>

                    <input type="submit" value="Оставить почту" class="button button--white button--red-48-px button--100-perc active modal-form-sub__submit">
                </form>
            </div>
            
        </div>

        <div class="modal__item modal__to-know-submit modal__item--no-title">
            <button class="modal__close">
                <img src="assets/img/svg/main/black-x.svg" alt="">
            </button>
            <div class="modal__header">
                <p class="modal__small-title">Подписка на товар оформлена</p>
                <p class="modal__text">
                    На ваш e-mail ivan.ivanov@gmail.com придет письмо, как только продукт появится в наличии.
                </p>
                <button class="button button--white button--red-48-px button--100-perc active modal-form-sub__submit">
                    Продолжить покупки
                </button>
            </div>
            
        </div>
    </aside>
</div> #}