header-responsive

packages/Webkul/Shop/src/Resources/assets/sass/_variables.scss

@@ -1,32 +1,12 @@
 //shop variables
 $font-color: #242424;
+$border-color: #E8E8E8;
 $font-size-base: 16px;
-$font-name: "Montserrat", sans-serif;
-$background-color: #f2f2f2;
-$footer-back: #f2f2f2;
-$list-heading-color: rgba(165, 165, 165, 1);
-$list-color: #242424;
-$subscribe-btn-color: black;
-$logo-color: #0031f0;
 $border-color: #c7c7c7;
-$offer-color: #ff6472;
+$brand-color: #0031f0;
 //shop variables ends here
 
 //customer variables
-$sign-up-text-color: #5e5e5e;
-$login-text: #3a3a3a;
-$background-color: #ffffff;
-$color-black : black;
-$forgot-password-color: #0031f0;
 $profile-content-color: #5e5e5e;
 $horizontal-rule-color: #E8E8E8;
-//customer variables ends here
-
-//product
-$real-price:#A5A5A5;
-$product-font-color: #242424;
-$product-special-price-color:  #FF6472;
-$product-price-color:  #FF6472;
-$dark-blue-shade: #0031F0;
-$bar-color: #D8D8D8;
-$gray-shade: #5E5E5E;
+//customer variables ends here

packages/Webkul/Shop/src/Resources/assets/sass/icons.scss

@@ -53,4 +53,10 @@
     background-image:URL('../images/icon-share.svg');
     width: 24px;
     height: 24px;
+}
+
+.icon-menu-back {
+    background-image:URL('../images/icon-menu-back.svg');
+    width: 24px;
+    height: 24px;
 }

packages/Webkul/Shop/src/Resources/views/layouts/header/index.blade.php

@@ -121,29 +121,9 @@
                 <li class="search-box"><span class="icon search-icon" id="search"></span></li>
                 <li class="account-box"><span class="icon account-icon"></span></li>
                 <li class="cart-box"><span class="icon cart-icon"></span></li>
-                <li class="menu-box" ><span class="icon sortable-icon" id="sortable"></span></li>
+                <li class="menu-box" ><span class="icon sortable-icon" id="hammenu"></span></li>
             </ul>
-        </div>
-    </div>
 
-
-    {{-- Triggered on responsive mode only --}}
-
-    <div class="search-suggestion">
-        <div class="search-content">
-            <span class="icon search-icon"></span>
-            <span> Sarees India  </span>
-            <span class="icon search-icon right"></span>
-        </div>
-
-        <div class="suggestion">
-            <span>Designer sarees</span>
-        </div>
-        <div class="suggestion">
-            <span>India patter sarees</span>
-        </div>
-        <div class="suggestion">
-            <span>Border Sarees</span>
         </div>
     </div>
 
@@ -152,3 +132,53 @@
     </div>
 
 </div>
+
+@push('scripts')
+
+    <script>
+
+        window.onload = function() {
+
+            var hamMenu = document.getElementById("hammenu");
+            var search = document.getElementById("search");
+            var content = document.getElementsByClassName("content-container")[0];
+
+            var searchSuggestion = document.getElementsByClassName('search-suggestion')[0];
+            var headerBottom = document.getElementsByClassName('header-bottom')[0];
+
+            console.log(searchSuggestion);
+
+            //hamMenu.addEventListener("click", header);
+            search.addEventListener("click", header);
+
+            window.addEventListener('scroll', function() {
+
+                console.log(window.pageYOffset);
+
+                if(window.pageYOffset > 70){
+                    headerBottom.style.visibility = "hidden";
+
+                }else{
+                    headerBottom.style.visibility = "visible";
+
+                }
+
+            });
+
+
+            function header(){
+                alert('hello');
+                var className = document.getElementById(this.id).className;
+
+
+                searchSuggestion.style.display = 'block';
+                document.body.style.overflow = 'hidden';
+
+
+
+            }
+        }
+
+    </script>
+
+@endpush

packages/Webkul/Shop/src/Resources/views/layouts/master.blade.php

@@ -35,6 +35,26 @@
 
         </div>
 
+           <div class="search-suggestion">
+
+                <div class="control-group">
+                        <span class="icon search-icon"></span>
+                        <input type="text" class="control" placeholder="Saress India">
+                        <span class="icon icon-menu-back right"></span>
+                    </div>
+
+                    <div class="suggestion">
+                        <span>Designer sarees</span>
+                    </div>
+                    <div class="suggestion">
+                        <span>India patter sarees</span>
+                    </div>
+                    <div class="suggestion">
+                        <span>Border Sarees</span>
+                </div>
+
+            </div>
+
         @include('shop::layouts.footer')
 
     </div>

packages/Webkul/Shop/src/Resources/views/products/index.blade.php

@@ -56,10 +56,10 @@
         var sort = document.getElementById("sort");
         var filter = document.getElementById("filter");
 
-        sort.addEventListener("click", myFunction);
-        filter.addEventListener("click", myFunction);
+        sort.addEventListener("click", filterSort);
+        filter.addEventListener("click", filterSort);
 
-        function myFunction(){
+        function filterSort(){
 
             let className = document.getElementById(this.id).className;
             var productGrid = document.getElementsByClassName('product-grid max-3-col');
@@ -72,11 +72,9 @@
                     filterLayered[i].style.display="block";
                     filterLayered[i].style.padding="20px";
                     filterLayered[i].style.width="100%";
-                    filterLayered[i].style.marginTop = "-100px";
-                }
-                for(let i=0 ; i < productGrid.length ; i++){
-                    productGrid[i].style.display = "none";
+
                 }
+
                 for(let i=0 ; i < sortLimiter.length ; i++){
                     sortLimiter[i].style.display = "none";
                 }
@@ -92,12 +90,10 @@
                 for(let i=0 ; i < filterLayered.length ; i++){
                     filterLayered[i].style.display="none";
                 }
-                for(let i=0 ; i < productGrid.length ; i++){
-                    productGrid[i].style.display = "none";
-                }
                 for(let i=0 ; i < sortLimiter.length ; i++){
                     sortLimiter[i].style.display = "flex";
                     sortLimiter[i].style.justifyContent = "space-between";
+                    sortLimiter[i].style.marginBottom = "20px";
                 }
 
                 sort.classList.remove('icon', 'sort-icon');
@@ -126,6 +122,7 @@
                 filter.classList.add('icon', 'filter-icon');
             }
         }
+
     }
 
 </script>

packages/Webkul/Shop/src/Resources/views/products/list/toolbar.blade.php

@@ -114,4 +114,6 @@
         </select>
     </div>
 
-</div>
+</div>
+
+

packages/Webkul/Shop/src/Resources/views/products/view.blade.php

@@ -78,22 +78,14 @@
 @endsection
 
 
-<style>
-
-    .header {
-        position: sticky;
-        top: 16px;
-    }
-
-</style>
-
-
 @push('scripts')
 
     <script>
 
         window.onscroll = function() {scrollFunction()};
 
+
+
         function scrollFunction() {
 
             var scrollTop = window.pageYOffset
@@ -108,7 +100,7 @@
                 elems.style.display = "block";
             }
 
-            console.log(scrollTop);
+
         }
 
     </script>

packages/Webkul/Shop/src/Resources/views/products/view/gallery.blade.php

@@ -30,7 +30,7 @@
 
             <div class="product-hero-image" id="product-hero-image">
 
-                <img :src="currentLargeImageUrl" />
+                <img :src="currentLargeImageUrl" id="pro-img"/>
 
                 <div class="icon whishlist-icon"> </div>