From 88aca6ca4b8e20ff6ee4dd8cfefcdd2fc3287993 Mon Sep 17 00:00:00 2001 From: tblivet Date: Tue, 11 Jun 2024 10:37:21 +0200 Subject: [PATCH 1/2] feat: add product removal alert on cart --- src/js/components/UseHandleCartAction.ts | 27 ++++++++++++++++++- src/js/constants/selectors-map.ts | 1 + src/scss/core/components/_alert.scss | 4 --- .../_partials/cart-detailed-product-line.tpl | 5 +++- templates/checkout/cart.tpl | 2 ++ 5 files changed, 33 insertions(+), 6 deletions(-) diff --git a/src/js/components/UseHandleCartAction.ts b/src/js/components/UseHandleCartAction.ts index edc82b464..4a5fc63eb 100644 --- a/src/js/components/UseHandleCartAction.ts +++ b/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,33 @@ 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'); + const productLink = `${productName}`; + const alertMessage = `${productLink} ${alertText}`; + + if (alertMessage) { + const alert = useAlert(alertMessage, { + type: 'success', + selector: SelectorsMap.cart.alertPlaceholder, + }); + + alert.show(); + } + } + } }) .catch((err) => { const errorData = err as Response; diff --git a/src/js/constants/selectors-map.ts b/src/js/constants/selectors-map.ts index 768132da7..4561e2217 100644 --- a/src/js/constants/selectors-map.ts +++ b/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 = { diff --git a/src/scss/core/components/_alert.scss b/src/scss/core/components/_alert.scss index cb7179907..c9e828fdd 100644 --- a/src/scss/core/components/_alert.scss +++ b/src/scss/core/components/_alert.scss @@ -1,8 +1,4 @@ .alert { - &.fade:not(.show) { - @extend .visually-hidden; - } - p, ul, ol { diff --git a/templates/checkout/_partials/cart-detailed-product-line.tpl b/templates/checkout/_partials/cart-detailed-product-line.tpl index 2bf2c2d1e..166e613ce 100644 --- a/templates/checkout/_partials/cart-detailed-product-line.tpl +++ b/templates/checkout/_partials/cart-detailed-product-line.tpl @@ -175,7 +175,10 @@ + data-id-customization="{$product.id_customization|escape:'javascript'}" + data-product-url="{$product.url|escape:'javascript'}" + data-product-name="{$product.name|escape:'javascript'}" + > {l s='Remove' d='Shop.Theme.Checkout'} {/if} diff --git a/templates/checkout/cart.tpl b/templates/checkout/cart.tpl index c9439688f..a7da919ca 100644 --- a/templates/checkout/cart.tpl +++ b/templates/checkout/cart.tpl @@ -12,6 +12,8 @@
+
+ {block name='cart_overview'} {include file='checkout/_partials/cart-detailed.tpl' cart=$cart} {/block} From ff7ea903c1ab62fa20ecb267c4b48cbe2c9ea1fb Mon Sep 17 00:00:00 2001 From: tblivet Date: Wed, 12 Jun 2024 11:04:02 +0200 Subject: [PATCH 2/2] fix: escape issue + improvement --- src/js/components/UseHandleCartAction.ts | 28 +++++++++++++------ .../_partials/cart-detailed-product-line.tpl | 2 +- 2 files changed, 20 insertions(+), 10 deletions(-) diff --git a/src/js/components/UseHandleCartAction.ts b/src/js/components/UseHandleCartAction.ts index 4a5fc63eb..d65e73be0 100644 --- a/src/js/components/UseHandleCartAction.ts +++ b/src/js/components/UseHandleCartAction.ts @@ -50,17 +50,27 @@ const sendCartRefreshRequest = (target: HTMLElement): void => { if (alertPlaceholder && productUrl && productName) { const alertText = alertPlaceholder.getAttribute('data-alert'); - const productLink = `${productName}`; - const alertMessage = `${productLink} ${alertText}`; - if (alertMessage) { - const alert = useAlert(alertMessage, { - type: 'success', - selector: SelectorsMap.cart.alertPlaceholder, - }); + // Create the product link element + const productLink = document.createElement('a'); + productLink.classList.add('alert-link'); + productLink.setAttribute('href', productUrl); + productLink.textContent = productName; - alert.show(); - } + // 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(); } } }) diff --git a/templates/checkout/_partials/cart-detailed-product-line.tpl b/templates/checkout/_partials/cart-detailed-product-line.tpl index 166e613ce..e665ede32 100644 --- a/templates/checkout/_partials/cart-detailed-product-line.tpl +++ b/templates/checkout/_partials/cart-detailed-product-line.tpl @@ -177,7 +177,7 @@ data-id-product-attribute="{$product.id_product_attribute|escape:'javascript'}" data-id-customization="{$product.id_customization|escape:'javascript'}" data-product-url="{$product.url|escape:'javascript'}" - data-product-name="{$product.name|escape:'javascript'}" + data-product-name="{$product.name|escape:'htmlall':'UTF-8'}" > {l s='Remove' d='Shop.Theme.Checkout'}