Корзина, количество и итог

Оглавление серии

Корзина хранит намерение купить выбранные позиции до окончательного заказа. Здесь покупатель проверяет состав, количество и сумму, удаляет лишний товар и переходит к оформлению. В «Полке» используем native Cart Block и известную пару GRID-PDF за 12 и FORM-ZIP за 8. Благодаря маленькому ассортименту каждый итог можно сопоставить с исходными значениями.

После урока читатель будет различать filled cart, empty cart и Mini Cart. Они относятся к одному состоянию сессии, но показывают его в разных местах. Cart UI в подготовке серии не запускался; числовые примеры и описания интерфейса являются ожидаемыми, а не полученными результатами.

Назначенная страница и block template

В WooCommerce Settings → Advanced проверьте, какая page назначена корзиной, а какая checkout. Откройте Cart page в Editor и List View. В выбранном пути она должна содержать WooCommerce Cart Block. Не вставляйте дополнительно [woocommerce_cart] в ту же страницу по старому примеру: два механизма не должны одновременно представлять одну корзину.

В block theme Cart имеет свой template и вложенные состояния. Filled Cart показывает line items и totals, Empty Cart — сообщение и возможный возврат к каталогу. Некоторые внутренние blocks locked, поскольку выполняют связанное динамическое поведение. Не пытайтесь разблокировать и удалить расчётную часть только ради меньшей страницы.

Официальное устройство описано в Cart Block. Часть рекомендаций интерфейса меняется между выпусками; ориентируйтесь на функции blocks и List View, а не на положение пикселей из старого screenshot. В курсе нет снимка выполненного магазина.

Одна сессия, несколько представлений

Добавьте GRID-PDF с карточки и откройте Cart. Затем добавьте FORM-ZIP. Ожидаемый subtotal равен 20.00 в нашей модели без taxes, shipping и coupon. Если открыт другой browser profile или private window, там может быть другая cart session. Это нормальная граница, а не исчезновение Products из базы.

Mini Cart в header показывает короткий состав и переход к корзине. Он не заменяет полную страницу, где удобно сравнить line items и итог. Если Mini Cart обновился, а Cart page показывает устаревшие значения, нужно проверить сессию, cache и совместимость blocks. Ручное изменение текста счётчика в header не исправит underlying cart state.

В учебных позициях включён Sold individually. Поэтому одинаковый GRID-PDF нельзя использовать для демонстрации пяти копий файла без изменения правила товара. Количество — характеристика line item, но её допустимость определяется Product. Сначала объясняют смысл правила предложения, затем выбирают подходящий интерфейс количества.

Для варианта HTML-EXT корзина должна показывать выбранный комплект Extended, а не только общий parent title. Цена 24.00 относится к variation. Если покупатель не видит выбора, проверить заказ сложнее: он может думать, что добавлен Basic. Не убирайте attribute label из cart ради компактности, если она различает содержание покупки.

Проверяемая арифметика

Файл fixtures/cart-cases.csv содержит сценарии с ожидаемыми суммами. LAB10 появится в двенадцатом уроке; сейчас строка discount служит будущим контрактом, а не утверждением, что купон уже существует.

case,items,subtotal,coupon,total
one,GRID-PDF x1,12.00,none,12.00
pair,GRID-PDF x1 + FORM-ZIP x1,20.00,none,20.00
discount,GRID-PDF x1 + FORM-ZIP x1,20.00,LAB10,18.00
variant,HTML-EXT x1,24.00,none,24.00

Subtotal — сумма позиций до соответствующих скидок и дополнительных начислений. Total — итог по действующим правилам. В нашем простом случае без скидки они равны. Позже LAB10 уменьшит 20.00 до 18.00. Если в реальном магазинном расчёте есть налог или доставка, такая таблица потребовала бы дополнительных исходных условий.

Не используйте числа из DOM для независимого «правильного» расчёта checkout. WooCommerce должен управлять корзиной и отдавать актуальные totals. Если клиентский скрипт просто прибавит 12 к видимой строке, он не учтёт coupon, currency format и серверные ограничения. Фронтенд отображает авторитетное состояние, а не становится второй несогласованной системой цен.

Удалите FORM-ZIP и ожидайте возвращение total к 12.00. Удалите GRID-PDF — должна появиться Empty Cart. Такие переходы показывают, что состояние состоит из данных сессии, а не из однажды построенной HTML-таблицы. Если пустая страница продолжает показывать 20.00, это симптом presentation/cache проблемы, который нельзя исправлять переимпортом каталога.

Пустое состояние ведёт к следующему действию

Empty Cart должен объяснять, что пока ничего не выбрано, и предоставлять понятную ссылку на каталог. Сообщение «Ошибка» создаст ложное впечатление поломки. Отсутствие line items является нормальным состоянием, с которого начинается покупка. В Editor настройте текст для учебной «Полки» и сохраните выбранную версию шаблона.

Рекомендации cross-sell необязательны для лаборатории. Если добавите их, связывайте предложение с содержимым cart, а не с произвольным товаром. Например, FORM-ZIP может быть тематически связан с HTML-BASIC. Однако изменение списка рекомендаций не должно автоматически добавлять позицию или скрывать уже выбранный item. Покупатель принимает решение отдельно.

Store Notices нужны для сообщений добавления и ошибок. Сделайте их видимыми и понятными при работе клавиатурой. Удалённый notice может скрыть причину, почему sold individually не позволил добавить вторую копию. Наличие сообщения связывает результат операции с действием пользователя и уменьшает догадки.

Проверьте переход к назначенному Checkout, сохраняя обе позиции. Сам переход пока не подтверждает payment и не создаёт завершённую покупку. В актуальных Blocks могут появляться временные draft order records во время оформления, поэтому нельзя считать каждую техническую запись фактом продажи. Это различие раскроем в заказах и reports.

Состав корзины должен объяснять сумму без обращения к памяти. Если вместо Basic за 15.00 выбран Extended за 24.00, рядом с названием практикума должна сохраняться соответствующая метка варианта. Вместе с GRID-PDF за 12.00 ожидается сумма 36.00 до скидок в нашей учебной арифметике. При удалении конспекта останется 24.00. Такие переходы показывают, что корзина хранит конкретные выбранные позиции. Одна общая строка «Практикум HTML» без варианта затрудняет сверку и делает последующее оформление менее понятным.

Для самостоятельного опыта начните с empty cart в одном browser profile, выполните сценарий pair, удалите одну позицию и верните её. Сравните состав, выбор variation и total после каждого действия. Все наблюдения выполняются в будущей локальной установке. Результат урока — корзина с объяснимой суммой и нормальными состояниями; следующий шаг соберёт минимально необходимые сведения для учебного цифрового заказа.