app/template/default/CustomComponent/modal.twig line 1

Open in your IDE?
  1. {#
  2. Modal Component - Có thể tái sử dụng cho nhiều mục đích khác nhau
  4. Sử dụng:
  5. {% include 'CustomComponent/modal.twig' with {
  6.     id: 'cart-success-modal',
  7.     title: 'Thêm sản phẩm vào giỏ hàng thành công!',
  8.     message: 'Sản phẩm đã được thêm vào giỏ hàng của bạn.',
  9.     showCancelButton: true,
  10.     cancelText: 'Tiếp tục mua sắm',
  11.     showActionButton: true,
  12.     actionText: 'Xem giỏ hàng',
  13.     actionUrl: url('cart'),
  14.     autoRedirect: true,
  15.     redirectUrl: url('cart'),
  16.     redirectDelay: 3000,
  17.     reloadOnCancel: true
  18. } %}
  20. Options:
  21. - reloadOnCancel: true/false - Nếu true, sẽ reload page khi đóng modal (cancel, close, overlay, ESC)
  22. - reloadOnError: true/false - Nếu true, sẽ reload page khi có lỗi (mặc định false)
  23. #}
  25. <div class="ec-modal" id="{{ id|default('default-modal') }}" 
  26.      {% if reloadOnCancel|default(false) %}data-reload-on-cancel="true"{% endif %}
  27.      {% if reloadOnError|default(false) %}data-reload-on-error="true"{% endif %}>
  28.     <div class="ec-modal-overlay">
  29.         <div class="ec-modal-wrap">
  30.             <span class="ec-modal-close">
  31.                 <span class="ec-icon">
  32.                     <img src="{{ asset('assets/icon/cross-dark.svg') }}" alt=""/>
  33.                 </span>
  34.             </span>
  35.             
  36.             <div id="ec-modal-header" class="text-center">
  37.                 {{ title|default('Thông báo') }}
  38.             </div>
  39.             
  40.             {% if message is defined and message %}
  41.                 <div class="ec-modal-message">
  42.                     {{ message }}
  43.                 </div>
  44.             {% endif %}
  45.             
  46.             <div class="ec-modal-box">
  47.                 <div class="ec-role">
  48.                     {% if showCancelButton|default(true) %}
  49.                         <span class="ec-inlineBtn--cancel" id="modal-cancel-btn">
  50.                             {{ cancelText|default('Hủy') }}
  51.                         </span>
  52.                     {% endif %}
  53.                     
  54.                     {% if showActionButton|default(true) %}
  55.                         <a href="{{ actionUrl|default('#') }}" class="ec-inlineBtn--action" id="modal-action-btn">
  56.                             {{ actionText|default('Xác nhận') }}
  57.                         </a>
  58.                     {% endif %}
  59.                 </div>
  60.             </div>
  61.         </div>
  62.     </div>
  63. </div>
  65. {% if autoRedirect|default(false) and redirectUrl|default('') %}
  66. <script>
  67. document.addEventListener('DOMContentLoaded', function() {
  68.     const modal = document.getElementById('{{ id|default('default-modal') }}');
  69.     const redirectUrl = '{{ redirectUrl }}';
  70.     const redirectDelay = {{ redirectDelay|default(3000) }};
  71.     
  72.     if (modal && redirectUrl) {
  73.         setTimeout(function() {
  74.             window.location.href = redirectUrl;
  75.         }, redirectDelay);
  76.     }
  77. });
  78. </script>
  79. {% endif %}