From 573ea8b94eab6b3aadb95eb8af7ad07dcc641cbe Mon Sep 17 00:00:00 2001
From: Hlavtox <daniel.hlavacek@hotmail.cz>
Date: Thu, 31 Oct 2024 08:44:30 +0100
Subject: [PATCH] Format availability

---
 .../catalog/_partials/product-add-to-cart.tpl | 35 +++++++++++++++----
 1 file changed, 28 insertions(+), 7 deletions(-)

diff --git a/templates/catalog/_partials/product-add-to-cart.tpl b/templates/catalog/_partials/product-add-to-cart.tpl
index 1b765eda4..331763f0f 100644
--- a/templates/catalog/_partials/product-add-to-cart.tpl
+++ b/templates/catalog/_partials/product-add-to-cart.tpl
@@ -6,19 +6,40 @@
   {if !$configuration.is_catalog}
     <div class="mb-3">
       {block name='product_availability'}
-        <span id="product-availability" class="product__availability js-product-availability d-flex align-items-center">
+        <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>
+
+            {** 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'}
+              {assign 'availability_icon' 'E002'}
+              {assign 'availability_color' 'warning'}
             {elseif $product.availability == 'last_remaining_items'}
-              <i class="material-icons product-last-items me-2">&#xE002;</i>
+              {assign 'availability_icon' 'E002'}
+              {assign 'availability_color' 'warning'}
             {else}
-              <i class="material-icons product-unavailable me-2">&#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="d-flex">
+                <div class="me-2">
+                  <i class="material-icons rtl-no-flip">&#x{$availability_icon};</i>
+                </div>
+                <div>
+                  <div>{$product.availability_message}</div>
+                  {if !empty($product.availability_submessage)}
+                    <div class="mt-1"><small>{$product.availability_submessage}</small></div>
+                  {/if}
+                </div>
+              </div>
+            </div>
           {/if}
-        </span>
+        </div>
       {/block}
 
       {block name='product_delivery_times'}