Обновить счетчик списка желаний без перезагрузки

Вопрос или проблема

if ( defined( 'YITH_WCWL' ) && ! function_exists( 'yith_wcwl_get_items_count' ) ) {
  function yith_wcwl_get_items_count() {
    ob_start();
    ?>
       <div class="header-wishlist">
        <a href="<?php echo esc_url( YITH_WCWL()->get_wishlist_url() ); ?>">
            <span class="yith-wcwl-items-count">
                <i class="yith-wcwl-icon fa fa-heart-o"></i>
                    <?php 
                        $count = YITH_WCWL()->count_products(); 
                        if ( $count > 0 ) {
                            echo '<span class="wishlist-count">' . esc_html( $count ) . '</span>';
                        }
                    ?>
            </span>
        </a>
    </div>
    <?php
    return ob_get_clean();
  }

  add_shortcode( 'yith_wcwl_items_count', 'yith_wcwl_get_items_count' );
}

if ( defined( 'YITH_WCWL' ) && ! function_exists( 'yith_wcwl_ajax_update_count' ) ) {
    function yith_wcwl_ajax_update_count() {
        wp_send_json(
            array(
                'count' => yith_wcwl_count_all_products(),
            )
        );
    }
    add_action( 'wp_ajax_yith_wcwl_update_wishlist_count', 'yith_wcwl_ajax_update_count' );
    add_action( 'wp_ajax_nopriv_yith_wcwl_update_wishlist_count', 'yith_wcwl_ajax_update_count' );
}

if ( defined( 'YITH_WCWL' ) && ! function_exists( 'yith_wcwl_enqueue_custom_script' ) ) {
    function yith_wcwl_enqueue_custom_script() {
        wp_add_inline_script(
            'jquery-yith-wcwl',
            "
        jQuery( function( $ ) {
          let refreshCounter =  () => {
            $.get( yith_wcwl_l10n.ajax_url, {
              action: 'yith_wcwl_update_wishlist_count'
            }, function( data ) {
              $('.menu-item-wishlist').find('.mini-item-counter').html( data.count );
            } );
          };
          
          $( document ).on( 'added_to_wishlist removed_from_wishlist', refreshCounter );
          
          refreshCounter();
        } );
      "
        );
    }
    add_action( 'wp_enqueue_scripts', 'yith_wcwl_enqueue_custom_script', 20 );
}

Ответ или решение

Обновление счетчика избранного без перезагрузки страницы — довольно частая задача в веб-разработке, особенно когда дело касается улучшения пользовательского опыта, облегчения взаимодействия с сайтом и повышения его интерактивности. Давайте рассмотрим, как это можно сделать, используя плагин YITH Wishlist и AJAX.

Теория

В основе задачи лежит необходимость асинхронного обновления данных на веб-странице, которое позволяет пользователю видеть актуальную информацию без необходимости перезагрузки страницы. Это достигается с помощью технологии AJAX (Asynchronous JavaScript and XML). AJAX позволяет отправлять запросы к серверу и обновлять часть веб-страницы на лету. В контексте вашей задачи, обновление счетчика избранного играет ключевую роль в создании более динамичного и отзывчивого интерфейса.

Пример

В приведенном вами коде в файле functions.php происходит несколько вещей:

1. Формирование HTML для счетчика избранного:
   В функции yith_wcwl_get_items_count создается HTML-код, который выводит текущее количество товаров в избранном. Это делается с использованием output buffering, что позволяет сохранить HTML как строку и выводить ее в нужном месте на странице через шорткод [yith_wcwl_items_count].

2. Обработка AJAX-запроса на серверной стороне:
   При помощи функции yith_wcwl_ajax_update_count создаются два хука для AJAX-запросов: wp_ajax_yith_wcwl_update_wishlist_count и wp_ajax_nopriv_yith_wcwl_update_wishlist_count. Это позволяет обрабатывать запросы как для авторизованных пользователей, так и для гостей. В этой функции отправляется JSON-ответ с текущим количеством товаров в избранном.

3. Запуск AJAX на клиентской стороне:
   В функции yith_wcwl_enqueue_custom_script добавляется JavaScript-код, использующий библиотеку jQuery для отправки AJAX-запроса на сервер при добавлении или удалении товара из избранного. Код следит за событиями added_to_wishlist и removed_from_wishlist, обновляя счетчик товара в избранном без перезагрузки страницы.

Применение

Чтобы понять, почему обновление происходит только при первоначальной загрузке страницы, а не при добавлении или удалении товаров, необходимо внимательно рассмотреть следующий момент: ключевые события, которые должны запускать обновление счетчика (added_to_wishlist, removed_from_wishlist), возможно, не триггерятся. Причинами могут быть:

• События не происходят в нужное время из-за конфликтов скриптов или едва заметных ошибок в JavaScript.
• Возможно, jQuery не загружается корректно или используется другой формат событий, что мешает корректной обработке.

Предлагаем следующий план действий:

1. Проверка событий:
   Убедитесь, что события added_to_wishlist и removed_from_wishlist действительно происходят на странице. Для этого можно временно добавить console.log внутри обработчиков событий, чтобы удостовериться в их вызове.

2. Проверка зависимости и конфигурации jQuery:
   Убедитесь, что jQuery действительно инициализируется и доступен, когда запускаются ваши скрипты. Возможно, нужно перенести код в нижнюю часть страницы или отложить его загрузку до полной загрузки DOM.

3. Дебаггинг AJAX-запроса:
   Проверьте, корректно ли отправляется AJAX-запрос и получает ли он правильные данные. Для этого используйте инструменты разработчика в вашем браузере, чтобы следить за сетью (network) и проверять данные, которые отправляются и принимаются.

4. Конфликты с другими плагинами/скриптами:
   Попробуйте деактивировать другие плагины на вашем сайте временно, чтобы убедиться, что конфликт отсутствует.

Завершая, правильная настройка AJAX и обработка событий может значительно улучшить пользовательский интерфейс вашего сайта.Если же самостоятельно не удается устранить проблему, возможно, будет полезно обратиться к профессиональному разработчику или в службу поддержки плагина для получения дополнительной помощи.