+1 -1

config.json

reviewed

··· 1 1 { 2 2 - "name": "cart total preview", 2 2 + "name": "cart icon animation", 3 3 "version": "6.10.0", 4 4 "template_engine": "handlebars_v4", 5 5 "meta": {

+42 -2

templates/components/common/navigation.html

reviewed

··· 129 129 href="{{urls.cart}}" 130 130 aria-label="{{lang 'cart.nav_aria_label'}}" 131 131 > 132 132 - <svg><use xlink:href="#icon-cart" /> 132 132 + <svg class="cartIcon"><use xlink:href="#icon-cart" /> 133 133 </svg> 134 134 <p class="pill-container"><span class="countPill cart-quantity"></span><span class="cart-contents"> Items</span></p> 135 135 <span class="navUser-item-cartLabel"></span> ··· 209 209 if (mutation.type === "childList") { 210 210 // if the child node that changed is the cart quantity, update the cart total 211 211 if (mutation.target.classList.contains('countPill')) { 212 212 + document.querySelector('.cartIcon').classList.add('wiggle'); 212 213 getCartTotal().then(formattedTotal => { 213 214 document.querySelector('.navUser-item-cartLabel').textContent = formattedTotal; 214 215 }).catch(error => { 215 216 document.querySelector('.navUser-item-cartLabel').textContent = ''; 216 217 }); 218 218 + setTimeout(() => { 219 219 + document.querySelector('.cartIcon').classList.remove('wiggle'); 220 220 + }, 2000); 217 221 } 218 222 } 219 223 } ··· 225 229 // Start observing the target node for configured mutations 226 230 observer.observe(targetNode, config); 227 231 228 228 - </script> 232 232 + </script> 233 233 + 234 234 + <style> 235 235 + .wiggle { 236 236 + animation: wiggle 2s linear; 237 237 + } 238 238 + 239 239 + @keyframes wiggle { 240 240 + 0%, 7% { 241 241 + transform: rotateZ(0); 242 242 + scale: 1; 243 243 + } 244 244 + 15% { 245 245 + transform: rotateZ(-15deg); 246 246 + } 247 247 + 20% { 248 248 + transform: rotateZ(10deg); 249 249 + } 250 250 + 25% { 251 251 + transform: rotateZ(-10deg); 252 252 + } 253 253 + 30% { 254 254 + transform: rotateZ(6deg); 255 255 + scale: 1.15; 256 256 + } 257 257 + 35% { 258 258 + transform: rotateZ(-4deg); 259 259 + } 260 260 + 40%, 100% { 261 261 + transform: rotateZ(0); 262 262 + } 263 263 + 70% { 264 264 + scale: 1; 265 265 + } 266 266 + 267 267 + } 268 268 + </style>