Понимаем что такое WooCommerce Fragments?

WooCommerce, популярный плагин для электронной коммерции для WordPress, предлагает функцию, известную как «фрагменты». Эти фрагменты позволяют обновлять определенные части веб-страницы без необходимости перезагрузки всей страницы.

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

Однако распространенной проблемой, с которой сталкиваются разработчики и владельцы веб-сайтов, является то, что эти фрагменты не всегда обновляются в реальном времени, особенно когда изменения вносятся с административного интерфейса. Давайте углубимся в эту проблему и рассмотрим решение, основанное на посте Stack Overflow.

Что такое фрагменты WooCommerce?

Фрагменты WooCommerce являются частью AJAX-слоя в WooCommerce. Проще говоря, AJAX позволяет обновлять веб-страницы асинхронно, обмениваясь данными с веб-сервером за кулисами. Это означает, что можно обновлять части веб-страницы без перезагрузки всей страницы.

Фрагменты в WooCommerce — это части контента, которые можно обновлять независимо от остальной страницы. Они играют важную роль в улучшении пользовательского опыта, особенно в условиях электронной коммерции, где жизненно важны обновления в реальном времени (например, содержимое корзины или цены).

Что такое фрагменты корзины WooCommerce?

Фрагменты корзины WooCommerce — это важная функция на основе AJAX, предназначенная для улучшения процесса покупок за счет динамического обновления элементов, связанных с корзиной, на веб-странице без необходимости полной перезагрузки страницы. Эта функциональность позволяет пользователям получать немедленную визуальную обратную связь при добавлении или удалении товаров из корзины, улучшая взаимодействие с пользователем и потенциально повышая коэффициент конверсии. Процесс включает в себя отправку AJAX-запроса на сервер после действия пользователя, на который сервер отвечает обновленными HTML-фрагментами — такими как итоги корзины и количество товаров — которые бесшовно интегрируются в текущую страницу. Несмотря на то, что это полезно для пользовательского опыта, фрагменты корзины могут иногда влиять на производительность сайта, что побуждает разработчиков применять стратегии оптимизации или выборочно отключать функцию на страницах, где обновления корзины в реальном времени не критичны. Также существуют варианты настройки, позволяющие разработчикам расширять или изменять фрагменты корзины в соответствии с конкретными потребностями, предлагая баланс между обновлениями динамического контента и эффективностью сайта.

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

Как используются фрагменты WooCommerce?

1. Обновления корзины: Один из наиболее распространенных способов использования фрагментов в WooCommerce — это обновление содержимого корзины и итогов без перезагрузки страницы. Когда пользователь добавляет или удаляет товар из корзины, обновляется только фрагмент корзины, обеспечивая бесшовный процесс покупок.
2. Уведомления: Фрагменты можно использовать для отображения уведомлений в реальном времени для пользователей. Например, когда пользователь добавляет товар в свой список желаемого или сравнивает товары, может всплывать уведомление без перезагрузки страницы.
3. Динамическое ценообразование: Если у вас настроено динамическое ценообразование, где цены меняются в зависимости от определенных условий (например, роли пользователя или количества), фрагменты можно использовать для мгновенного отображения обновленной цены.
4. Контент, специфичный для пользователя: Фрагменты можно использовать для отображения контента, специфичного для пользователя, такого как баллы лояльности, персонализированные рекомендации или специальные предложения для пользователя, без необходимости перезагрузки всей страницы.

Проблема

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

Вот упрощенная версия кода, который они использовали:

function create_points_widget_content() {
    $usersPoints = esc_attr( get_user_meta( get_current_user_id(), USERS_POINTS, true ));
    if (!isset($userPoints) || $userPoints == "") $userPoints = 0;
    $usedPoints = get_current_points_in_cart('', 0);
    ?>
    <div class="points-widget-v2">
        <div><?php echo __("Ваши баллы", "plugin-domain"); ?>:<span class="users-points"><?php echo $usersPoints; ?></span></div>
        <div><?php echo __("Фактически использовано", "plugin-domain"); ?>:<span class="used-points"><?php echo $usedPoints; ?></span></div>
    </div>
    <?php
}

Тогда возникает вопрос: Как мы можем заставить эти фрагменты обновляться?

Решение

Один из ответов предоставил простое и эффективное решение с использованием JavaScript:

