custom/static-plugins/NdTheme/src/Resources/views/storefront/utilities/alert.html.twig line 1

Open in your IDE?
  1. {#
  2. Global messages template
  3. https://getbootstrap.com/docs/4.3/components/alerts/
  4. *Type:
  5. The template provides an easy way to display messages in the storefront. The following types are supported:
  6. * primary
  7. * secondary
  8. * danger (red)
  9. * success (green)
  10. * warning (yellow)
  11. * info (blue)
  12. * light (white)
  13. * dark (dark grey)
  14.     {% sw_include '@Storefront/storefront/utilities/alert.html.twig' with {
  15.         type:"primary",
  16.         content:"Primary Lorem ipsum dolor"
  17.     } %}
  18. *Icons:
  19. Icons are shown by default. To hide the icon within the alert, set the value of "icon" to false:
  20.     {% sw_include '@Storefront/storefront/utilities/alert.html.twig' with {
  21.         type:"primary",
  22.         content:"Primary Lorem ipsum dolor",
  23.         icon: false
  24.     } %}
  25. *Message Content:
  26. The component requires the parameters ```content``` or ```list``` to display a message. If no ```type``` is defined it
  27. will use the fallback option (success).
  28.     {% sw_include '@Storefront/storefront/utilities/alert.html.twig' with {
  29.         type:"primary",
  30.         content:"Primary Lorem ipsum dolor"
  31.     } %}
  32. *Message List:
  33. If you need to display a bunch of messages (for example error messages in the registration), you can pass an array
  34. of messages to the template using the parameter ```list```:
  35.      {% set list1 = [
  36.         'Error message 1',
  37.         'Error message 2',
  38.         'Error message 3'
  39.     ] %}
  40.     {% sw_include '@Storefront/storefront/utilities/alert.html.twig' with {
  41.         type:"secondary",
  42.         list: list1
  43.     } %}
  44. *Heading:
  45. To display a heading, use "heading".
  46.     {% sw_include '@Storefront/storefront/utilities/alert.html.twig' with {
  47.         type:"primary",
  48.         content:"Primary Lorem ipsum dolor",
  49.         heading: "Test Heading"
  50.     } %}
  51. *Dismissible Button:
  52. To display a dismissible button set the value of "dismissible" to true.
  53.     {% sw_include '@Storefront/storefront/utilities/alert.html.twig' with {
  54.         type:"primary",
  55.         content:"Primary Lorem ipsum dolor",
  56.         dismissible: true
  57.     } %}
  58. #}
  59. {% block utilities_alert %}
  60.     <div role="alert"
  61.          class="alert relative col-span-full my-4 rounded-md mx-auto text-sm max-w-[calc(100%-36px)] px-3 py-2 {% if opcPage %} mt-4{% endif %} {% if type %}alert-{{ type }}{% endif %}{% if dismissible %} alert-dismissible p-6 fade show{% endif %}{% if icon != "error" %} alert-has-icon flex items-center grid-gap-2{% endif %}">
  62.         {% block utilities_alert_icon %}
  63.             {% if icon != "false" %}
  64.                 {% if type == "danger" %}
  65.                     {% sw_icon 'blocked' %}
  66.                 {% elseif type == "warning" %}
  67.                     {% sw_icon 'warning' %}
  68.                 {% elseif type == "info" %}
  69.                     {% sw_icon 'info' %}
  70.                 {% elseif type == "success" %}
  71.                     {% sw_icon 'checkmark-circle' %}
  72.                 {% else %}
  73.                     {% sw_icon 'alert' %}
  74.                 {% endif %}
  75.             {% endif %}
  76.         {% endblock %}
  77.         {% block utilities_alert_content_container %}
  78.             <div class="alert-content-container wysiwyg">
  79.                 {% block utilities_alert_heading %}
  80.                     {% if heading %}
  81.                         <div class="alert-heading h5">
  82.                             {{ heading }}
  83.                         </div>
  84.                     {% endif %}
  85.                 {% endblock %}
  86.                 {% block utilities_alert_content %}
  87.                     <div class="alert-content">
  88.                         {% if list|length > 1 %}
  89.                             <ul class="alert-list">
  90.                                 {% for entry in list %}
  91.                                     <li>{{ entry|sw_sanitize }}</li>
  92.                                 {% endfor %}
  93.                             </ul>
  94.                         {% elseif list|length == 1 %}
  95.                             {% for entry in list %}
  96.                                 {{ entry|sw_sanitize }}
  97.                             {% endfor %}
  98.                         {% else %}
  99.                             {{ content|sw_sanitize }}
  100.                         {% endif %}
  101.                     </div>
  102.                 {% endblock %}
  103.                 {% block utilities_alert_dismissible %}
  104.                     {% if dismissible %}
  105.                         <button type="button"
  106.                                 class="close absolute top-0 right-0 py-3 px-5"
  107.                         {{ dataBsDismissAttr }}="alert"
  108.                         aria-label="Close">
  109.                         <span aria-hidden="true">&times;</span>
  110.                         </button>
  111.                     {% endif %}
  112.                 {% endblock %}
  113.             </div>
  114.         {% endblock %}
  115.     </div>
  116. {% endblock %}