Merge pull request #4274 from devansh-webkul/issue-4265

Fixed compare page for responsive and ability to drag compare product #4265

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

@@ -1,5 +1,5 @@
 {
     "/js/velocity.js": "/js/velocity.js?id=fd91d92b77bfe50ba686",
     "/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/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;
+                    });
                 }
             }
         });