feat: add to cart celebration emoji (#71)

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
+        }
+    }
 }

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);
+    }
+}

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,

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"
       }
     ]
   },

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"}}