Style product availability

PrestaShop · Dec 5, 2024 · 1d42a90 · 1d42a90
1 parent fb07f25
commit 1d42a90
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 16 deletions.
diff --git a/_dev/css/components/products.scss b/_dev/css/components/products.scss
@@ -621,20 +621,27 @@
   margin-top: 0.625rem;
   font-weight: 700;
 
-  .material-icons {
-    line-height: inherit;
+  .alert {
+    font-size: 1rem;
   }
 
-  .product-available {
-    color: $brand-success;
+  .alert-content-wrapper {
+    display: flex;
+    gap: 0.75rem;
   }
 
-  .product-unavailable {
-    color: $brand-warning;
+  /* Reset some of the general styles on alert warning */
+  .alert-warning {
+    color: #664d03;
+    background-color: #fff3cd;
+    border-color: #ffecb5;
   }
 
-  .product-last-items {
-    color: $brand-warning;
+  .alert-warning .material-icons {
+    padding-top: 0;
+    margin-right: 0;
+    font-size: 24px;
+    color: #664d03;
   }
 }
 

diff --git a/templates/catalog/_partials/product-add-to-cart.tpl b/templates/catalog/_partials/product-add-to-cart.tpl
@@ -66,18 +66,35 @@
     {/block}
 
     {block name='product_availability'}
-      <span id="product-availability" class="js-product-availability">
+      <div id="product-availability" class="product-availability js-product-availability">
         {if $product.show_availability && $product.availability_message}
-          {if $product.availability == 'available'}
-            <i class="material-icons rtl-no-flip product-available">&#xE5CA;</i>
-          {elseif $product.availability == 'last_remaining_items'}
-            <i class="material-icons product-last-items">&#xE002;</i>
+
+          {** First, we prepare the icons and colors we want to use *}
+          {if $product.availability == 'in_stock'}
+            {assign 'availability_icon' 'E5CA'}
+            {assign 'availability_color' 'success'}
+          {elseif $product.availability == 'available' || $product.availability == 'last_remaining_items'}
+            {assign 'availability_icon' 'E002'}
+            {assign 'availability_color' 'warning'}
           {else}
-            <i class="material-icons product-unavailable">&#xE14B;</i>
+            {assign 'availability_icon' 'E14B'}
+            {assign 'availability_color' 'danger'}
           {/if}
-          {$product.availability_message}
+
+          {** And render the availability message with icon *}
+          <div class="alert alert-{$availability_color}" role="alert">
+            <div class="alert-content-wrapper">
+              <div><i class="material-icons rtl-no-flip">&#x{$availability_icon};</i></div>
+              <div>
+                <div>{$product.availability_message}</div>
+                {if !empty($product.availability_submessage)}
+                  <div><small>{$product.availability_submessage}</small></div>
+                {/if}
+              </div>
+            </div>
+          </div>
         {/if}
-      </span>
+      </div>
     {/block}
 
     {block name='product_minimal_quantity'}