Показываем уведомление после добавления товара в корзину

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

Инструкция

1

Создайте кнопку "Добавлено в корзину" в необходимом месте и присвойте ей класс ' infotext '

2

Скопируйте код №1 и вставьте в блок "T123" в шапку или подвал вашего сайта

3

Чтобы поменять время отображения виджета на сайте, измените значение "2500"

Код скопирован
Код для вставки

 <!-- Показываем уведомление после добавления товара в корзину -->
 <!-- https://youx.agency/pokazyvaem-uvedomlenie-posle-dobavleniya-tovara-v-korzinu -->

<script>
  // уведомление после добавления в корзину
  $(document).ready(function() {
    setTimeout(() => {
      $(document).on('click', 'a[href="#order"]', function() {
        $('.infotext').addClass('infotextvisible');

        // Убрать уведомление через 2.5 секунды
        setTimeout(function() {
          $('.infotext').removeClass('infotextvisible');
        }, 2500);
      });
    }, 1500);
  });

</script>

Код скопирован
Стили для виджета

 <!-- Показываем уведомление после добавления товара в корзину -->
 <!-- https://youx.agency/pokazyvaem-uvedomlenie-posle-dobavleniya-tovara-v-korzinu -->

<style>
.infotext .tn-atom {
     display:none; 
}
.infotextvisible .tn-atom {
     display: block;
     width: 214px;
     height: 44px;
     padding: 10px;
     text-align: center;
     box-sizing: border-box;
     animation: t706__pulse-anim 0.3s;
}
</style>

Другие модификации

Наш чат Telegram

Вступите в наш чат для общения, помогаем и консультируем по проектам, продвигаем проекты Behance, рассказываем о дизайне

* Регулярная техническая поддержка, помощь и консультации