diff --git a/assets/left-arrow-vitor-soares.png b/assets/left-arrow-vitor-soares.png new file mode 100644 index 0000000..ef0f194 Binary files /dev/null and b/assets/left-arrow-vitor-soares.png differ diff --git a/assets/left-arrow-vitor-soares.svg b/assets/left-arrow-vitor-soares.svg new file mode 100644 index 0000000..217a30d --- /dev/null +++ b/assets/left-arrow-vitor-soares.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/right-arrow-vitor-soares.png b/assets/right-arrow-vitor-soares.png new file mode 100644 index 0000000..ad6850a Binary files /dev/null and b/assets/right-arrow-vitor-soares.png differ diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 48ad871..6c6a155 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -299,7 +299,7 @@ "props": { "itemsPerPage": { "desktop": 4, - "tablet": 1, + "tablet": 3, "phone": 1 }, "infinite": true, diff --git a/styles/css/vtex.product-summary.css b/styles/css/vtex.product-summary.css index 0a6e420..fca2bdb 100644 --- a/styles/css/vtex.product-summary.css +++ b/styles/css/vtex.product-summary.css @@ -1,42 +1,62 @@ -.skuSelectorContainer--quickview .skuSelectorItemImage .frameAround, .skuSelectorContainer--quickview .skuSelectorItemImage .skuSelectorInternalBox { - border-radius: 50%; -} - -.container :global(.vtex-modal-layout-0-x-triggerContainer) { - opacity: 0; - transition: opacity 200ms ease-in-out; -} - -.container:hover :global(.vtex-modal-layout-0-x-triggerContainer) { - opacity: 1; -} - -@media screen and (max-width: 40em) { - .container :global(.vtex-modal-layout-0-x-triggerContainer) { - display: none; - } -} - -.nameContainer { - justify-content: start; - padding-top: 1rem; - padding-bottom: 1rem; +/* +0 - 600PX: Phone +600 - 900px: Table portrait +900 - 1200px: Tablet landscape +[1200 - 1800] is where our nortal styles apply +1800px + : Big desktop +*/ +/* Media Query M3 */ +/* Fontes */ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap"); +/* Cores */ +/* Grid breakpoints */ +.imageNormal { + width: 314px; + height: 314px; } .brandName { - font-weight: 600; + font-weight: 400; font-size: 18px; - color: #2E2E2E; + line-height: 25px; + color: #000000; } -.container { - text-align: start; +.nameContainer { + padding: 16px 0 8px 0; } -.imageContainer { - text-align: center; +.priceContainer { + padding: 0; +} +.priceContainer .listPriceContainer { + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #bababa; +} +.priceContainer .listPriceContainer::after { + content: "por"; +} +.priceContainer .listPriceContainer .listPrice { + padding: 0 4px 0 0; +} +.priceContainer .sellingPriceLabel { + display: none; +} +.priceContainer .installmentContainer { + display: none; +} +.priceContainer .price_sellingPrice { + font-weight: 700; + font-size: 24px; + line-height: 33px; + color: #000000; +} +.priceContainer .sellingPriceContainer { + padding: 0 0 32px 0; } -.image { - border-radius: 0.25rem; -} +.element { + padding: 0; +} \ No newline at end of file diff --git a/styles/css/vtex.slider-layout.css b/styles/css/vtex.slider-layout.css index 55f431f..281d59a 100644 --- a/styles/css/vtex.slider-layout.css +++ b/styles/css/vtex.slider-layout.css @@ -1,31 +1,59 @@ +/* +0 - 600PX: Phone +600 - 900px: Table portrait +900 - 1200px: Tablet landscape +[1200 - 1800] is where our nortal styles apply +1800px + : Big desktop +*/ +/* Media Query M3 */ +/* Fontes */ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap"); +/* Cores */ +/* Grid breakpoints */ .sliderLayoutContainer { - justify-content: center; + margin-bottom: 64px; + padding: 0 67px; } -.sliderLayoutContainer--carousel { - background-color: #F0F0F0; - min-height: 450px; -} - -.sliderTrackContainer { - max-width: 100%; +.imageContainer { + max-width: 314px; + width: 100%; + height: 314px; + background: #EDEDED; } .paginationDotsContainer { - margin-top: .5rem; - margin-bottom: .5rem; + align-items: center; + gap: 12px; +} +.paginationDotsContainer .paginationDot { + width: 10px; + height: 10px; + background-color: #000000; + margin: 0; } -.layoutContainer--shelf { - margin-top: 20px; - margin-bottom: 20px; - max-width: 96rem; - min-height: 550px; +:global(.vtex-slider-layout-0-x-paginationDot--isActive) { + width: 17px !important; + height: 17px !important; + background-color: #fff !important; + border: 0.5px solid #000000; } -.slide--shelf { - margin-bottom: 25px; - padding-left: .5rem; - padding-right: .5rem; - min-height: 550px; +.sliderRightArrow { + visibility: hidden; } +.sliderRightArrow::after { + visibility: visible; + content: url(https://agenciamagma.vtexassets.com/arquivos/right-arrow-vitor-soares.png); + padding: 0 40px 0 0; +} + +.sliderLeftArrow { + visibility: hidden; +} +.sliderLeftArrow::before { + visibility: visible; + content: url(https://agenciamagma.vtexassets.com/arquivos/left-arrow-vitor-soares.png); + padding: 0 0 0 40px; +} \ No newline at end of file diff --git a/styles/css/vtex.tab-layout.css b/styles/css/vtex.tab-layout.css index 0d3647e..12389a6 100644 --- a/styles/css/vtex.tab-layout.css +++ b/styles/css/vtex.tab-layout.css @@ -51,6 +51,7 @@ background-color: #fff; width: 114px; border: none; + padding: 0; } .listContainer .listItemActive :global(.vtex-button__label) { color: #000000; diff --git a/styles/sass/pages/product/vtex.product-summary.scss b/styles/sass/pages/product/vtex.product-summary.scss new file mode 100644 index 0000000..6e46bb8 --- /dev/null +++ b/styles/sass/pages/product/vtex.product-summary.scss @@ -0,0 +1,60 @@ +.imageNormal { + width: 314px; + height: 314px; +} + +.brandName { + font-weight: 400; + font-size: 18px; + line-height: 25px; + + color: $black; +} + +.nameContainer { + padding: 16px 0 8px 0; +} + +.priceContainer { + padding: 0; + + .listPriceContainer { + font-weight: 400; + font-size: 14px; + line-height: 19px; + + color: $gray-700; + + &::after { + content: "por"; + } + + .listPrice { + padding: 0 4px 0 0; + } + } + + .sellingPriceLabel { + display: none; + } + + .installmentContainer { + display: none; + } + + .price_sellingPrice { + font-weight: 700; + font-size: 24px; + line-height: 33px; + + color: $black; + } + + .sellingPriceContainer { + padding: 0 0 32px 0; + } +} + +.element { + padding: 0; +} diff --git a/styles/sass/pages/product/vtex.slider-layout.scss b/styles/sass/pages/product/vtex.slider-layout.scss new file mode 100644 index 0000000..1cc3f9d --- /dev/null +++ b/styles/sass/pages/product/vtex.slider-layout.scss @@ -0,0 +1,50 @@ +.sliderLayoutContainer { + margin-bottom: 64px; + padding: 0 67px; +} + +.imageContainer { + max-width: 314px; + width: 100%; + height: 314px; + background: $gray-600; +} + +.paginationDotsContainer { + align-items: center; + gap: 12px; + + .paginationDot { + width: 10px; + height: 10px; + background-color: $black; + margin: 0; + } +} + +:global(.vtex-slider-layout-0-x-paginationDot--isActive) { + width: 17px !important; + height: 17px !important; + background-color: $white !important; + border: 0.5px solid $black; +} + +.sliderRightArrow { + visibility: hidden; + + &::after { + visibility: visible; + content: url(https://agenciamagma.vtexassets.com/arquivos/right-arrow-vitor-soares.png); + padding: 0 40px 0 0; + } +} + +.sliderLeftArrow { +visibility: hidden; + + &::before { + visibility: visible; + content: url(https://agenciamagma.vtexassets.com/arquivos/left-arrow-vitor-soares.png); + padding: 0 0 0 40px; + } +} diff --git a/styles/sass/pages/product/vtex.tab-layout.scss b/styles/sass/pages/product/vtex.tab-layout.scss index 5e2f99c..4816103 100644 --- a/styles/sass/pages/product/vtex.tab-layout.scss +++ b/styles/sass/pages/product/vtex.tab-layout.scss @@ -48,6 +48,7 @@ background-color: $white; width: 114px; border: none; + padding: 0; } :global(.vtex-button__label) { diff --git a/styles/sass/utils/_vars.scss b/styles/sass/utils/_vars.scss index e1fc183..5cc7813 100644 --- a/styles/sass/utils/_vars.scss +++ b/styles/sass/utils/_vars.scss @@ -14,6 +14,8 @@ $gray-200: #cccccc; $gray-300: #868686; $gray-400: #bfbfbf; $gray-500: #b9b9b9; +$gray-600: #EDEDED; +$gray-700: #bababa; $color-gray: #6c6c6c;