Fix: issue-522

src/js/components/UseHandleCartAction.ts

@@ -3,6 +3,9 @@
  * file that was distributed with this source code.
  */
 
+import SelectorsMap from '@constants/selectors-map';
+import useAlert from './useAlert';
+
 const handleCartAction = (event: Event): void => {
   event.stopPropagation();
   event.preventDefault();
@@ -33,11 +36,43 @@ const sendCartRefreshRequest = (target: HTMLElement): void => {
     body: formData,
   })
     .then((resp: Response) => {
-    // Refresh cart preview
+      // Refresh cart preview
       prestashop.emit(events.updateCart, {
         reason: dataset,
         resp,
       });
+
+      // Show product removal success alert
+      if (target && target.getAttribute('data-link-action') === SelectorsMap.cart.deleteLinkAction) {
+        const alertPlaceholder = document.querySelector(SelectorsMap.cart.alertPlaceholder);
+        const productUrl = target.getAttribute('data-product-url');
+        const productName = target.getAttribute('data-product-name');
+
+        if (alertPlaceholder && productUrl && productName) {
+          const alertText = alertPlaceholder.getAttribute('data-alert');
+
+          // Create the product link element
+          const productLink = document.createElement('a');
+          productLink.classList.add('alert-link');
+          productLink.setAttribute('href', productUrl);
+          productLink.textContent = productName;
+
+          // Create the alert message container
+          const alertMessage = document.createElement('span');
+          alertMessage.appendChild(productLink);
+          alertMessage.append(` ${alertText}`);
+
+          const alertMessageContainer = document.createElement('div');
+          alertMessageContainer.appendChild(alertMessage);
+
+          const alert = useAlert(alertMessageContainer.innerHTML, {
+            type: 'success',
+            selector: SelectorsMap.cart.alertPlaceholder,
+          });
+
+          alert.show();
+        }
+      }
     })
     .catch((err) => {
       const errorData = err as Response;

src/js/constants/selectors-map.ts

@@ -40,6 +40,7 @@ export const cart = {
   productQuantity: '.cart__items .js-quantity-button',
   productItem: '.cart__item',
   removeFromCartLink: '.remove-from-cart',
+  alertPlaceholder: '.js-cart-update-alert',
 };
 
 export const blockcart = {

src/scss/core/components/_alert.scss

@@ -1,8 +1,4 @@
 .alert {
-  &.fade:not(.show) {
-    @extend .visually-hidden;
-  }
-
   p,
   ul,
   ol {

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

@@ -175,7 +175,10 @@
       <a class="remove-from-cart" rel="nofollow" href="{$product.remove_from_cart_url}"
         data-link-action="delete-from-cart" data-id-product="{$product.id_product|escape:'javascript'}"
         data-id-product-attribute="{$product.id_product_attribute|escape:'javascript'}"
-        data-id-customization="{$product.id_customization|escape:'javascript'}">
+        data-id-customization="{$product.id_customization|escape:'javascript'}"
+        data-product-url="{$product.url|escape:'javascript'}"
+        data-product-name="{$product.name|escape:'htmlall':'UTF-8'}"
+        >
         {l s='Remove' d='Shop.Theme.Checkout'}
       </a>
     {/if}

templates/checkout/cart.tpl

@@ -12,6 +12,8 @@
 
       <!-- cart products detailed -->
       <div class="cart-container mb-3">
+        <div class="js-cart-update-alert" data-alert="{l s='has been removed from the cart.' d='Shop.Theme.Actions' js=1}"></div>
+
         {block name='cart_overview'}
           {include file='checkout/_partials/cart-detailed.tpl' cart=$cart}
         {/block}