merge with master

packages/Webkul/Velocity/publishable/assets/mix-manifest.json

@@ -1,5 +1,5 @@
 {
-    "/js/velocity.js": "/js/velocity.js?id=23ccbda2da72767600ac",
+    "/js/velocity.js": "/js/velocity.js?id=76a30f28958ea33f7e04",
     "/css/velocity-admin.css": "/css/velocity-admin.css?id=4322502d80a0e4a0affd",
-    "/css/velocity.css": "/css/velocity.css?id=d1461e1147981876a7fd"
+    "/css/velocity.css": "/css/velocity.css?id=2df490c7a6700e2c0c3b"
 }

packages/Webkul/Velocity/src/Resources/assets/js/UI/components/mini-cart.vue

@@ -113,6 +113,7 @@
                 this.$http.delete(`${this.$root.baseUrl}/cart/remove/${productId}`)
                 .then(response => {
                     this.cartItems = this.cartItems.filter(item => item.id != productId);
+                    this.$root.miniCartKey++;
 
                     window.showAlert(`alert-${response.data.status}`, response.data.label, response.data.message);
                 })

packages/Webkul/Velocity/src/Resources/assets/sass/components/app.scss

@@ -2450,14 +2450,22 @@
     width: 800px;
 }
 
-
+/* compare products */
 .compare-products {
     width: 100%;
+    cursor: pointer;
+    overflow-x: auto;
     padding-bottom: 20px;
     word-break: break-word;
     margin-left: 0 !important;
     margin-right: 10px !important;
 
+    .active {
+        cursor: grabbing;
+        cursor: -webkit-grabbing;
+        transform: scale(1);
+    }
+
     tr {
         width: 100%;
     }
@@ -2520,6 +2528,20 @@
     }
 }
 
+/* hide scrollbar for chrome, safari and opera */
+.compare-products::-webkit-scrollbar {
+    display: none;
+}
+
+/* hide scrollbar for ie, edge and firefox */
+.compare-products {
+    /* ie and edge */
+    -ms-overflow-style: none;
+
+    /* firefox */
+    scrollbar-width: none;
+}
+
 //CSS for loader
 .cp-spinner {
     width: 48px;

packages/Webkul/Velocity/src/Resources/views/shop/guest/compare/compare-products.blade.php

@@ -165,6 +165,8 @@
 
             mounted: function () {
                 this.getComparedProducts();
+
+                this.activateSlider();
             },
 
             methods: {
@@ -192,10 +194,6 @@
                         .then(response => {
                             this.isProductListLoaded = true;
 
-                            if (response.data.products.length > 3) {
-                                $('.compare-products').css('overflow-x', 'scroll');
-                            }
-
                             this.products = response.data.products;
                         })
                         .catch(error => {
@@ -286,6 +284,47 @@
                     }
 
                     return attributeOptions;
+                },
+
+                activateSlider: function () {
+                    /* main slider */
+                    const slider = document.querySelector('.compare-products');
+
+                    let startX;
+                    let scrollLeft;
+
+                    /* check for mouse down */
+                    let isMouseDown = false;
+
+                    slider.addEventListener('mousedown', (e) => {
+                        isMouseDown = true;
+                        slider.classList.add('active');
+
+                        startX = e.pageX - slider.offsetLeft;
+                        scrollLeft = slider.scrollLeft;
+                    });
+
+                    slider.addEventListener('mouseleave', () => {
+                        isMouseDown = false;
+                        slider.classList.remove('active');
+                    });
+
+                    slider.addEventListener('mouseup', () => {
+                        isMouseDown = false;
+                        slider.classList.remove('active');
+                    });
+
+                    slider.addEventListener('mousemove', (e) => {
+                        if (! isMouseDown) {
+                            return;
+                        }
+
+                        e.preventDefault();
+
+                        const x = e.pageX - slider.offsetLeft;
+                        const walk = (x - startX) * 3;
+                        slider.scrollLeft = scrollLeft - walk;
+                    });
                 }
             }
         });

packages/Webkul/Velocity/src/Resources/views/shop/products/index.blade.php

@@ -102,7 +102,7 @@
                             style="width: 100%"
                         @endif>
 
-                        <shimmer-component v-if="isLoading && !isMobile()" shimmer-count="4"></shimmer-component>
+                        <shimmer-component v-if="isLoading" shimmer-count="4"></shimmer-component>
 
                         <template v-else-if="products.length > 0">
                             @if ($toolbarHelper->getCurrentMode() == 'grid')