feat(footer): add slick no código

checkout/package-lock.json

@@ -24,6 +24,7 @@
                 "jquery": "^3.6.0",
                 "m3-utils": "^0.1.0",
                 "sass": "^1.38.1",
+                "slick-carousel": "^1.8.1",
                 "terser-webpack-plugin": "^5.1.4"
             },
             "devDependencies": {
@@ -8803,6 +8804,14 @@
             "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
             "dev": true
         },
+        "node_modules/slick-carousel": {
+            "version": "1.8.1",
+            "resolved": "https://registry.npmjs.org/slick-carousel/-/slick-carousel-1.8.1.tgz",
+            "integrity": "sha512-XB9Ftrf2EEKfzoQXt3Nitrt/IPbT+f1fgqBdoxO3W/+JYvtEOW6EgxnWfr9GH6nmULv7Y2tPmEX3koxThVmebA==",
+            "peerDependencies": {
+                "jquery": ">=1.8.0"
+            }
+        },
         "node_modules/snapdragon": {
             "version": "0.8.2",
             "resolved": "https://registry.npmjs.org/snapdragon/-/snapdragon-0.8.2.tgz",
@@ -16954,6 +16963,12 @@
                 }
             }
         },
+        "slick-carousel": {
+            "version": "1.8.1",
+            "resolved": "https://registry.npmjs.org/slick-carousel/-/slick-carousel-1.8.1.tgz",
+            "integrity": "sha512-XB9Ftrf2EEKfzoQXt3Nitrt/IPbT+f1fgqBdoxO3W/+JYvtEOW6EgxnWfr9GH6nmULv7Y2tPmEX3koxThVmebA==",
+            "requires": {}
+        },
         "snapdragon": {
             "version": "0.8.2",
             "resolved": "https://registry.npmjs.org/snapdragon/-/snapdragon-0.8.2.tgz",

checkout/package.json

@@ -24,6 +24,7 @@
         "jquery": "^3.6.0",
         "m3-utils": "^0.1.0",
         "sass": "^1.38.1",
+        "slick-carousel": "^1.8.1",
         "terser-webpack-plugin": "^5.1.4"
     },
     "devDependencies": {

checkout/src/arquivos/js/checkout.js

@@ -1,5 +1,6 @@
 import CheckoutUI from "./components/CheckoutUI";
 import { Container } from "m3-utils";
+import "slick-carousel";
 import Header from "./components/Header";
 import Footer from "./components/Footer";
 

checkout/src/arquivos/js/components/Footer.js

@@ -17,4 +17,11 @@ export default class Footer {
             interval: 1000, // vai verificar a cada 1 segundo se o elemento existe
         });
     }
+    async addCarrossel() {
+        const elemento = await waitElement("#my-element");
+        $(elemento).slick({
+            slidesToShow: 4,
+            slidesToScroll: 1,
+        });
+    }
 }

checkout/src/template-checkout/checkout-footer.html

@@ -2,6 +2,7 @@
     MODIFICA-LO NÃO CAUSARÁ EFEITO ALGUM, todo html que for modificado no footer, deverá ser feito através de javaScript. -->
 
 <footer class="footerCheckout">
+    <div class="footerCheckout__prateleira"></div>
     <div class="footerCheckout__wrapper">
         <div class="footerCheckout__address">
             <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>

package-lock.json

@@ -16,7 +16,8 @@
             ],
             "dependencies": {
                 "@commitlint/cli": "^12.0.1",
-                "@commitlint/config-conventional": "^12.0.1"
+                "@commitlint/config-conventional": "^12.0.1",
+                "slick-carousel": "^1.8.1"
             },
             "devDependencies": {
                 "concurrently": "^6.0.0",
@@ -5715,12 +5716,6 @@
                 "url": "https://github.com/chalk/supports-color?sponsor=1"
             }
         },
