Merge pull request #919 from tblivet/feat/add-stock-on-cart-and-listing

Add stock informations on cart page

Author: tblivet

src/scss/prestashop/components/cart/_cart-product-line.scss

@@ -42,6 +42,18 @@ $component-name: product-line;
   }
 
   &__item {
+    &-availability-icon {
+      flex-shrink: 0;
+      font-size: 0.875rem;
+    }
+
+    &-availability-message {
+      display: inline-flex;
+      gap: 0.25rem;
+      align-items: center;
+      font-size: 0.75rem;
+    }
+
     &-price {
       width: 100%;
       font-weight: 600;
@@ -73,6 +85,17 @@ $component-name: product-line;
       align-items: center;
     }
 
+    &--small-info {
+      font-size: 0.75rem;
+      color: var(--bs-tertiary-color);
+    }
+
+    &--availability {
+      display: flex;
+      flex-direction: column;
+      gap: 0.125rem;
+    }
+
     &--prices {
       display: flex;
       flex-wrap: wrap;

src/scss/prestashop/pages/_product.scss

@@ -123,10 +123,7 @@ $component-name: product;
     &__availability {
       display: flex;
       flex-direction: column;
-
-      &:has(+ .#{$component-name}__delivery-infos) {
-        margin-block-end: 0.25rem;
-      }
+      gap: 0.25rem;
     }
 
     &__availability-status {
@@ -203,7 +200,6 @@ $component-name: product;
     &__actions,
     &__variants,
     &__availability,
-    &__delivery-infos,
     &__add-to-cart-container,
     &__minimal-quantity,
     &__customization,
@@ -296,7 +292,6 @@ $component-name: product;
       &__actions,
       &__variants,
       &__availability,
-      &__delivery-infos,
       &__add-to-cart-container,
       &__minimal-quantity,
       &__customization,

templates/catalog/_partials/product-add-to-cart.tpl

@@ -5,11 +5,14 @@
 {if !$configuration.is_catalog}
   <div class="product__add-to-cart-container product-add-to-cart js-product-add-to-cart">
     {block name='product_availability'}
-      {if $product.show_availability && $product.availability_message}
-        <div
-          id="product-availability"
-          class="product__availability js-product-availability"
-        >
+      <div
+        id="product-availability"
+        class="product__availability js-product-availability"
+        {if empty($product.availability_message) && empty($product.delivery_information)}
+          hidden
+        {/if}
+      >
+        {if !empty($product.availability_message)}
           {** First, we prepare the icons and colors we want to use *}
           {if $product.availability == 'in_stock'}
             {assign 'availability_icon' 'E5CA'}
@@ -38,23 +41,14 @@
               {/if}
             </div>
           </div>
-        </div>
-      {/if}
+        {/if}
 
-      {block name='product_delivery_times'}
-        {if !$product.is_virtual}
-          {if $product.additional_delivery_times == 1 && $product.delivery_information}
+        {block name='product_delivery_times'}
+          {if !empty($product.delivery_information)}
             <div class="product__delivery-infos">{$product.delivery_information}</div>
-          {elseif $product.additional_delivery_times == 2}
-            {if $product.quantity > 0 && $product.delivery_in_stock}
-              <div class="product__delivery-infos">{$product.delivery_in_stock}</div>
-            {* Out of stock message should not be displayed if customer can't order the product. *}
-            {elseif $product.quantity <= 0 && $product.add_to_cart_url && $product.delivery_out_stock}
-              <div class="product__delivery-infos">{$product.delivery_out_stock}</div>
-            {/if}
           {/if}
-        {/if}
-      {/block}
+        {/block}
+      </div>
     {/block}
 
     {block name='product_quantity'}

templates/checkout/_partials/cart-detailed-product-line.tpl

@@ -91,6 +91,35 @@
         </div>
       {/foreach}
 
+      {if !empty($product.availability_message)}
+        {if $product.availability == 'in_stock'}
+          {assign 'availability_icon' 'E5CA'}
+          {assign 'availability_class' 'text-success'}
+        {elseif $product.availability == 'available'}
+          {assign 'availability_icon' 'E002'}
+          {assign 'availability_class' 'text-warning'}
+        {elseif $product.availability == 'last_remaining_items'}
+          {assign 'availability_icon' 'E002'}
+          {assign 'availability_class' 'text-warning'}
+        {else}
+          {assign 'availability_icon' 'E14B'}
+          {assign 'availability_class' 'text-danger'}
+        {/if}
+
+        <div class="product-line__item product-line__item--availability">
+          <div class="product-line__item-availability-message {$availability_class}">
+            <i class="product-line__item-availability-icon material-icons rtl-no-flip">&#x{$availability_icon};</i>
+            {$product.availability_message}
+          </div>
+        </div>
+      {/if}
+
+      {if !empty($product.delivery_information)}
+        <div class="product-line__item product-line__item--small-info">
+          {$product.delivery_information}
+        </div>
+      {/if}
+
       {hook h='displayCartExtraProductInfo' product=$product}
 
       <div class="product-line__item product-line__item--prices">