diff --git a/checkout/src/arquivos/js/components/CheckoutUI.js b/checkout/src/arquivos/js/components/CheckoutUI.js index 722e4e3..30281a8 100644 --- a/checkout/src/arquivos/js/components/CheckoutUI.js +++ b/checkout/src/arquivos/js/components/CheckoutUI.js @@ -1,5 +1,5 @@ import { isSmallerThen768 } from "../helpers/MediasMatch"; -import { alterarTamanhoImagemSrcVtex } from "../helpers/vtexUtils"; +import { alterarskuImagemSrcVtex } from "../helpers/vtexUtils"; import waitForEl from "../helpers/waitForEl"; export default class CheckoutUI { @@ -55,7 +55,7 @@ export default class CheckoutUI { resizeImages() { $(".product-image img").each((i, el) => { const $el = $(el); - $el.attr("src", alterarTamanhoImagemSrcVtex($el.attr("src"), this.width, this.height)); + $el.attr("src", alterarskuImagemSrcVtex($el.attr("src"), this.width, this.height)); }); } diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js index 6669709..03829db 100644 --- a/checkout/src/arquivos/js/components/Footer.js +++ b/checkout/src/arquivos/js/components/Footer.js @@ -46,7 +46,7 @@ export default class Footer { let pratileira = this.footerPratileira; pratileira.innerHTML = ` -

Você Também pode gosta:

+

Você também pode gostar:

` @@ -64,16 +64,16 @@ export default class Footer { Imagem -

${produto.productName}

-
+

${produto.productName}

+
${produto.items.map((name) => { - return ` ${name.name} + return ` ${name.name} ` }).join(" ")}
- + ` diff --git a/checkout/src/arquivos/js/helpers/vtexUtils.js b/checkout/src/arquivos/js/helpers/vtexUtils.js index 8fe77c4..79f5557 100644 --- a/checkout/src/arquivos/js/helpers/vtexUtils.js +++ b/checkout/src/arquivos/js/helpers/vtexUtils.js @@ -3,10 +3,10 @@ * @param {string} src url da imagem na VTEX * @param {int} width * @param {int} height - * @return {string} url da imagem com o tamanho alterado + * @return {string} url da imagem com o sku alterado */ -export function alterarTamanhoImagemSrcVtex(src, width, height) { +export function alterarskuImagemSrcVtex(src, width, height) { if (typeof src == "undefined") { console.warn("Parametro 'src' não recebido."); 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 74460fb..9f80852 100644 --- a/checkout/src/arquivos/sass/lib/_slick.scss +++ b/checkout/src/arquivos/sass/lib/_slick.scss @@ -1,5 +1,4 @@ /* Slider */ - .slick-slider { position: relative; display: block; @@ -14,6 +13,7 @@ touch-action: pan-y; -webkit-tap-highlight-color: transparent; } + .slick-list { position: relative; overflow: hidden; @@ -30,6 +30,7 @@ cursor: hand; } } + .slick-slider .slick-track, .slick-slider .slick-list { -webkit-transform: translate3d(0, 0, 0); @@ -61,7 +62,9 @@ visibility: hidden; } } + .slick-slide { + float: left; height: 100%; min-height: 1px; @@ -96,23 +99,37 @@ border: 1px solid transparent; } } + .slick-arrow { font-size: 0; position: absolute; } + .slick-prev { background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-left-mini-M3Academy.svg") no-repeat center center; + border: none; + background-color: transparent; + top: 38%; z-index: 4; - left: 10px; + left: 6px; } + .slick-next { + background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-right-mini-M3Academy.svg") + no-repeat center center; + border: none; + background-color: transparent; + bottom: 57%; + right: 22px; z-index: 4; - right: 10px; + } + .slick-arrow.slick-hidden { display: none; } + .slick-dots { li { margin: 0.5em; diff --git a/checkout/src/arquivos/sass/partials/_menu.scss b/checkout/src/arquivos/sass/partials/_menu.scss index 7dd6104..e69de29 100644 --- a/checkout/src/arquivos/sass/partials/_menu.scss +++ b/checkout/src/arquivos/sass/partials/_menu.scss @@ -1 +0,0 @@ -/* _menu.scss */ diff --git a/checkout/src/arquivos/sass/partials/_prateleira.scss b/checkout/src/arquivos/sass/partials/_prateleira.scss index 13f8def..8f67ef4 100644 --- a/checkout/src/arquivos/sass/partials/_prateleira.scss +++ b/checkout/src/arquivos/sass/partials/_prateleira.scss @@ -1 +1,139 @@ /* _prateleira.scss */ +.footerCheckout { + .container-carrossel-item { + margin: 0 132px; + + @include mq(md, max) { + margin: 0 16px; + } + } + + .slick-slide { + width: 242px; + margin: 0 16px 0 0; + } + + .prateleira-title { + display: flex; + justify-content: center; + font-family: $font-family-secundary; + color: $color-black-500; + margin: 0 0 20px 0; + font-size: 24px; + line-height: 38px; + text-align: center; + + @include mq(xl, min) { + font-family: $font-family-secundary; + color: $color-black-500; + font-size: 48px; + line-height: 76px; + text-align: center; + } + + @include mq(sm, max) { + font-size: 14px; + line-height: 28px + } + } + + .prateleira-sku { + display: flex; + justify-content: center; + margin-bottom: 20px; + + @include mq(sm, max) { + flex-wrap: wrap + } + + + .sku { + display: flex; + font-family: $font-family; + color: $color-white-500; + background: $color-blue-100; + font-weight: 700; + font-size: 13px; + line-height: 18px; + letter-spacing: 0.05em; + + margin-left: 5px; + border-radius: 8px; + min-width: 9.3%; + padding: 4px; + justify-content: center; + align-items: center; + text-align: center; + text-transform: uppercase; + text-decoration: none; + + @include mq(xl, min) { + display: flex; + align-items: center; + text-align: center; + font-family: $font-family; + color: $color-white-500; + font-weight: 700; + font-size: 26px; + line-height: 35px; + letter-spacing: 0.05em; + text-transform: uppercase; + } + + @include mq(sm, max) { + margin-bottom: 10px; + } + } + } + + .prateleira-name { + display: flex; + justify-content: center; + text-align: center; + margin: 20px 0; + + @include mq(xl, min) { + font-family: $font-family; + color: $color-black-500; + font-size: 26px; + line-height: 35px; + text-align: center; + } + + @include mq(sm, max) { + font-size: 13px; + line-height: 18px; + text-align: center; + } + } + + .prateleira-button { + font-family: $font-family; + color: $color-white-500; + background: $color-blue-100; + text-transform: uppercase; + font-size: 13px; + line-height: 18px; + font-weight: 700; + letter-spacing: 0.05em; + margin-bottom: 56px; + width: 100%; + height: 42px; + border: none; + border-radius: 8px; + text-align: center; + align-items: center; + + @include mq(xl, min) { + font-family: $font-family; + color: $color-white-500; + font-weight: 700; + font-size: 26px; + line-height: 35px; + letter-spacing: 0.05em; + align-items: center; + text-align: center; + text-transform: uppercase; + } + } +}