-        "checkout/node_modules/jquery": {
-            "version": "3.6.1",
-            "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.6.1.tgz",
-            "integrity": "sha512-opJeO4nCucVnsjiXOE+/PcCgYw9Gwpvs/a6B1LL/lQhwWwpbVEVYDZ1FokFr8PRc7ghYlrFPuyHuiiDNTQxmcw==",
-            "license": "MIT"
-        },
         "checkout/node_modules/js-sdsl": {
             "version": "4.2.0",
             "dev": true,
@@ -13932,6 +13927,11 @@
             "integrity": "sha1-R+Y/evVa+m+S4VAOaQ64uFKcCZo= sha512-Yljz7ffyPbrLpLngrMtZ7NduUgVvi6wG9RJ9IUcyCd59YQ911PBJphODUcbOVbqYfxe1wuYf/LJ8PauMRwsM/g==",
             "dev": true
         },
+        "node_modules/jquery": {
+            "version": "3.6.1",
+            "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.6.1.tgz",
+            "integrity": "sha512-opJeO4nCucVnsjiXOE+/PcCgYw9Gwpvs/a6B1LL/lQhwWwpbVEVYDZ1FokFr8PRc7ghYlrFPuyHuiiDNTQxmcw=="
+        },
         "node_modules/js-tokens": {
             "version": "4.0.0",
             "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -16610,6 +16610,14 @@
                 "node": ">=8"
             }
         },
+        "node_modules/slick-carousel": {
+            "version": "1.8.1",
+            "resolved": "https://registry.npmjs.org/slick-carousel/-/slick-carousel-1.8.1.tgz",
+            "integrity": "sha512-XB9Ftrf2EEKfzoQXt3Nitrt/IPbT+f1fgqBdoxO3W/+JYvtEOW6EgxnWfr9GH6nmULv7Y2tPmEX3koxThVmebA==",
+            "peerDependencies": {
+                "jquery": ">=1.8.0"
+            }
+        },
         "node_modules/slide": {
             "version": "1.1.6",
             "resolved": "https://registry.npmjs.org/slide/-/slide-1.1.6.tgz",
@@ -23260,11 +23268,6 @@
                         }
                     }
                 },
-                "jquery": {
-                    "version": "3.6.1",
-                    "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.6.1.tgz",
-                    "integrity": "sha512-opJeO4nCucVnsjiXOE+/PcCgYw9Gwpvs/a6B1LL/lQhwWwpbVEVYDZ1FokFr8PRc7ghYlrFPuyHuiiDNTQxmcw=="
-                },
                 "js-sdsl": {
                     "version": "4.2.0",
                     "dev": true,
@@ -27794,6 +27797,11 @@
             "integrity": "sha1-R+Y/evVa+m+S4VAOaQ64uFKcCZo= sha512-Yljz7ffyPbrLpLngrMtZ7NduUgVvi6wG9RJ9IUcyCd59YQ911PBJphODUcbOVbqYfxe1wuYf/LJ8PauMRwsM/g==",
             "dev": true
         },
+        "jquery": {
+            "version": "3.6.1",
+            "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.6.1.tgz",
+            "integrity": "sha512-opJeO4nCucVnsjiXOE+/PcCgYw9Gwpvs/a6B1LL/lQhwWwpbVEVYDZ1FokFr8PRc7ghYlrFPuyHuiiDNTQxmcw=="
+        },
         "js-tokens": {
             "version": "4.0.0",
             "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -29840,6 +29848,12 @@
                 "is-fullwidth-code-point": "^3.0.0"
             }
         },
+        "slick-carousel": {
+            "version": "1.8.1",
+            "resolved": "https://registry.npmjs.org/slick-carousel/-/slick-carousel-1.8.1.tgz",
+            "integrity": "sha512-XB9Ftrf2EEKfzoQXt3Nitrt/IPbT+f1fgqBdoxO3W/+JYvtEOW6EgxnWfr9GH6nmULv7Y2tPmEX3koxThVmebA==",
+            "requires": {}
+        },
         "slide": {
             "version": "1.1.6",
             "resolved": "https://registry.npmjs.org/slide/-/slide-1.1.6.tgz",

package.json

@@ -34,6 +34,7 @@
     },
     "dependencies": {
         "@commitlint/cli": "^12.0.1",
-        "@commitlint/config-conventional": "^12.0.1"
+        "@commitlint/config-conventional": "^12.0.1",
+        "slick-carousel": "^1.8.1"
     }
 }