Фрагменты корзины

Фрагменты корзины — это элементы сайта, которые обновляются автоматически при добавлении или удалении товара из корзины через AJAX.

В этом уроке расскажу, как отключить функционал фрагментов корзины, а также как зарегистрировать свои собственные фрагменты.

Хочу порекомендовать вам два видеоурока по корзине WooCommerce – раз и два, которые являются частью моего курса по созданию темы для интернет-магазина на основе вёрстки.

Полностью отключаем фрагментацию корзины

Дело в том, что есть влияние фрагментов корзины на производительность:

  • во-первых, они у вас не кэшируются,
  • во-вторых, вы сможете их заметить в различных инструментах по тестированию производительности сайта с добавленным параметром к URL ?wc-ajax=get_refreshed_fragments.
Производительность фрагмента корзины при проверке инструментом pingdom
Тестил на tools.pingdom.com

Ну что же, если вы готовы пожертвовать функционалом ради производительности, то давайте отключать фрагментацию корзины.

Способ 1. При помощи плагина

Обычно я вообще не сторонник использования плагинов, когда что-то можно сделать при помощи пары строчек кода, но тем не менее, если вы ну совсем не захотите заморачиваться с кодом, то можете попробовать использовать бесплатный плагин Disable Cart Fragments.

Кстати говоря, он не отключает фрагменты корзины, он всего лишь подгружает скрипт обновления асинхронно и только после того, как корзина будет обновлена.

Способ 2. При помощи сниппета

После вставки этого кода фрагменты корзины будут отключены и исчезнут из инструментов тестирования производительности:

add_action( 'wp_enqueue_scripts', 'truemisha_turnoff_woocommerce_cart_fragments', 25);
 
function truemisha_turnoff_woocommerce_cart_fragments() {
 
	wp_dequeue_script('wc-cart-fragments');
 
}

Если не знаете, куда вставлять код, то рекомендую это руководство.

Теперь например, если вы перейдёте на страницу корзины в WooCommerce и будете изменять количество товаров в ней или же удалять оттуда товары, то замените, что ваш виджет мини-корзины останется статичным.

Добавление фрагментов корзины

Теперь же наоборот – попробуем зарегистрировать свой собственный динамичный фрагмент корзины.

Шаг 1. HTML фрагмента внутри шаблона темы

Другими словами – давайте вообще определимся, что мы хотим отображать на сайте при помощи фрагмента. Например можем слишком много всего не придумывать и вывести ссылку с текстом «Товаров в корзине: 5 (100р)», код ниже вставляем именно в то место, где хотим это вывести в шаблоне:

echo '<a class="truemisha-cart-frag-1" href="' . wc_get_cart_url() . '">Товаров в корзине: ' . WC()->cart->get_cart_contents_count() . ' (' . WC()->cart->get_cart_total() . ')</a>';

В этом коде:

  • Функция wc_get_cart_url() возвращает динамически URL страницы корзины.
  • WC()->cart->get_cart_contents_count() возвращает общее количество всех товаров в корзине.
  • WC()->cart->get_cart_total() – общую стоимость товаров.

Шаг 2. Регистрируем фрагмент

Теперь поработаем с хуком woocommerce_add_to_cart_fragments:

add_filter( 'woocommerce_add_to_cart_fragments', 'truemisha_cart_fragment', 25 );
 
function truemisha_cart_fragment( $fragments ) {
 
	global $woocommerce;
 
	$fragments[ 'a.truemisha-cart-frag-1' ] = '<a class="truemisha-cart-frag-1" href="' . wc_get_cart_url() . '">Товаров в корзине: ' . $woocommerce->cart->get_cart_contents_count() . ' (' . $woocommerce->cart->get_cart_total() . ')</a>';
	return $fragments;
 
}
  • Если не знаете, куда вставлять этот код, читайте этот гайд.
  • Ключ элемента массива $fragments по сути является CSS-селектором изменяемого HTML-элемента.

Миша

Впервые познакомился с WordPress в 2009 году. Организатор и спикер на конференциях WordCamp. Преподаватель в школе Нетология.

Если вам нужна помощь с сайтом или разработка с нуля на WordPress / WooCommerce — пишите. Я и моя команда будем рады вам помочь!

Оставить комментарий

Если вы хотите добавить код, не забудьте обернуть его в <pre lang="php"></pre>, если же код – меньше одной строчки, то можно и в <code></code>.