Кошик (WooCommerce)

Сторінка кошика – це спеціальна сторінка WooCommerce, яка створюється за замовчуванням під час установки WooCommerce. Вона містить шорткод WooCommerce [woocommerce_cart], який відображає вміст кошика.

Видаліть блок кошика Gutenberg, якщо він знаходиться на вашій сторінці кошика. Натомість, замініть його на [woocommerce_cart] або скористайтеся елементом Shortcode, якщо ви редагували сторінку кошика за допомогою Esl.

Щоб налаштувати досвід роботи з кошиком за допомогою Esl, вам не потрібно змінювати шорткод або вміст сторінки кошика. Натомість, Esl пропонує два різні типи шаблонів (в цьому контексті це як частини шаблону) для налаштування кошика:

• WooCommerce – Кошик: Відображається, коли кошик містить продукти.
• WooCommerce – Порожній Кошик: Відображається, коли кошик порожній.

Типи шаблонів “Кошик” і “Порожній кошик” видимі лише якщо у вас встановлений і активований плагін WooCommerce. Ці шаблони використовуються в логіці шорткоду WooCommerce Cart і не підтримують умови шаблону (вони загально відображаються на правильній сторінці).

За замовчуванням кошик у темі Esl буде показаний, як на зображенні нижче. Ви помітите, що зазвичай є дві різні зони: таблиця предметів кошика та підсумки кошика:

Якщо ви хочете налаштувати цей екран, вам потрібно створити тип шаблону WooCommerce – Кошик.

Будь ласка, не забудьте додати хуки шаблону, якщо ви використовуєте сторонні плагіни.

Тип шаблону: WooCommerce – Кошик

Ви повинні встановити тип шаблону WooCommerce – Кошик для налаштування сторінки кошика (використовується, коли кошик містить продукти).

Відкривши цей шаблон за допомогою Esl, ви побачите три нові елементи (специфічні для цього типу шаблону):

Складники кошика

Відображає таблицю вмісту кошика. З цим елементом ви зможете приховати різні частини таблиці, стилізувати елементи таблиці та кнопки, а також приховати поле для купона (щоб ви могли налаштувати його окремо за допомогою елемента Купон на кошик). Для налаштування макета перевірте розділ нижче Цикл вмісту кошика.

Підсумки кошика

Відображає зону підсумків кошика. З цим елементом ви можете приховати додаткові товари в кошику, стилізувати таблицю підсумків і оформити кнопку.

Купон на знижку для кошика

Відображає поле для введення купона. Використовуйте цей елемент, якщо не хочете, щоб поле для купона було прив’язаним до таблиці товарів у кошику. З цим елементом ви можете стилізувати поле введення та кнопку застосування купона.

Тип шаблону: WooCommerce – Порожній кошик

Ви повинні встановити тип шаблону WooCommerce – Порожній кошик, щоб налаштувати, як відображається сторінка кошика, коли кошик порожній.

За замовчуванням порожній кошик показує повідомлення та кнопку повернення на сторінку магазину.

Щоб налаштувати цей екран, вам потрібно створити тип шаблону WooCommerce – Порожній кошик, де ви можете розмістити необхідні елементи та налаштувати їх за потреби.

Цикл вмісту кошика

Esl 1.4. вводить новий тип циклу запитів, Вміст кошика. Цей запит перебирає всі товари в кошику, що дозволяє використовувати теги динамічних даних для отримання назви продукту (заголовок поста), зображення продукту (зображення обкладинки) та товарних тегів, таких як ціна, опис, артикул тощо.

Це дозволить вам створити власний віджет товарів у кошику і розмістити його в будь-якому місці на вашому сайті.

Створіть власний елемент товарів у кошику на сторінці кошика

За замовчуванням список товарів у кошику відображається у таблиці. Це відбувається в стандартному шаблоні кошика WooCommerce або під час використання елемента товарів Esl.

Щоб створити інший макет для списку товарів у кошику, вам потрібно додати контейнер з циклом запитів і встановити його на Вміст кошика. Всередині цього контейнера ви можете використовувати такі нові теги динамічних даних (з Esl 1.5.3):

Щоб ваш власний цикл кошика працював, ви повинні додати woocommerce-cart-form__cart-item cart_item CSS клас на сам цикл і додати woocommerce-cart-form__contents CSS клас на батьківський елемент циклу.

• {woo_cart_product_name} – Відображає назву продукту з посиланням. Він призначений для використання всередині циклу вмісту кошика.
• {woo_cart_remove_link} – Відображає тег посилання з посиланням для видалення продукту з кошика. За замовчуванням використовує “x” у вмісті якоря. Не забудьте додати product-remove клас CSS на елемент, що містить цей динамічний тег.
• {woo_product_price} – Цей тег показує ціну продукту. Але коли використовується всередині циклу вмісту кошика, він не відображає ціну зі знижкою.
• {woo_cart_quantity} – Відображає поле введення для додавання/видалення кількості продукту всередині кошика.
• {woo_cart_subtotal} – Відображає проміжну ціну продукту (ціна x кількість)

Щоб завершити цей компонент, вам потрібно обернути цикл продуктів всередині тегу форми, щоб використовувати поля введення кількості продукту. Для цього оберніть контейнер циклу всередині іншого контейнера (або div, або блоку) і встановіть HTML тег на “custom”, а потім вставте “form” у поле введення Custom tag.

Цей контейнер форми, щоб працювати належним чином зі скриптами WooCommerce, потребує наступних конфігурацій:

• Додайте клас кастомізації woocommerce-cart-form (Стиль > CSS > CSS класи)
• Додайте кастомні атрибути: method = post та action = {post_url}

Щоб додати кнопку оновлення кошика, є також ще один динамічний тег даних {woo_cart_update}, який вам потрібно додати всередині контейнера форми (але зовні циклу). Це створить кнопку з правильними налаштуваннями для оновлення кошика.