new.rybstock.ru/views/pages/cart.php

<section class="cart-page" data-cart-page>
    <div class="cart-hero">
        <p class="eyebrow">Ваш заказ</p>
        <h1>Корзина</h1>
        <p>Проверьте фасовки, выберите способ оплаты и получение. Сайт сразу пересчитает выгоду, доставку и итоговую сумму.</p>
        <div class="cart-weight-notice">
            Весовые позиции пересчитываются при сборке по фактическому весу. Если Вам нужна итоговая сумма до получения товара, отметьте это в форме заказа: после сборки менеджер перезвонит и сообщит сумму.
        </div>
    </div>

    <div class="cart-layout cart-layout-checkout">
        <section class="cart-items-panel">
            <div class="section-heading">
                <div>
                    <p class="eyebrow">Товары</p>
                    <h2>Выбранные позиции</h2>
                </div>
                <a class="subtle-link" href="/catalog">Добавить товары</a>
            </div>

            <p class="cart-empty" data-cart-empty>Корзина пока пустая. Перейдите в каталог и добавьте нужные фасовки.</p>
            <div class="cart-items" data-cart-items></div>

            <section class="cart-checkout-panel">
                <div class="cart-payment-trust">Оплата только при получении</div>
                <div class="section-heading">
                    <div>
                        <p class="eyebrow">Оплата</p>
                        <h2>Выберите способ оплаты</h2>
                    </div>
                </div>
                <div class="cart-payment-options" role="group" aria-label="Способ оплаты">
                    <button type="button" class="price-mode-button price-mode-button-cash" data-payment-mode="cash">
                        <span>Наличными</span>
                        <b>Выгодно от 7000р.</b>
                    </button>
                    <button type="button" class="price-mode-button price-mode-button-qr" data-payment-mode="qr">
                        <span>QR-код</span>
                        <b>Без комиссии даже с кредитки</b>
                    </button>
                    <button type="button" class="price-mode-button" data-payment-mode="invoice">Расчетный счет</button>
                </div>
                <div class="cart-invoice-details" data-invoice-details>
                    <p>Для счета можно указать реквизиты текстом или прикрепить файл. Счет подготовим день в день после подтверждения заказа.</p>
                    <label>
                        <span>Реквизиты организации</span>
                        <textarea name="invoice_requisites" data-order-invoice-requisites rows="4" placeholder="ИНН, название организации, email для счета"></textarea>
                    </label>
                    <label>
                        <span>Файл с реквизитами</span>
                        <input type="file" name="invoice_files[]" data-order-invoice-file accept=".pdf,.doc,.docx,.xls,.xlsx,.jpg,.jpeg,.png" multiple>
                    </label>
                </div>
            </section>

            <section class="cart-checkout-panel">
                <div class="section-heading">
                    <div>
                        <p class="eyebrow">Получение</p>
                        <h2>Доставка или самовывоз</h2>
                    </div>
                </div>

                <div class="cart-delivery-options" role="radiogroup" aria-label="Способ получения">
                    <label>
                        <input type="radio" name="cart_delivery_type" value="pickup" data-cart-delivery-type>
                        <span>Самовывоз</span>
                    </label>
                    <label>
                        <input type="radio" name="cart_delivery_type" value="inside_mkad" data-cart-delivery-type>
                        <span>Доставка внутри МКАД</span>
                    </label>
                    <label>
                        <input type="radio" name="cart_delivery_type" value="outside_mkad" data-cart-delivery-type>
                        <span>Доставка за МКАД</span>
                    </label>
                </div>
                <p class="cart-minimum-warning" data-cart-minimum-warning hidden></p>

                <div class="cart-delivery-fields">
                    <label>
                        <span>Адрес доставки</span>
                        <input type="text" data-cart-address placeholder="Например: Москва, ул. Привольная, 13к1">
                        <small class="cart-address-status" data-cart-address-status hidden></small>
                    </label>
                    <label class="cart-lift-label" data-lift-field hidden>
                        <input type="checkbox" data-cart-lift>
                        <span>Нужен подъем до квартиры/офиса +390 руб.</span>
                    </label>
                </div>
            </section>

            <section class="cart-checkout-panel">
                <div class="section-heading">
                    <div>
                        <p class="eyebrow">Контакты</p>
                        <h2>Куда перезвонить</h2>
                    </div>
                </div>
                <form class="cart-order-form" data-cart-order-form>
                    <div class="cart-form-grid">
                        <label>
                            <span>Имя *</span>
                            <input type="text" name="customer_name" data-order-name required>
                        </label>
                        <label>
                            <span>Телефон *</span>
                            <input type="tel" name="phone" data-order-phone required placeholder="+7">
                        </label>
                        <label>
                            <span>Email (необязательно)</span>
                            <input type="email" name="email" data-order-email placeholder="Если хотите получить копию заказа">
                        </label>
                    </div>
                    <label class="cart-final-sum-label">
                        <input type="checkbox" name="final_sum_needed" data-order-final-sum-needed>
                        <span>Нужна итоговая сумма до получения товара. После сборки менеджер перезвонит и сообщит сумму.</span>
                    </label>
                    <label>
                        <span>Комментарий</span>
                        <textarea name="comment" data-order-comment rows="4" placeholder="Например: буду дома после 19.00 или нужен номер машины для заказа пропуска."></textarea>
                    </label>
                    <button class="primary-button cart-confirm-button" type="submit">Подтвердить заказ</button>
                    <p class="cart-form-note">На сайте Вы оформляете предзаказ. Мы перезвоним Вам и утвердим наличие, оплата производится при получении товара.</p>
                </form>
            </section>
        </section>

        <aside class="cart-summary">
            <p class="eyebrow">Расчет</p>
            <h2>Итого</h2>
            <dl>
                <div>
                    <dt>Базовая сумма товаров</dt>
                    <dd data-cart-base-total>0 руб.</dd>
                </div>
                <div>
                    <dt>Текущий режим</dt>
                    <dd data-cart-current-mode>Наличные</dd>
                </div>
                <div class="cart-summary-saving" data-cart-saving-row hidden>
                    <dt>Ваша выгода</dt>
                    <dd data-cart-saving-total>0 руб.</dd>
                </div>
                <div>
                    <dt>Товары с учетом оплаты</dt>
                    <dd data-cart-current-total>0 руб.</dd>
                </div>
                <div>
                    <dt>Доставка</dt>
                    <dd data-cart-delivery-total>Выберите получение</dd>
                </div>
                <div class="cart-summary-total">
                    <dt>К оплате при получении</dt>
                    <dd data-cart-grand-total>0 руб.</dd>
                </div>
            </dl>
            <p data-cart-delivery-note>Выберите способ получения, чтобы увидеть расчет доставки.</p>
            <div class="cart-order-success" data-cart-order-success hidden></div>
        </aside>
    </div>
</section>