From e7fce764039e1d62d889833152263bb9df40ad85 Mon Sep 17 00:00:00 2001 From: Tatu Wikman Date: Wed, 12 Mar 2025 13:04:22 +0200 Subject: [PATCH 1/4] fix clicking on highlighted coupons --- src/js/constants/selectors-map.ts | 1 + src/js/pages/cart.ts | 37 ++++++++++++++++++------------- 2 files changed, 22 insertions(+), 16 deletions(-) diff --git a/src/js/constants/selectors-map.ts b/src/js/constants/selectors-map.ts index 1805bcfc4..6a71fa224 100644 --- a/src/js/constants/selectors-map.ts +++ b/src/js/constants/selectors-map.ts @@ -35,6 +35,7 @@ export const listing = { export const cart = { container: '.cart-container', + summary: '.cart-summary', overview: '.cart-overview', discountCode: '.js-discount .js-code', discountName: '[name=discount_name]', diff --git a/src/js/pages/cart.ts b/src/js/pages/cart.ts index e00c066fb..fa14484e8 100644 --- a/src/js/pages/cart.ts +++ b/src/js/pages/cart.ts @@ -9,30 +9,35 @@ import handleCartAction from '../components/UseHandleCartAction'; export default () => { const {Theme} = window; - const voucherCodes = document.querySelectorAll(Theme.selectors.cart.discountCode); const cartContainer = document.querySelector(Theme.selectors.cart.container); + const cartSummary = document.querySelector(Theme.selectors.cart.summary); + + if(cartSummary) { + cartSummary.addEventListener('click', (event: Event) => { + const target = event.target as HTMLElement; + + // Check if the clicked element is a voucher code or inside one + const voucher = target.closest(Theme.selectors.cart.discountCode); + + if (!voucher || !isHTMLElement(voucher)) return; - voucherCodes.forEach((voucher) => { - voucher.addEventListener('click', (event: Event) => { event.stopPropagation(); - if (isHTMLElement(event.currentTarget)) { - const code = event.currentTarget; - const discountInput = document.querySelector(Theme.selectors.cart.discountName); - const promoCode = document.querySelector(Theme.selectors.cart.promoCode); + const discountInput = document.querySelector(Theme.selectors.cart.discountName); + const promoCode = document.querySelector(Theme.selectors.cart.promoCode); - if (promoCode && discountInput) { - const formCollapser = new Collapse(promoCode); + if (promoCode && discountInput) { + const formCollapser = new Collapse(promoCode, { + toggle: false, + }); - discountInput.value = code.innerText; - // Show promo code field - formCollapser.show(); - } + discountInput.value = voucher.innerText; + // Show promo code field + formCollapser.show(); } - - return false; }); - }); + } + if (cartContainer) { cartContainer.addEventListener('click', (event: Event) => { From efe06c83834e57944ca40abed9e98ddc79c5ad96 Mon Sep 17 00:00:00 2001 From: Tatu Wikman Date: Wed, 12 Mar 2025 13:05:34 +0200 Subject: [PATCH 2/4] some whitespace --- src/js/pages/cart.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/js/pages/cart.ts b/src/js/pages/cart.ts index fa14484e8..d90c37149 100644 --- a/src/js/pages/cart.ts +++ b/src/js/pages/cart.ts @@ -12,7 +12,7 @@ export default () => { const cartContainer = document.querySelector(Theme.selectors.cart.container); const cartSummary = document.querySelector(Theme.selectors.cart.summary); - if(cartSummary) { + if (cartSummary) { cartSummary.addEventListener('click', (event: Event) => { const target = event.target as HTMLElement; @@ -38,7 +38,6 @@ export default () => { }); } - if (cartContainer) { cartContainer.addEventListener('click', (event: Event) => { const eventTarget = event.target as HTMLElement; From de4510c2f7eb420ab19a7da530e76e5553040b6e Mon Sep 17 00:00:00 2001 From: Tatu Wikman Date: Wed, 12 Mar 2025 13:22:42 +0200 Subject: [PATCH 3/4] make remove discount a form (it modifies stuff, it should be a post) --- templates/checkout/_partials/cart-voucher.tpl | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/templates/checkout/_partials/cart-voucher.tpl b/templates/checkout/_partials/cart-voucher.tpl index 3d655a952..b9c8df3ed 100644 --- a/templates/checkout/_partials/cart-voucher.tpl +++ b/templates/checkout/_partials/cart-voucher.tpl @@ -12,11 +12,15 @@
    {foreach from=$cart.vouchers.added item=voucher}
  • - {$voucher.name}
    + {$voucher.name} {$voucher.reduction_formatted} {if isset($voucher.code) && $voucher.code !== ''} - +
    + + + +
    {/if}
    • @@ -24,7 +28,7 @@
{/block} {/if} - +
@@ -36,7 +40,7 @@
{block name='cart_voucher_form'} -
+ From b24e2a04799030eeca6638d740dffffefb7dbe08 Mon Sep 17 00:00:00 2001 From: Tatu Wikman Date: Wed, 12 Mar 2025 14:32:43 +0200 Subject: [PATCH 4/4] bit of refactoring --- src/js/constants/selectors-map.ts | 1 + src/js/pages/cart.ts | 30 ++++++++----------- templates/checkout/_partials/cart-voucher.tpl | 2 +- 3 files changed, 15 insertions(+), 18 deletions(-) diff --git a/src/js/constants/selectors-map.ts b/src/js/constants/selectors-map.ts index 6a71fa224..06dfaba87 100644 --- a/src/js/constants/selectors-map.ts +++ b/src/js/constants/selectors-map.ts @@ -42,6 +42,7 @@ export const cart = { displayPromo: '.display-promo', promoCode: '#promo-code', deleteLinkAction: 'delete-from-cart', + removeVoucherAction: 'remove-voucher', productQuantity: '.cart__items .js-quantity-button', productItem: '.cart__item', removeFromCartLink: '.remove-from-cart', diff --git a/src/js/pages/cart.ts b/src/js/pages/cart.ts index d90c37149..b3217bc7b 100644 --- a/src/js/pages/cart.ts +++ b/src/js/pages/cart.ts @@ -14,26 +14,22 @@ export default () => { if (cartSummary) { cartSummary.addEventListener('click', (event: Event) => { - const target = event.target as HTMLElement; - - // Check if the clicked element is a voucher code or inside one - const voucher = target.closest(Theme.selectors.cart.discountCode); - - if (!voucher || !isHTMLElement(voucher)) return; - - event.stopPropagation(); + const eventTarget = event.target as HTMLElement; + const voucherTarget = eventTarget.closest(Theme.selectors.cart.discountCode); - const discountInput = document.querySelector(Theme.selectors.cart.discountName); - const promoCode = document.querySelector(Theme.selectors.cart.promoCode); + if (voucherTarget && isHTMLElement(voucherTarget)) { + const discountInput = document.querySelector(Theme.selectors.cart.discountName); + const promoCode = document.querySelector(Theme.selectors.cart.promoCode); - if (promoCode && discountInput) { - const formCollapser = new Collapse(promoCode, { - toggle: false, - }); + if (promoCode && discountInput) { + const formCollapser = new Collapse(promoCode, { + toggle: false, + }); - discountInput.value = voucher.innerText; - // Show promo code field - formCollapser.show(); + discountInput.value = voucherTarget.innerText; + // Show promo code field + formCollapser.show(); + } } }); } diff --git a/templates/checkout/_partials/cart-voucher.tpl b/templates/checkout/_partials/cart-voucher.tpl index b9c8df3ed..618e84acd 100644 --- a/templates/checkout/_partials/cart-voucher.tpl +++ b/templates/checkout/_partials/cart-voucher.tpl @@ -16,7 +16,7 @@ {$voucher.name} {$voucher.reduction_formatted} {if isset($voucher.code) && $voucher.code !== ''} - +