diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js index 6f979fc..db0621e 100644 --- a/checkout/src/arquivos/js/components/Footer.js +++ b/checkout/src/arquivos/js/components/Footer.js @@ -68,8 +68,14 @@ export default class Footer { } async renderPrateleira() { + if (this.prateleira) { + const prateleiraTitle = document.createElement("h2"); + const titleNode = document.createTextNode("Você também pode gostar:"); + prateleiraTitle.classList.add("prateleira__title"); + prateleiraTitle.appendChild(titleNode); + const prateleiraSlick = document.createElement("ul"); prateleiraSlick.classList.add("prateleira__carousel"); @@ -86,13 +92,17 @@ export default class Footer { console.log(product) const productImageUrl = product.items[0].images[0].imageUrl; - console.log("productImageUrl:", productImageUrl); const productName = product.productName; - console.log("productName:", productName); const productSkus = product.items; - console.log("productSkus:", productSkus); + const productLink = product.link; let skusStructure = ""; + + console.log("productImageUrl:", productImageUrl); + console.log("productName:", productName); + console.log("productSkus:", productSkus); + console.log("productLink:", productLink); + productSkus.forEach((sku) => { console.log("sku:", sku); skusStructure += ` @@ -110,14 +120,17 @@ export default class Footer {

${productName}

- + + +
` }) - prateleiraSlick.innerHTML = cardsStructure; + this.prateleira.appendChild(prateleiraTitle); this.prateleira.appendChild(prateleiraSlick); + prateleiraSlick.innerHTML = cardsStructure; if(window.innerWidth > 1024) { this.addCarrossel(prateleiraSlick); @@ -132,6 +145,7 @@ export default class Footer { $(element).slick({ slidesToShow: 4, slidesToScroll: 1, + infinite: false }); } diff --git a/checkout/src/arquivos/sass/checkout.scss b/checkout/src/arquivos/sass/checkout.scss index 771070c..14b62ba 100644 --- a/checkout/src/arquivos/sass/checkout.scss +++ b/checkout/src/arquivos/sass/checkout.scss @@ -2,4 +2,5 @@ @import "./lib/slick"; @import "./partials/header"; @import "./partials/footer"; +@import "./partials/prateleira"; @import "./checkout/checkout.scss"; diff --git a/checkout/src/arquivos/sass/lib/_slick.scss b/checkout/src/arquivos/sass/lib/_slick.scss index 60f95f6..3c769a0 100644 --- a/checkout/src/arquivos/sass/lib/_slick.scss +++ b/checkout/src/arquivos/sass/lib/_slick.scss @@ -1,8 +1,6 @@ /* Slider */ .slick-slider { - margin: 0; - position: relative; display: block; box-sizing: border-box; @@ -16,11 +14,14 @@ touch-action: pan-y; -webkit-tap-highlight-color: transparent; } + .slick-list { + // height: 100%; + margin: 0 -8px 0 -8px; + position: relative; overflow: hidden; display: block; - margin: 0 -8px 0 -8px; padding: 0; &:focus { @@ -42,6 +43,8 @@ } .slick-track { + // height: 100%; + position: relative; left: 0; top: 0; @@ -65,8 +68,8 @@ } .slick-slide { margin: 0 8px; - // width: 242px; + //código prévio float: left; height: 100%; min-height: 1px; @@ -74,9 +77,11 @@ [dir="rtl"] & { float: right; } + img { display: block; } + &.slick-loading img { display: none; } @@ -101,41 +106,50 @@ border: 1px solid transparent; } } + .slick-arrow { - font-size: 0; position: absolute; + top: 50%; + border: 0; + font-size: 0; + z-index: 4; + transform: translateY(-50%); } + .slick-prev { background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-left-mini-M3Academy.svg") - no-repeat center center; - z-index: 4; + no-repeat center center; left: 10px; + } .slick-next { - z-index: 4; + background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-right-mini-M3Academy.svg") + no-repeat center center; right: 10px; } -.slick-arrow.slick-hidden { - display: none; -} -.slick-dots { - li { - margin: 0.5em; - button { - overflow: hidden; - text-indent: 999999999px; - height: 1em; - width: 1em; - border-radius: 1em; - background-color: #fff; - :focus { - outline: none; - } - } - &.slick-active button { - &:focus { - outline: none; - } - } - } -} + +// .slick-arrow.slick-hidden { +// display: none; +// } + +// .slick-dots { +// li { +// margin: 0.5em; +// button { +// overflow: hidden; +// text-indent: 999999999px; +// height: 1em; +// width: 1em; +// border-radius: 1em; +// background-color: #fff; +// :focus { +// outline: none; +// } +// } +// &.slick-active button { +// &:focus { +// outline: none; +// } +// } +// } +// } diff --git a/checkout/src/arquivos/sass/partials/_footer.scss b/checkout/src/arquivos/sass/partials/_footer.scss index 1b1c50e..153d573 100644 --- a/checkout/src/arquivos/sass/partials/_footer.scss +++ b/checkout/src/arquivos/sass/partials/_footer.scss @@ -9,13 +9,6 @@ // border-top: none; // color: $color-gray2; - &__prateleira { - // margin-top: 101px; - height: 448px; - background-color: green; - width: 100%; - } - &__wrapper { margin: 0; width: 100%; diff --git a/checkout/src/arquivos/sass/partials/_prateleira.scss b/checkout/src/arquivos/sass/partials/_prateleira.scss index 756f5f9..a82e482 100644 --- a/checkout/src/arquivos/sass/partials/_prateleira.scss +++ b/checkout/src/arquivos/sass/partials/_prateleira.scss @@ -1,31 +1,100 @@ /* _prateleira.scss */ .footerCheckout__prateleira { - // estilos no _footer.scss -} + // margin-top: 101px; + height: 448px; + // background-color: green; -.prateleira__carousel { - margin: 0; - list-style-type: none; -} + .prateleira__title { + margin: 0 0 20px; + line-height: 38px; + font-family: $font-family-secundary; + font-size: 24px; + font-weight: 400; + // font-style: normal; + text-align: center; + color: $black-500; + } -.prateleira__item { - width: 242px; - height: 390px; - background: red; + .prateleira__carousel { + // (_slick.scss .slick-slider) + margin: 0; + height: 390px; + } + .prateleira__item { + // height: 100%; + // background: yellow; - &--image-container { - width: 242px; + button { + @include buttonStyle(); + // border: none; + // border-radius: 8px; + // line-height: 18px; + // font-size: 13px; + // font-family: $font-family; + // font-weight: 700; + // color: $color-white; + // background: $blue-300; + // text-align: center; + // text-transform: uppercase; + + // font-style: normal; + // display: flex; + // align-items: center; + // letter-spacing: 0.05em; + } + + &--image { height: 242px; - - img { - width: 242px; - height: 242px; - } } &--description { - background: yellow; + display: flex; + flex-direction: column; + gap: 20px; } + &--name { + margin: 20px 0 0; + font-family: $font-family; + // font-style: normal; + // font-weight: 400; + line-height: 18px; + font-size: 13px; + text-align: center; + color: $black-500; + } + + &--options { + margin: 0 auto; + display: flex; + gap: 5px; + list-style: none; + + button { + padding: 5px; + } + } + + &--link { + button { + width: 100%; + padding: 12px 0; + justify-content: center; + } + } + } } + +// .slick-track { + +// &:nth-child(3) { + +// div li div { +// background: red; +// } +// // &--image-container { +// // //#B1D7F1; +// // } +// } +// } diff --git a/checkout/src/arquivos/sass/utils/_mixin.scss b/checkout/src/arquivos/sass/utils/_mixin.scss index 8d969d6..aec645f 100644 --- a/checkout/src/arquivos/sass/utils/_mixin.scss +++ b/checkout/src/arquivos/sass/utils/_mixin.scss @@ -80,6 +80,24 @@ &::-webkit-input-placeholder { @content; } } +@mixin buttonStyle($width: 100%, $color: #ffffff, $bg-color: #00C8FF) { + border: none; + border-radius: 8px; + line-height: 18px; + font-size: 13px; + font-family: $font-family; + font-weight: 700; + color: $color-white; + background: $blue-300; + text-align: center; + text-transform: uppercase; + + font-style: normal; + display: flex; + align-items: center; + letter-spacing: 0.05em; +} + @mixin hardware($backface: true, $perspective: 1000) { @if $backface { backface-visibility: hidden; diff --git a/checkout/src/arquivos/sass/utils/_variaveis.scss b/checkout/src/arquivos/sass/utils/_variaveis.scss index 1881bf7..d0acab5 100644 --- a/checkout/src/arquivos/sass/utils/_variaveis.scss +++ b/checkout/src/arquivos/sass/utils/_variaveis.scss @@ -8,7 +8,7 @@ $font-family-secundary:"Tenor Sans", sans-serif; $black-300: #292929; $black-500: #000000; -$color-white: #fff; +$color-white: #ffffff; $color-gray-rename: #c4c4c4; $blue-300: #00C8FF;