header cart icon

components/buy/buy.js

@@ -55,6 +55,10 @@ $(document).ready( () => {
         Apis.addToCart(null, pid, selectedQty).then( (data) => {
           console.log(data)
 
+          const headerCart = $('.component-header .cart-cta .counter')
+          if(headerCart.length) {
+            headerCart.text(data.cart.length)
+          }
           modal.fadeIn()
         }).catch( (error) => {
           console.error(error)

components/buy/buy.scss

@@ -233,7 +233,7 @@
 
       .goto,
       .close {
-        @include font-style($font-serif, 'regular', $font-24);
+        @include font-style($font-serif, 'regular', $font-20);
       }
     }
   }
@@ -251,7 +251,7 @@
 
     .add-modal {
       .modal-content {
-        max-width: 700px;
+        max-width: 750px;
       }
     }
   }

components/header/header.html

@@ -6,6 +6,10 @@
       <img class="logo" src="/images/logoHeader.png">
     </a>
 
+    <a href="/carrello" class="cart-cta icon-buy">
+      <span class="counter"><?= count($_SESSION['CART']);?></span>
+    </a>
+
     <button class="hamburger hamburger--spring my-auto">
       <span class="hamburger-box">
         <span class="hamburger-inner"></span>

components/header/header.scss

@@ -27,6 +27,25 @@
       transform: translate(-50%, -50%);
     }
 
+
+    .cart-cta {
+      position: absolute;
+      top: 20px;
+      right: 70px;
+      font-size: $font-34;
+      padding: 0 4px !important;
+      color: $black;
+
+      .counter {
+        position: absolute;
+        left: 50%;
+        top: 14px;
+        transform: translateX(-50%);
+        @include font-style($font-sans, 'semibold', $font-14);
+      }
+    }
+
+
     .hamburger {
       position: absolute;
       top: 20px;