function refresh_fragments() {
    console.log('фрагменты обновлены!');
    $( document.body ).trigger( 'wc_fragment_refresh' );
}
refresh_fragments();
setInterval(refresh_fragments, 60000);

Этот код вызывает основной обработчик в WooCommerce для обновления фрагментов через AJAX. Функция setInterval гарантирует, что фрагменты обновляются каждые 60 секунд.

wc_fragment_refresh

wc_fragment_refresh — это событие JavaScript, связанное с WooCommerce. Оно играет критическую роль в том, как WooCommerce динамически обновляет части страницы без необходимости полной перезагрузки страницы. В частности, оно отвечает за обновление фрагментов страницы, которые отображают информацию, такую как содержимое корзины, цены и итоги. Используя это событие, WooCommerce гарантирует, что эти фрагменты отражают текущее состояние корзины пользователя, даже после добавления или удаления товаров, без необходимости обновлять всю страницу.

Что делает wc_fragment_refresh

Основная функция события wc_fragment_refresh заключается в обновлении частей страницы, которые отображают динамическую информацию, связанную с корзиной WooCommerce. Например, когда пользователь добавляет товар в корзину, WooCommerce использует AJAX (асинхронный JavaScript и XML) для отправки запроса на сервер. Сервер отвечает обновленными данными корзины, и событие wc_fragment_refresh обновляет определенные разделы страницы (например, значок корзины и итоги оформления заказа), чтобы отразить эти изменения.

Как это работает

• AJAX-запрос: Событие инициирует AJAX-запрос на сервер, запрашивая обновленные фрагменты на основе текущего состояния корзины.
• Ответ сервера: WooCommerce на стороне сервера обрабатывает запрос, генерирует обновленный HTML для необходимых фрагментов и отправляет эти данные обратно в браузер.
• Обновление DOM: После получения браузером обновленных фрагментов событие wc_fragment_refresh обновляет объектную модель документа (DOM) новым HTML, тем самым обновляя контент, отображаемый пользователю.

Как использовать wc_fragment_refresh

Хотя wc_fragment_refresh автоматически обрабатывается WooCommerce для своих стандартных операций, разработчики могут захотеть вызвать или подключиться к этому событию для пользовательской функциональности.

Вызов обновления фрагментов

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

jQuery(document.body).trigger('wc_fragment_refresh');

Подключение к событию

Если вы хотите выполнить пользовательский код до или после обновления фрагментов (например, чтобы показать анимацию загрузки или записать, когда фрагменты обновлены), вы можете подключиться к событию, используя метод jQuery .on():

jQuery(document.body).on('wc_fragment_refresh', function(){
    // Пользовательский код для выполнения до обновления фрагментов
});

jQuery(document.body).on('updated_wc_div', function(){
    // Пользовательский код для выполнения после обновления фрагментов
});

Событие updated_wc_div вызывается после успешного обновления фрагментов, что делает его хорошим местом для добавления любых последующих действий.

wc-cart-fragments

Для настройки или оптимизации использования фрагментов корзины разработчики могут подключаться к системе WooCommerce для изменения того, какие элементы обновляются, или потенциально отключать функцию на определенных страницах для улучшения производительности. Хотя фрагменты корзины значительно способствуют бесшовному процессу покупок, они могут иногда влиять на скорость работы сайта, особенно на сайтах с высоким трафиком или страницах, где данные корзины в реальном времени не критичны. Разработчики могут выбрать выборочное отключение фрагментов корзины на определенных страницах для повышения производительности, используя хуки WordPress для отмены регистрации скрипта wc-cart-fragments, где это считается ненужным. В целом, понимание и управление фрагментами корзины имеет решающее значение для поддержания эффективного и удобного магазина WooCommerce.

Основные выводы

1. Фрагменты WooCommerce: Это части веб-страницы, которые можно обновлять без перезагрузки всей страницы. Они полезны для отображения динамического контента.
2. Ограничение административного интерфейса: Изменения, внесенные с административного интерфейса, могут не сразу отразиться на фронтенде из-за кэширования фрагментов.
3. Решение с JavaScript: С помощью JavaScript можно заставить фрагменты обновляться через регулярные интервалы, обеспечивая актуальность отображаемого контента.

Для владельцев бизнеса или начинающих разработчиков важно понимать, что хотя WooCommerce предлагает мощные функции, могут возникать случайные проблемы. Однако, обладая правильными знаниями и ресурсами, эти проблемы легко преодолеваются.