Merge pull request #31 from Voog/28_shopping_cart_animations

Add shopping cart icon & animations according to design (#31)
Voog · May 3, 2021 · 15697d6 · 15697d6
2 parents af7e056 + a77172b
commit 15697d6
Show file tree

Hide file tree

Showing 20 changed files with 674 additions and 308 deletions.
diff --git a/components/cart-popover.tpl b/components/cart-popover.tpl
@@ -0,0 +1,13 @@
+<div class="cart_popover-wrap">
+  <div class="cart_popover">
+    <div class="cart_popover-icon">
+      {% include 'ico-cart' %}
+    </div>
+    <div class="cart_popover-content">
+      <div class="cart_popover-content--info">
+        <span class="cart_popover-content--product"></span> {{ "was_added_to_cart" | lc | escape_once }}.
+      </div>
+      <div class="cart_popover-content--view">{{ "view_cart" | lc | escape_once }}</div>
+    </div>
+  </div>
+</div>
diff --git a/components/content-item.tpl b/components/content-item.tpl
@@ -50,7 +50,7 @@
       </div>
     </div>
 
-    {% include 'image_src_variable', _data: _imageData, _targetWidth: _targetWidth %}
+    {% include 'image-src-variable', _data: _imageData, _targetWidth: _targetWidth %}
 
     <div class="item-top{% if blog_listing_page == true or blog_article_page == true %} max-h-464{% endif %}">
       <div class="top-inner aspect-ratio-inner image-drop-area {{ image_crop_state }} js-content-item-img-drop-area js-lazyload"

diff --git a/components/header-fixed.tpl b/components/header-fixed.tpl
@@ -26,7 +26,7 @@
     {% endif %}
 
     <div class="header_components">
-      <div class="header_components-desktop">
+      <div class="header_components-menu--top">
         {% if show_language_menu_popover %}
           <div class="js-menu-language">
             <div class="js-toggle-menu-language menu-language-toggle js-prevent-sideclick p-rel" tabindex=0>
@@ -43,7 +43,12 @@
           <div class="js-prevent-sideclick">{%- include "search-btn" -%}</div>
         {%- endif -%}
       </div>
-      <div class="cart_btn-container"></div>
+      <div class="cart_btn">
+        <div class="cart_btn-icon">
+          {% include 'ico-cart' %}
+        </div>
+        <div class="cart_btn-count"></div>
+      </div>
     </div>
   </div>
 </header>
diff --git a/components/header.tpl b/components/header.tpl
@@ -9,7 +9,8 @@
 
 {%- include 'menu-main-iteration' -%}
 {%- include "site-search" %}
-  {% include 'header-fixed', _menuTop: menuTop -%}
+{% include 'header-fixed', _menuTop: menuTop -%}
+{% include 'cart-popover' %}
 
 {%- if menuSettings.max_width >= 1 -%}
   <style>
@@ -52,7 +53,7 @@
       </button>
 
       {%- if show_language_menu_popover -%}
-        <div class="header_components-tablet"></div>
+        <div class="header_components-semimodal"></div>
       {%- endif -%}
     </div>
 

diff --git a/components/ico-cart.tpl b/components/ico-cart.tpl
@@ -0,0 +1 @@
+<svg fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><g clip-rule="evenodd" fill="#fff" fill-rule="evenodd"><path d="m18.1446 11.8439-.6975 4.1848c-.0008.0049-.0016.0097-.0025.0145-.0988.5434-.6194.9038-1.1628.805l-11.3688-2.0671c-.37461-.0681-.67804-.343-.78264-.7091l-1.82479-6.3868c-.02553-.08934-.03848-.1818-.03848-.27472 0-.55228.44772-1 1-1h13.72581l.6132-2.62795c.1246-.53401.6007-.9118 1.1491-.9118h2.0648c.6517 0 1.18.52826 1.18 1.17992 0 .65165-.5283 1.17991-1.18 1.17991h-1.1285z"/><path d="m6.5 21c-.82843 0-1.5-.6716-1.5-1.5s.67157-1.5 1.5-1.5 1.5.6716 1.5 1.5-.67157 1.5-1.5 1.5zm9 0c-.8284 0-1.5-.6716-1.5-1.5s.6716-1.5 1.5-1.5 1.5.6716 1.5 1.5-.6716 1.5-1.5 1.5z"/></g></svg>
diff --git a/components/image_src_variable.tpl → components/image-src-variable.tpl b/components/image_src_variable.tpl → components/image-src-variable.tpl
diff --git a/components/lazy-image.tpl b/components/lazy-image.tpl
@@ -18,7 +18,7 @@
   {%- assign sizes = '100vw' -%}
 {%- endif -%}
 
-{% include 'image_src_variable', _data: _data, _targetWidth: _maxWidth %}
+{% include 'image-src-variable', _data: _data, _targetWidth: _maxWidth %}
 
 <img class="{% if disableLazyLoad != true %}js-lazyload{% endif %} {{ _className }}"
   data-src="{{_src}}" data-sizes="{{sizes}}" {% if _altAttr != blank %}title="{{_altAttr  | escape_once }}"{ alt="{{_altAttr  | escape_once }}"{% endif %}

diff --git a/components/template-cs-style-rules.tpl b/components/template-cs-style-rules.tpl
@@ -158,35 +158,55 @@ body.dark-background {
   color: var(--third-color);
 }
 
+.search-btn svg path,
 .search-btn svg g,
-.edy-ecommerce-custom-ico svg g,
-.edy-ecommerce-custom-ico svg path {
+.cart_btn svg path,
+.cart_btn svg g {
   fill: var(--header-mainmenu-active-color);
 }
 
 @media screen and (min-width: 900px) {
-  :not(.scroll).dark-background .search-btn svg g, :not(.scroll).dark-background
-  .edy-ecommerce-custom-ico svg g, :not(.scroll).dark-background
-  .edy-ecommerce-custom-ico svg path {
+  :not(.scroll).dark-background .search-btn svg path, :not(.scroll).dark-background
+  .search-btn svg g, :not(.scroll).dark-background
+  .cart_btn svg path, :not(.scroll).dark-background
+  .cart_btn svg g {
     fill: var(--third-color);
   }
 }
 
+.search-btn:hover svg path,
 .search-btn:hover svg g,
-.edy-ecommerce-custom-ico:hover svg g,
-.edy-ecommerce-custom-ico:hover svg path {
+.cart_btn:hover svg path,
+.cart_btn:hover svg g {
   fill: var(--header-mainmenu-color);
 }
 
 @media screen and (min-width: 900px) {
-  :not(.scroll).dark-background .search-btn:hover svg g, :not(.scroll).dark-background
-  .edy-ecommerce-custom-ico:hover svg g, :not(.scroll).dark-background
-  .edy-ecommerce-custom-ico:hover svg path {
+  :not(.scroll).dark-background .search-btn:hover svg path, :not(.scroll).dark-background
+  .search-btn:hover svg g, :not(.scroll).dark-background
+  .cart_btn:hover svg path, :not(.scroll).dark-background
+  .cart_btn:hover svg g {
     opacity: .7;
     fill: var(--third-color);
   }
 }
 
+.cart_btn .cart_btn-count {
+  color: var(--header-mainmenu-active-color);
+}
+
+@media screen and (min-width: 900px) {
+  :not(.scroll).dark-background .cart_btn .cart_btn-count {
+    color: var(--third-color);
+  }
+}
+
+.cart_btn:hover svg path,
+.cart_btn:hover svg g {
+  color: var(--header-mainmenu-color);
+  opacity: .7;
+}
+
 .menu_popover-btn svg path {
   fill: var(--header-mainmenu-color);
 }
@@ -268,16 +288,6 @@ body.dark-background {
   }
 }
 
-.edy-ecommerce-shopping-cart-button:hover .edy-ecommerce-product-count {
-  color: var(--header-mainmenu-color);
-}
-
-@media screen and (min-width: 900px) {
-  :not(.scroll).dark-background .edy-ecommerce-shopping-cart-button:hover .edy-ecommerce-product-count {
-    color: var(--third-color);
-  }
-}
-
 .menu-main .menu .menu-item a {
   color: var(--header-mainmenu-color);
   -webkit-text-decoration: var(--header-mainmenu-decoration);
@@ -494,15 +504,15 @@ body.dark-background {
   fill: var(--third-color);
 }
 
-.dark-background .light-background .header_components-tablet,
+.dark-background .light-background .header_components-semimodal,
 .dark-background .light-background .site_title.content-formatted,
 .dark-background .light-background .semimodal_bottom-content,
 .dark-background .light-background .menu-language-btn,
 .dark-background .light-background .menu-language-name {
   color: var(--header-mainmenu-color);
 }
 
-.dark-background .light-background .header_components-tablet a, .dark-background .light-background .header_components-tablet p, .dark-background .light-background .header_components-tablet h1, .dark-background .light-background .header_components-tablet h2, .dark-background .light-background .header_components-tablet h3, .dark-background .light-background .header_components-tablet h4, .dark-background .light-background .header_components-tablet h5, .dark-background .light-background .header_components-tablet h6,
+.dark-background .light-background .header_components-semimodal a, .dark-background .light-background .header_components-semimodal p, .dark-background .light-background .header_components-semimodal h1, .dark-background .light-background .header_components-semimodal h2, .dark-background .light-background .header_components-semimodal h3, .dark-background .light-background .header_components-semimodal h4, .dark-background .light-background .header_components-semimodal h5, .dark-background .light-background .header_components-semimodal h6,
 .dark-background .light-background .site_title.content-formatted a,
 .dark-background .light-background .site_title.content-formatted p,
 .dark-background .light-background .site_title.content-formatted h1,
@@ -547,14 +557,14 @@ body.dark-background {
 }
 
 .dark-background .light-background .search-btn svg g,
-.dark-background .light-background .edy-ecommerce-custom-ico svg g,
-.dark-background .light-background .edy-ecommerce-custom-ico svg path {
+.dark-background .light-background .cart_btn svg g,
+.dark-background .light-background .cart_btn svg path {
   fill: var(--header-mainmenu-color);
 }
 
 .dark-background .light-background .search-btn:hover svg g,
-.dark-background .light-background .edy-ecommerce-custom-ico:hover svg g,
-.dark-background .light-background .edy-ecommerce-custom-ico:hover svg path {
+.dark-background .light-background .cart_btn:hover svg g,
+.dark-background .light-background .cart_btn:hover svg path {
   fill: var(--header-mainmenu-hover-color);
 }
 
@@ -1063,6 +1073,17 @@ body.dark-background {
   color: var(--third-color);
 }
 
+@media screen and (max-width: 900px) {
+  .content-formatted.header_title, .content-formatted.site_title,
+  .content-formatted .product_item-btn.header_title,
+  .content-formatted .product_item-btn.site_title,
+  .content-formatted p.header_title,
+  .content-formatted p.site_title {
+    font-size: 18px;
+    line-height: 18px;
+  }
+}
+
 @media screen and (max-width: 900px) {
   .dark-background .content-formatted.header_title, .dark-background
   .content-formatted .product_item-btn.header_title, .dark-background

diff --git a/javascripts/global.js b/javascripts/global.js
@@ -685,12 +685,6 @@ MMCQ = (function() {
       }
     }
 
-    $('.js-cart-btn').click(function() {
-      if ($(this).data('product-id')) {
-        Voog.ShoppingCart.addProductById($(this).data('product-id'))
-      }
-    });
-
     var toggleSearch = function() {
       $('html').removeClass('mobilemenu-open');
       $('.js-search').toggleClass('active');
@@ -903,16 +897,80 @@ MMCQ = (function() {
     }
   };
 
-  // ===========================================================================
-  // Builds an inline svg icon for custom shopping cart button.
-  // ===========================================================================
+  var getCartItemsCount = function() {
+    var cartItemsCount = 0;
+    var cartItems = Voog.ShoppingCart.getContents().items;
+
+    for(var i=0; i < cartItems.length; i++){
+      cartItemsCount += parseInt(cartItems[i].quantity);
+    }
+
+    return cartItemsCount;
+  }
+
   var buildCustomShoppingCartIcon = function() {
-    var icoElement = document.createElement('div');
+    // Emitted when the shopping cart button element is added to the DOM.
+    $(document).on('voog:shoppingcart:button:created', function() {
+      if (getCartItemsCount() >= 1) {
+        $('.cart_btn').addClass('visible');
+        $('.cart_btn .cart_btn-count').text(getCartItemsCount());
+      } else {
+        $('.cart_btn').removeClass('visible');
+      }
+
+      $('.js-cart-btn').click(function() {
+        if ($(this).data('product-id')) {
+          Voog.ShoppingCart.addProductById($(this).data('product-id'))
+        }
+      });
+    });
+
+    var handleProductCountChange = function (e, addProduct) {
+      var itemsCount = getCartItemsCount();
+      var counterElement = $('.cart_btn .cart_btn-count');
+      var prevCount = parseInt(counterElement.text()) || 0;
+      var isCartModalOpen = $('.edy-ecommerce-modal-open').length >= 1;
 
-    icoElement.classList.add('edy-ecommerce-custom-ico')
-    icoElement.innerHTML = '<svg fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><g clip-rule="evenodd" fill="#000" fill-rule="evenodd"><path d="m18.1446 11.8439-.6974 4.1848c-.0008.0049-.0017.0097-.0026.0145-.0988.5434-.6193.9038-1.1627.805l-11.36887-2.0671c-.37461-.0681-.67804-.343-.78264-.7091l-1.82479-6.3868c-.02553-.08934-.03848-.1818-.03848-.27472 0-.55228.44772-1 1-1h13.72588l.6132-2.62795c.1246-.53401.6007-.9118 1.149-.9118h2.0649c.6516 0 1.1799.52826 1.1799 1.17992 0 .65165-.5283 1.17991-1.1799 1.17991h-1.1286z"/><path d="m6.5 21c-.82843 0-1.5-.6716-1.5-1.5s.67157-1.5 1.5-1.5 1.5.6716 1.5 1.5-.67157 1.5-1.5 1.5zm9 0c-.8284 0-1.5-.6716-1.5-1.5s.6716-1.5 1.5-1.5 1.5.6716 1.5 1.5-.6716 1.5-1.5 1.5z" opacity=".8"/></g></svg>';
+      if (itemsCount >= 1 || addProduct == true) {
+        if (this.timer != null) {
+          clearTimeout(this.timer);
+        }
+
+        if (itemsCount > prevCount && !isCartModalOpen) {
+          $('.cart_popover-content--product').text(e.detail.product_name);
+          $(':not(body.edy-ecommerce-modal-open) .cart_popover-wrap').addClass('visible');
+
+          this.timer = setTimeout(function () {
+            $('.cart_popover-wrap').removeClass('visible');
+          }, 3000);
+        }
+
+        $('.cart_btn').addClass('visible');
+        counterElement.text(itemsCount);
+      } else {
+        $('.cart_btn').removeClass('visible');
+        counterElement.text('');
+      }
+    }
+
+    // Emitted when a product is removed from the shopping cart
+    $(document).on('voog:shoppingcart:removeproduct', function(e) {
+      handleProductCountChange(e, false);
+    });
+
+    // Emitted when a product's quantity changes
+    $(document).on('voog:shoppingcart:changequantity', function(e) {
+      handleProductCountChange(e, true);
+    });
+
+    // Emitted when a new product is added to the cart
+    $(document).on('voog:shoppingcart:addproduct', function(e) {
+      handleProductCountChange(e, true);
+    });
 
-    $('.cart_btn-container').append($('.edy-ecommerce-shopping-cart-button').append(icoElement));
+    $('.cart_btn, .cart_popover-wrap').click(function() {
+      Voog.ShoppingCart.showCart()
+    });
   };
 
   var initProductListPage = function() {
@@ -992,11 +1050,11 @@ MMCQ = (function() {
       }
 
       if ($('.js-menu-language').length >= 1) {
-        $('.header_components-desktop').prepend($('.js-menu-language'));
+        $('.header_components-menu--top').prepend($('.js-menu-language'));
       }
     } else {
       if ($('.js-menu-language').length >= 1) {
-        $('.header_components-tablet').append($('.js-menu-language'));
+        $('.header_components-semimodal').append($('.js-menu-language'));
       }
     }
   };
@@ -1039,11 +1097,11 @@ MMCQ = (function() {
 
   var handleActivLangMenu = function() {
     if ($( window ).width() >= 900) {
-      $('.header_components-tablet .menu-language-toggle').removeClass('js-toggle-menu-language');
-      $('.header_components-desktop .menu-language-toggle').addClass('js-toggle-menu-language');
+      $('.header_components-semimodal .menu-language-toggle').removeClass('js-toggle-menu-language');
+      $('.header_components-menu--top .menu-language-toggle').addClass('js-toggle-menu-language');
     } else {
-      $('.header_components-desktop .menu-language-toggle').removeClass('js-toggle-menu-language');
-      $('.header_components-tablet .menu-language-toggle').addClass('js-toggle-menu-language');
+      $('.header_components-menu--top .menu-language-toggle').removeClass('js-toggle-menu-language');
+      $('.header_components-semimodal .menu-language-toggle').addClass('js-toggle-menu-language');
     }
   };
   var setBlockColumnsWidth = function() {
@@ -1092,12 +1150,9 @@ MMCQ = (function() {
     handleWindowScroll();
     bindLanguageMenuButttons();
     handleDocument();
+    buildCustomShoppingCartIcon();
     handleBlockColumnsWidth();
 
-    $(document).on('voog:shoppingcart:button:created', function() {
-      buildCustomShoppingCartIcon();
-    });
-
     if (!editmode()) {
       wrapTables();
     }

diff --git a/javascripts/global.min.js b/javascripts/global.min.js