fix:display out of stock notification on cart page

_dev/js/cart.js

@@ -28,7 +28,7 @@ const CheckUpdateQuantityOperations = {
 
     if (errorMsg !== "") {
       const strError = `
-        <article class="alert alert-danger" role="alert" data-alert="danger">
+        <article class="alert text-center w-fit flex mt-12 p-2 bg-red-100 border border-red-300 alert-danger" role="alert" data-alert="danger">
           <ul>
             <li>${errorMsg}</li>
           </ul>

_dev/js/selectors.js

@@ -100,7 +100,7 @@ prestashop.themeSelectors = {
   },
   notifications: {
     dangerAlert: "#notifications article.alert-danger",
-    container: "#notifications .notifications-container",
+    container: "#notifications.notifications-container",
   },
   passwordPolicy,
 };

templates/_partials/notifications.tpl

@@ -22,10 +22,9 @@
  * @license   https://opensource.org/licenses/AFL-3.0 Academic Free License 3.0 (AFL-3.0)
  * International Registered Trademark & Property of PrestaShop SA
  *}
+ {if isset($notifications)}
  
-{if isset($notifications)}
-<aside id="notifications">
-  <div class="container">
+    <div id="notifications" class="notifications-container container">
       {if $notifications.error}
         {block name='notifications_error'}
           <article class="alert alert-danger" role="alert" data-alert="danger">
@@ -40,7 +39,7 @@
   
       {if $notifications.warning}
         {block name='notifications_warning'}
-        <article class="alert alert-warning" role="alert" data-alert="warning">
+          <article class="alert alert-warning " role="alert" data-alert="warning">
             <ul>
               {foreach $notifications.warning as $notif}
                 <li>{$notif nofilter}</li>
@@ -74,5 +73,6 @@
         {/block}
       {/if}
     </div>
-</aside>
-{/if}
+  </aside>
+  {/if}
+  

templates/layouts/layout-both-columns.tpl

@@ -61,6 +61,10 @@
       {include file='_partials/breadcrumb.tpl'}
     {/block}
 
+     {block name='notifications'}
+      {include file='_partials/notifications.tpl'}
+    {/block}
+ 
     {block name='wrapperTop'}
       {hook h="displayWrapperTop"}
     {/block}