diff --git a/react/components/Html/styles.css b/react/components/Html/styles.css index ee698bf..0c91295 100644 --- a/react/components/Html/styles.css +++ b/react/components/Html/styles.css @@ -8,3 +8,5 @@ [class*="html--pdp-breadcrumb"] { background-color: #fff; } + + diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 16cc1f6..683a37d 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -121,22 +121,37 @@ "children": [ "flex-layout.row#product-name", "flex-layout.row#product-modelo", - "product-rating-summary", + // "product-rating-summary", "flex-layout.row#selling-price", - "flex-layout.row#list-price-savings", - "product-installments", - // "product-separator", + // "flex-layout.row#list-price-savings", + "product-installments#custom", "sku-selector", - "product-quantity", - "product-assembly-options", - "product-gifts", - "flex-layout.row#buy-button", - "availability-subscriber", - "shipping-simulator", - "share#default" + "html#quantidadeEButtonCustom", + // "product-separator", + // "product-quantity", + // "product-assembly-options", + // "product-gifts", + // "flex-layout.row#buy-button", + // "availability-subscriber" + "shipping-simulator" + // "share#default" + ] }, - + "html#quantidadeEButtonCustom":{ + "props": { + "blockClass": "quantidadeEBuy" + }, + "children": ["product-quantity","flex-layout.row#buy-button"] + }, + "product-installments#custom":{ + "props":{ + "blockClass":"divParcelamente", + "markers": ["discount"], + "message": " {installmentsNumber}x de {installmentValue} sem juros ", + "installmentsCriteria":"max-quantity-without-interest" + } + }, "flex-layout.row#product-modelo": { "props": { "blockClass": "divNomeProductModelo" @@ -154,6 +169,7 @@ "sku-selector": { "props": { + "blockClass":"divSku", "variationsSpacing": 3, "showValueNameForImageVariation": true } diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index 3b8d201..e3abf1f 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -23,6 +23,10 @@ } } +.flexRowContent { + margin: 0; +} + .flexRowContent--divProduct { margin-top: 16px; padding: 0px; diff --git a/styles/css/vtex.product-price.css b/styles/css/vtex.product-price.css index 95f4cfe..30969cd 100644 --- a/styles/css/vtex.product-price.css +++ b/styles/css/vtex.product-price.css @@ -1,79 +1,32 @@ -.listPrice { - color: #727273; - margin-bottom: .25rem; - font-size: 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 */ +/* Grid breakpoints */ +.sellingPrice--hasListPrice { + font-family: "Open Sans"; + font-style: normal; + font-weight: 700; + font-size: 25px; + line-height: 38px; + color: #000000; } -.sellingPrice { - color: #3f3f40; - font-size: 1.25rem; +.installments--divParcelamente { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 16px; + line-height: 22px; + color: #929292; } - -.sellingPriceValue { - font-size: 2.25rem; +.installments--divParcelamente .installmentsNumber--divParcelamente { font-weight: 700; } - -.installments { - color: #727273; - margin-bottom: 1rem; -} - -.savings { - font-weight: 500; - color: #79B03A; -} - -.sellingPriceValue--summary { - font-size: 1.25rem; - font-weight: 600; - color: #2E2E2E; -} - -.savings--summary { - background: #8BC34A; - border-radius: 1000px; - align-items: center; - display: flex; - - padding-left: 0.5rem; - padding-right: 0.5rem; - font-size: 0.875rem; - font-weight: 600; - vertical-align: baseline; - color: #FFFFFF; -} - -.savings-discount--summary { - font-size: 0.875rem; - font-weight: 600; - vertical-align: baseline; - color: #FFFFFF; - padding-left: 0.5rem; - padding-right: 0.5rem; -} - -.listPrice--summary { - margin-bottom: 0.25rem; - font-size: .875rem; -} - -.installments--summary { - margin-bottom: 2rem; - font-size: 0.875rem; -} - -.savings--summaryPercentage { - background: #0f3e99; - border-radius: 1000px; - align-items: center; - display: flex; -} - -.savingsPercentage--summaryPercentage { - font-size: 0.875rem; - font-weight: 600; - vertical-align: baseline; - color: #FFFFFF; - padding: 0.25rem 0.5rem 0.25rem 0.5rem; -} +.installments--divParcelamente .currencyContainer--divParcelamente { + font-weight: 700; +} \ No newline at end of file diff --git a/styles/css/vtex.rich-text.css b/styles/css/vtex.rich-text.css index a0a805c..8640de2 100644 --- a/styles/css/vtex.rich-text.css +++ b/styles/css/vtex.rich-text.css @@ -10,6 +10,7 @@ .container--tituloSlick { height: 40px; margin-bottom: 32px; + margin-top: 16px; } @media (min-width: 1024px) { .container--tituloSlick { diff --git a/styles/css/vtex.slider-layout.css b/styles/css/vtex.slider-layout.css index 00a5d35..3533b01 100644 --- a/styles/css/vtex.slider-layout.css +++ b/styles/css/vtex.slider-layout.css @@ -11,6 +11,7 @@ background-color: #fff; margin-left: 40px; margin-right: 40px; + margin-bottom: 105px; } .sliderTrackContainer--carousel .sliderTrack--carousel { gap: 16px; @@ -32,6 +33,10 @@ height: 402.2px; } } -.sliderTrackContainer--carousel .paginationDotsContainer--carousel { - margin-bottom: 105px; +.paginationDotsContainer--carousel .paginationDot--carousel { + background-color: black; +} +.paginationDotsContainer--carousel .paginationDot--carousel--isActive { + background-color: white; + border: 0.5px solid #000000; } \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 0265c43..07123bf 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -116,4 +116,109 @@ .listPrice { padding-top: 0 !important; padding-bottom: 0 !important; +} + +.skuSelectorContainer--divSku { + display: flex; + flex-direction: column; +} +.skuSelectorContainer--divSku .skuSelectorSubcontainer--cor { + order: 2; +} +.skuSelectorContainer--divSku .skuSelectorSubcontainer--cor .skuSelectorName { + font-size: 0; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + line-height: 19px; + color: #929292; +} +.skuSelectorContainer--divSku .skuSelectorSubcontainer--cor .skuSelectorName::after { + display: block; + content: "OUTROS CORES:"; + font-size: 14px; +} +.skuSelectorContainer--divSku .skuSelectorSubcontainer--cor .skuSelectorItem--divSku { + width: 48px; + height: 48px; +} +.skuSelectorContainer--divSku .skuSelectorSubcontainer--cor .skuSelectorItem--divSku .frameAround--divSku { + border-radius: 50%; + width: 48px; + height: 48px; + top: 0; + bottom: 0; + right: 0; + left: 0; +} +.skuSelectorContainer--divSku .skuSelectorSubcontainer--cor .skuSelectorItem--divSku .skuSelectorInternalBox--divSku { + border-radius: 50%; + width: 48px; + height: 48px; +} +.skuSelectorContainer--divSku .skuSelectorSubcontainer--cor .skuSelectorItem--divSku .skuSelectorInternalBox--divSku .skuSelectorItemTextValue--divSku { + padding: 0 !important; +} +.skuSelectorContainer--divSku .skuSelectorSubcontainer--cor .skuSelectorItem--divSku .skuSelectorInternalBox--divSku .absolute { + height: 48px; +} +.skuSelectorContainer--divSku .skuSelectorSubcontainer--cor .skuSelectorNameSeparator { + display: none; +} +.skuSelectorContainer--divSku .skuSelectorSubcontainer--cor .skuSelectorSelectorImageValue { + display: none; +} +.skuSelectorContainer--divSku .skuSelectorSubcontainer--tamanho { + order: 1; + height: 67px; + margin-bottom: 10px !important; +} +.skuSelectorContainer--divSku .skuSelectorSubcontainer--tamanho .skuSelectorName { + font-size: 0; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + line-height: 19px; + color: #929292; +} +.skuSelectorContainer--divSku .skuSelectorSubcontainer--tamanho .skuSelectorName::after { + display: block; + content: "OUTROS TAMANHOS:"; + font-size: 14px; +} +.skuSelectorContainer--divSku .skuSelectorSubcontainer--tamanho .skuSelectorItem--divSku { + width: 40px; + height: 40px; +} +.skuSelectorContainer--divSku .skuSelectorSubcontainer--tamanho .skuSelectorItem--divSku .frameAround--divSku { + border-radius: 50%; + width: 40px; + height: 40px; + top: 0; + bottom: 0; + right: 0; + left: 0; +} +.skuSelectorContainer--divSku .skuSelectorSubcontainer--tamanho .skuSelectorItem--divSku .skuSelectorInternalBox--divSku { + border-radius: 50%; + width: 40px; + height: 40px; +} +.skuSelectorContainer--divSku .skuSelectorSubcontainer--tamanho .skuSelectorItem--divSku .skuSelectorInternalBox--divSku .skuSelectorItemTextValue--divSku { + padding: 0 !important; +} +.skuSelectorContainer--divSku .skuSelectorSubcontainer--tamanho .skuSelectorItem--divSku .skuSelectorInternalBox--divSku .absolute { + height: 40px; +} +.skuSelectorContainer--divSku .skuSelectorSubcontainer--tamanho .skuSelectorItem--divSku .diagonalCross--divSku { + height: 40px; + width: 40px; + border-radius: 50%; + transform: rotate(-90deg); +} +.skuSelectorContainer--divSku .diagonalCross--divSku { + height: 48px; + width: 48px; + border-radius: 50%; + transform: rotate(-90deg); } \ No newline at end of file diff --git a/styles/css/vtex.tab-layout.css b/styles/css/vtex.tab-layout.css index 4687f8c..34abb3b 100644 --- a/styles/css/vtex.tab-layout.css +++ b/styles/css/vtex.tab-layout.css @@ -36,6 +36,7 @@ font-size: 18px; line-height: 38px; color: #bfbfbf; + text-transform: capitalize; } @media (max-width: 1024px) { .container--estrutura .listContainer--Guias .listItem--renderGuia :global(.vtex-button__label) { diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss index f729c33..69dff67 100644 --- a/styles/sass/pages/product/vtex.flex-layout.scss +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -12,6 +12,9 @@ flex-direction: column; } } +.flexRowContent{ + margin: 0; +} .flexRowContent--divProduct { margin-top: 16px; diff --git a/styles/sass/pages/product/vtex.product-price.scss b/styles/sass/pages/product/vtex.product-price.scss new file mode 100644 index 0000000..fcc8ea1 --- /dev/null +++ b/styles/sass/pages/product/vtex.product-price.scss @@ -0,0 +1,23 @@ +.sellingPrice--hasListPrice { + font-family: "Open Sans"; + font-style: normal; + font-weight: 700; + font-size: 25px; + line-height: 38px; + color: #000000; +} + +.installments--divParcelamente { + font-family: 'Open Sans'; + font-style: normal; + font-weight: 400; + font-size: 16px; + line-height: 22px; + color: #929292; + .installmentsNumber--divParcelamente{ + font-weight: 700; + } + .currencyContainer--divParcelamente{ + font-weight: 700; + } +} diff --git a/styles/sass/pages/product/vtex.rich-text.scss b/styles/sass/pages/product/vtex.rich-text.scss index e946be3..b7c96c2 100644 --- a/styles/sass/pages/product/vtex.rich-text.scss +++ b/styles/sass/pages/product/vtex.rich-text.scss @@ -1,6 +1,7 @@ .container--tituloSlick { height: 40px; margin-bottom: 32px; + margin-top: 16px; @media (min-width: 1024px) { margin-bottom: 24px; } diff --git a/styles/sass/pages/product/vtex.slider-layout.scss b/styles/sass/pages/product/vtex.slider-layout.scss index bf2744f..f20863a 100644 --- a/styles/sass/pages/product/vtex.slider-layout.scss +++ b/styles/sass/pages/product/vtex.slider-layout.scss @@ -2,6 +2,7 @@ background-color: $color-white; margin-left: 40px; margin-right: 40px; + margin-bottom: 105px; .sliderTrack--carousel { gap: 16px; } @@ -27,11 +28,13 @@ } } - .paginationDotsContainer--carousel { - margin-bottom: 105px; - .paginationDot--carousel { - } - .paginationDot--carousel--isActive { - } +} +.paginationDotsContainer--carousel { + .paginationDot--carousel { + background-color: black; + } + .paginationDot--carousel--isActive { + background-color: white; + border: 0.5px solid #000000; } } diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 8f024ff..dc041bd 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -94,7 +94,112 @@ } } -.listPrice{ +.listPrice { padding-top: 0 !important; padding-bottom: 0 !important; } + +.skuSelectorContainer--divSku { + display: flex; + flex-direction: column; + .skuSelectorSubcontainer--cor { + order: 2; + .skuSelectorName { + font-size: 0; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + line-height: 19px; + color: #929292; + &::after { + display: block; + content: "OUTROS CORES:"; + font-size: 14px; + } + } + .skuSelectorItem--divSku { + width: 48px; + height: 48px; + .frameAround--divSku { + border-radius: 50%; + width: 48px; + height: 48px; + top: 0; + bottom: 0; + right: 0; + left: 0; + } + .skuSelectorInternalBox--divSku { + border-radius: 50%; + width: 48px; + height: 48px; + .skuSelectorItemTextValue--divSku { + padding: 0 !important; + } + .absolute { + height: 48px; + } + } + } + .skuSelectorNameSeparator { + display: none; + } + .skuSelectorSelectorImageValue { + display: none; + } + } + .skuSelectorSubcontainer--tamanho { + order: 1; + height: 67px; + margin-bottom: 10px !important; + .skuSelectorName { + font-size: 0; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + line-height: 19px; + color: #929292; + &::after { + display: block; + content: "OUTROS TAMANHOS:"; + font-size: 14px; + } + } + .skuSelectorItem--divSku { + width: 40px; + height: 40px; + .frameAround--divSku { + border-radius: 50%; + width: 40px; + height: 40px; + top: 0; + bottom: 0; + right: 0; + left: 0; + } + .skuSelectorInternalBox--divSku { + border-radius: 50%; + width: 40px; + height: 40px; + .skuSelectorItemTextValue--divSku { + padding: 0 !important; + } + .absolute { + height: 40px; + } + } + .diagonalCross--divSku { + height: 40px; + width: 40px; + border-radius: 50%; + transform: rotate(-90deg); + } + } + } + .diagonalCross--divSku { + height: 48px; + width: 48px; + border-radius: 50%; + transform: rotate(-90deg); + } +} diff --git a/styles/sass/pages/product/vtex.tab-layout.scss b/styles/sass/pages/product/vtex.tab-layout.scss index 96ff759..f71d816 100644 --- a/styles/sass/pages/product/vtex.tab-layout.scss +++ b/styles/sass/pages/product/vtex.tab-layout.scss @@ -22,6 +22,7 @@ font-size: 18px; line-height: 38px; color: #bfbfbf; + text-transform: capitalize; } :global(.vtex-button__label) { @media (max-width: 1024px) {