custom/plugins/ShopWithMeUI/src/Resources/views/storefront/component/toastNoti.html.twig line 1

Open in your IDE?
  1. <div class="swm-toast-notify">
  2.     <div class="toast-notify__icon">
  3.         <img class="width-full toast-notify__icon-success" src="{{ asset('bundles/shopwithmeui/assets/icons/toastNoti/success.svg') }}"/>
  4.         <img class="width-full toast-notify__icon-error" src="{{ asset('bundles/shopwithmeui/assets/icons/toastNoti/error.svg') }}"/>
  5.     </div>
  6.     <div class="toast-notify__content">
  7.     
  8.     </div>
  9.     <div class="toast-notify__close">
  10.         <img src="{{ asset('bundles/shopwithmeui/assets/icons/toastNoti-close.svg') }}"/>
  11.     </div>
  12. </div>
  14. <script>
  15.    function showToastNotify(message, options = {}) {
  16.         const { type } = options || {};
  18.         const notify = document.querySelector('.swm-toast-notify');
  19.         const notiClose = document.querySelector('.toast-notify__close');
  20.         const notiCloseIcon = document.querySelector('.toast-notify__close img');
  21.         const notiSuccess = document.querySelector('.toast-notify__icon-success');
  22.         const notiError = document.querySelector('.toast-notify__icon-error');
  23.         if (notify) {
  24.             notify.classList.add('show');
  25.             notify.classList.add(type);
  26.             if (type == 'success') {
  27.                 if (notiError) {
  28.                     notiError.classList.add('d-none-important');
  29.                 }
  30.                 if (notiSuccess) {
  31.                     notiSuccess.classList.remove('d-none-important');
  32.                 }
  33.             }
  34.             else {
  35.                 console.log('check error')
  36.                 if (notiError) {
  37.                     notiError.classList.remove('d-none-important');
  38.                 }
  39.                 if (notiSuccess) {
  40.                     notiSuccess.classList.add('d-none-important');
  41.                 }
  42.             }
  44.             notiCloseIcon.classList.add(type);
  46.             const content = notify.querySelector('.toast-notify__content');
  47.             content.innerHTML = message;
  49.             setTimeout(() => {
  50.                 notify.classList.remove('show');
  51.                 notify.classList.remove(type);
  52.                 notiCloseIcon.classList.remove(type);
  53.             }, 4000);
  55.         }
  56.         notiClose.addEventListener('click', () => {
  57.             notify.classList.remove('show');
  58.             notify.classList.remove(type);
  59.             notiCloseIcon.classList.remove(type);
  60.         })
  61.     }
  62. </script>