Как создать корзину с выводом количества товаров в WooCommerce

Давайте предположим что вам нужно вывести количество товаров рядом с каким то элементом.

У меня это просто текст в шапке сайта ВордПресс.

Я использую блочные темы, а значит не могу вставлять PHP код который выводит данные из WooCommerce.

Если вам нужно вставить код PHP в HTML, но вы не можете напрямую редактировать файлы темы, вы можете создать шорткод в WordPress, который вы потом вставите в любое место на сайте, поддерживающее короткие коды. Вот как можно это сделать:

Шаг 1: Создание шорткода

Добавьте следующий код в ваш файл functions.php вашей темы или в плагин для функций:

// Регистрация шорткода для отображения количества товаров в корзине
function cart_count_shortcode() {
    // Получаем объект WooCommerce
    global $woocommerce;

    // Подготовка HTML-разметки
    ob_start();
    ?>
    <div id="gspb_text-id-gsbp-73182b0" class="gspb_text gspb_text-id-gsbp-73182b0">
        Корзина
        <span id="cart-count" class="cart-count">(<?php echo sprintf($woocommerce->cart->cart_contents_count); ?>)</span>
    </div>
    <?php
    return ob_get_clean();
}

// Регистрация шорткода [cart_count]
add_shortcode('cart_count', 'cart_count_shortcode');

Этот код создаёт шорткод [cart_count], который выводит количество товаров в корзине.

Шаг 2: Обновление количества товаров в корзине через AJAX

Добавьте следующий код в тот же файл functions.php:

// Обновление количества товаров в корзине через AJAX
function update_cart_count_fragment( $fragments ) {
    global $woocommerce;
    ob_start();
    ?>
    <span id="cart-count" class="cart-count">(<?php echo sprintf($woocommerce->cart->cart_contents_count); ?>)</span>
    <?php
    $fragments['#cart-count'] = ob_get_clean();
    return $fragments;
}
add_filter('woocommerce_add_to_cart_fragments', 'update_cart_count_fragment');

Этот код позволяет обновлять количество товаров в корзине без перезагрузки страницы.

Шаг 3: Вставка шорткода на сайте

Теперь вы можете вставить шорткод [cart_count] в любое место на сайте, где поддерживаются короткие коды. Например:

  • В редакторе страниц или постов: просто добавьте [cart_count] в нужное место.
  • В виджете текста: вставьте [cart_count] в текстовый виджет.

Итог

Ваш шорткод будет выводить элемент <div> с актуальным количеством товаров в корзине. После добавления шорткода на сайт, элемент будет автоматически обновляться при изменении корзины, благодаря AJAX-функционалу.

Полезные советы:

  1. CSS и JavaScript: Убедитесь, что вы добавили соответствующий CSS для стилизации кнопки и счетчика, а также JavaScript, если нужно, для дополнительных эффектов или логики.
  2. Проверка кэша: Если у вас настроен кэширование, убедитесь, что кэш правильно обновляется и не влияет на отображение количества товаров в корзине.
  3. Тестирование: Тестируйте изменения на сайте, чтобы убедиться, что всё работает корректно как на десктопе, так и на мобильных устройствах.
  4. Хотите больше узнать о Фрилансе?
  6. Переходите в Телеграм канал Фрила https://t.me/+fyh2tzDwkYs0ZWJi