diff --git a/assets/js/theme/common/product-details.js b/assets/js/theme/common/product-details.js index 801176f504..3e18661f85 100644 --- a/assets/js/theme/common/product-details.js +++ b/assets/js/theme/common/product-details.js @@ -409,6 +409,10 @@ export default class ProductDetails extends ProductDetailsBase { .val(waitMessage) .prop('disabled', true); + if (this.context.addToCartEmoji) { + this.addToCartCelebration($addToCartBtn[0], form); + } + this.$overlay.show(); // Add item to cart @@ -583,4 +587,23 @@ export default class ProductDetails extends ProductDetailsBase { detail: { productDetails }, })); } + + addToCartCelebration(el, container) { + try { + // Display celebration emoji + const celebrationEmoji = document.createElement('div'); + celebrationEmoji.innerText = '🎉'; + celebrationEmoji.className = 'celebration-emoji'; + celebrationEmoji.style.top = `${el.offsetTop}px`; + celebrationEmoji.style.left = `${el.offsetLeft + (el.offsetWidth / 2)}px`; + container.appendChild(celebrationEmoji); + + // Remove celebration emoji after a short delay (e.g., 2 seconds) + setTimeout(() => { + celebrationEmoji.remove(); + }, 3500); + } catch (e) { + console.log(e); // eslint-disable-next-line no-console + } + } } diff --git a/assets/scss/components/stencil/productView/_productView.scss b/assets/scss/components/stencil/productView/_productView.scss index 3bade5f856..d0761957c3 100644 --- a/assets/scss/components/stencil/productView/_productView.scss +++ b/assets/scss/components/stencil/productView/_productView.scss @@ -552,3 +552,25 @@ width: auto; } } + +.celebration-emoji { + animation: floatUpAndFade 3s ease-out; + font-size: 28px; + position: absolute; +} + +@keyframes floatUpAndFade { + 0% { + opacity: 1; + transform: translateY(0) scale(1); + } + + 50% { + transform: translateY(-50px) scale(2); + } + + 100% { + opacity: 0; + transform: translateY(-100px) scale(0.5); + } +} diff --git a/config.json b/config.json index 3f6d473206..95f87bf5bd 100644 --- a/config.json +++ b/config.json @@ -782,6 +782,7 @@ "mwn_home_category_block_region": "home_below_featured_products", "mwn_home_category_block_heading": "Holiday Must Haves", "mwn_home_category_block_limit": 12, + "mwn_global_cart_emoji": true, "styled_nav_user_bg": "#314A6D", "pdp_sale_badge_label": "Sale", "show_quick_payment_buttons": false, diff --git a/schema.json b/schema.json index 5ea46e15c1..01abd4fc8e 100644 --- a/schema.json +++ b/schema.json @@ -525,6 +525,11 @@ "type": "text", "label": "Store Hours Heading", "id": "hoursHeading" + }, + { + "type": "checkbox", + "label": "Enable Add to Cart Emoji", + "id": "mwn_global_cart_emoji" } ] }, diff --git a/templates/pages/product.html b/templates/pages/product.html index 20c2821af8..c1b9b2f652 100644 --- a/templates/pages/product.html +++ b/templates/pages/product.html @@ -11,6 +11,7 @@ --- {{inject 'productId' product.id}} {{inject "floatingCartButton" theme_settings.floating_cart_button}} +{{inject "addToCartEmoji" theme_settings.mwn_global_cart_emoji}} {{#partial "page"}}