Напоминаем пользователю о товарах в корзине с помощью анимации

Популярный вариант для снижения количества брошенных корзин в интернет-магазине — триггерные рассылки. Например, товар положили в корзину сутки назад, а заказ не оформили — пользователь получит email-уведомление с напоминанием.

Неплохо, но:

• не сработает для неавторизованного посетителя (хотя его можно догонять рекламой)
• корзину уже бросили — мы исправляем последствия.

Маркетолог клиента предложил вариант на опережение — с помощью анимации корзины. То есть пока корзина пуста, мы никак не акцентируем на ней внимание. Пользователь добавил товар в корзину — привлекаем внимание к корзине в хедере с помощью анимации.

Пример — на сайте топливных форсунок cdi36.ru.

Как реализовать

Всё звучит просто: нам нужно проверять количество товаров в корзине при загрузке страницы, при добавлении и удалении товаров. На сайте выше используется шаблон от Аспро для 1С-Битрикс. В шаблоне компонента корзины sale.basket.basket (отдельная страница корзины) я нашёл кастомное JS-событие ‘OnBasketChange’, а вот у sale.basket.basket.line (корзина в шапке сайта) — ничего похожего. В итоге, я решил отслеживать изменение состояния корзины в хедере с помощью MutationObserver. Как минимум получается более универсально: с минимальной доработкой его можно использовать не только на сайте на 1С-Битрикс, но и на том же WordPress.

Итак, мой код ниже, а если вы знаете способ проще, пожалуйста, поделитесь в комментариях.

//JavaScript
//функция для добавления анимации у плашки с количеством товаров в корзине
let animateBasket = () => {
    //соберём в массив элементы, в которых указано количество товаров в корзине. Да, их несколько — для разных устройств — часть просто скрыта.
    let basketCountElements = document.querySelectorAll(".basket-link.basket .js-basket-block .count");
    
    // если на странице есть корзина
    if(basketCountElements.length) {
        basketCountElements.forEach(element => {
            //если в корзине не ноль, то изменим фон и добавим класс с анимацией
            if (element.textContent != 0) {     
                element.style.backgroundColor = "#ec1c24"; 
                element.classList.add("pulse-animation");
            } else {
                //иначе пусть фон будет чёрным, а анимацию убираем
                element.style.backgroundColor = "#000000"; 
                element.classList.remove("pulse-animation");
            }
        }); 
    } 
};

//функция для отслеживания изменения количества товаров в корзине
let basketCountMutations = () => {
    let target = document.querySelector(".basket-link.basket .js-basket-block ");
    
    if(!target) return;
    
    // Конфигурация observer (за какими изменениями наблюдать)
    const config = {
        childList: true,
        subtree: true
    };
    
    // Колбэк-функция при срабатывании изменения количества в корзине
    const callback = (mutationsList, observer) => {
        for (let mutation of mutationsList) {
            animateBasket();
        }
    };
    
    // Создаём экземпляр наблюдателя с указанной функцией колбэка
    const observer = new MutationObserver(callback);
    
    // Начинаем наблюдение за настроенными изменениями целевого элемента
    observer.observe(target, config);
};

//запустим наши функции
window.addEventListener("load", () => {
    basketCountMutations();
    animateBasket();
});

/* CSS */
.pulse-animation {
  box-shadow: 0 0 0 0 #ec1c24;
  animation: pulse-red 3s infinite;
}

@keyframes pulse-red {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 #ec1c24;
  }
  
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 10px rgba(255, 82, 82, 0);
  }
  
  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(255, 82, 82, 0);
  }
}