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 = `
-
+
+
${produto.productName}
+
-
+
`
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;
+ }
+ }
+}