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>
  36.             <div id="ec-modal-header" class="text-center">
  37.                 {{ title|default('Thông báo') }}
  38.             </div>
  40.             {% if message is defined and message %}
  41.                 <div class="ec-modal-message">
  42.                     {{ message }}
  43.                 </div>
  44.             {% endif %}
  46.             <div class="ec-modal-box">
  47.                 <div class="ec-role">
  48.                     {# Dùng ?? thay vì |default — |default coi false là empty nên luôn fallback true #}
  49.                     {% if showCancelButton ?? true %}
  50.                         <span class="ec-inlineBtn--cancel" id="modal-cancel-btn">
  51.                             {{ cancelText|default('Cancel') }}
  52.                         </span>
  53.                     {% endif %}
  55.                     {% if showActionButton ?? true %}
  56.                         <a href="{{ actionUrl|default('#') }}" class="ec-inlineBtn--action" id="modal-action-btn">
  57.                             {{ actionText|default('OK') }}
  58.                         </a>
  59.                     {% endif %}
  60.                 </div>
  61.             </div>
  62.         </div>
  63.     </div>
  64. </div>
  66. {% if autoRedirect|default(false) and redirectUrl|default('') %}
  67. <script>
  68. document.addEventListener('DOMContentLoaded', function() {
  69.     const modal = document.getElementById('{{ id|default('default-modal') }}');
  70.     const redirectUrl = '{{ redirectUrl }}';
  71.     const redirectDelay = {{ redirectDelay|default(3000) }};
  73.     if (modal && redirectUrl) {
  74.         setTimeout(function() {
  75.             window.location.href = redirectUrl;
  76.         }, redirectDelay);
  77.     }
  78. });
  79. </script>
  80. {% endif %}