diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 60b0872..ce6a66c 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -3,11 +3,7 @@ "children": [ "html#breadcrumb", "condition-layout.product#availability", - // "flex-layout.row#description", - // "flex-layout.row#specifications-title", - // "product-specification-group#table", "tab-layout", - // "product-summary.shelf#carousel", "rich-text#carousel", "list-context.product-list#product-carousel", "product-questions-and-answers", @@ -16,6 +12,7 @@ }, // Breadcrumb + "html#breadcrumb": { "props": { "tag": "section", @@ -26,6 +23,7 @@ }, // Produto + "flex-layout.row#specifications-title": { "children": ["rich-text#specifications"] }, @@ -76,6 +74,7 @@ }, // Imagens de produto + "flex-layout.col#stack": { "children": ["stack-layout"], "props": { @@ -86,12 +85,12 @@ "flex-layout.row#product-image": { "children": ["html#product-images"] }, -"html#product-images": { - "children": ["product-images"], - "props": { - "testId": "product-images" - } -}, + "html#product-images": { + "children": ["product-images"], + "props": { + "testId": "product-images" + } + }, "product-images": { "props": { @@ -107,6 +106,7 @@ }, // Especificações de produto + "flex-layout.col#right-col": { "props": { "preventVerticalStretch": true, @@ -118,8 +118,6 @@ "flex-layout.row#selling-price", "product-installments", "html#pix-price", - // "Pix", - // "sku-selector", "html#sku-selector", "html#buy-button", "product-gifts", @@ -151,6 +149,7 @@ }, // Parcelamento + "product-installments": { "props": { "markers": ["discount"], @@ -160,11 +159,12 @@ }, // Quantidade e botão de compra + "html#buy-button": { "props": { "blockClass": "buy-button" }, - "children": [ "html#product-quantity-size", "html#cart-button"] + "children": ["html#product-quantity-size", "html#cart-button"] }, "html#cart-button": { @@ -191,6 +191,7 @@ }, // Produto indisponível + "flex-layout.row#product-availability": { "props": { "colGap": 7, @@ -219,6 +220,7 @@ }, // Formulário produto indisponível + "flex-layout.row#availability": { "props": { "blockClass": "message-availability" @@ -227,6 +229,7 @@ }, // Desconto Pix + "html#pix-price": { "children": ["Pix"], "props": { @@ -235,6 +238,7 @@ }, // Descrição + "tab-layout": { "children": ["tab-list", "tab-content"], "props": { @@ -382,6 +386,7 @@ }, // Prateleira de produtos + "rich-text#carousel": { "props": { "text": "Você também pode gostar:", @@ -419,6 +424,7 @@ }, // Newsletter + "newsletter": { "props": { "label": "Assine nossa newsletter", diff --git a/styles/css/vtex.product-identifier.css b/styles/css/vtex.product-identifier.css index f956e09..a43054f 100644 --- a/styles/css/vtex.product-identifier.css +++ b/styles/css/vtex.product-identifier.css @@ -7,9 +7,6 @@ */ /* Media Query M3 */ /* Grid breakpoints */ -/* .product-identifier--productReference { - margin-bottom: 1rem; -} */ .product-identifier__label { display: none; } diff --git a/styles/css/vtex.product-price.css b/styles/css/vtex.product-price.css index 934c701..6a44c8a 100644 --- a/styles/css/vtex.product-price.css +++ b/styles/css/vtex.product-price.css @@ -19,38 +19,6 @@ margin: 0; } -.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: 0.875rem; -} - -.installments--summary { - margin-bottom: 2rem; - font-size: 0.875rem; -} - .installments { font-size: 16px; line-height: 22px; @@ -61,19 +29,4 @@ .installments .installments-discount, .installments .installmentValue { font-weight: 700; -} - -.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; } \ No newline at end of file diff --git a/styles/css/vtex.product-summary.css b/styles/css/vtex.product-summary.css index b4f3f75..cf16934 100644 --- a/styles/css/vtex.product-summary.css +++ b/styles/css/vtex.product-summary.css @@ -40,19 +40,6 @@ color: #000000; } -:global(.vtex-store-components-3-x-sellingPrice) { - padding: 0; -} -:global(.vtex-store-components-3-x-sellingPrice) :global(.vtex-store-components-3-x-sellingPriceLabel) { - display: none; -} -:global(.vtex-store-components-3-x-sellingPrice) :global(.vtex-store-components-3-x-sellingPriceValue) { - font-weight: 700; - font-size: 24px; - line-height: 33px; - color: #000000; -} - :global(.vtex-store-components-3-x-listPrice) { font-weight: 400; font-size: 14px; @@ -71,6 +58,19 @@ content: " por"; } +:global(.vtex-store-components-3-x-sellingPrice) { + padding: 0; +} +:global(.vtex-store-components-3-x-sellingPrice) :global(.vtex-store-components-3-x-sellingPriceLabel) { + display: none; +} +:global(.vtex-store-components-3-x-sellingPrice) :global(.vtex-store-components-3-x-sellingPriceValue) { + font-weight: 700; + font-size: 24px; + line-height: 33px; + color: #000000; +} + :global(.vtex-slider-layout-0-x-sliderRightArrow) { visibility: hidden; } diff --git a/styles/sass/pages/product/vtex.breadcrumb.scss b/styles/sass/pages/product/vtex.breadcrumb.scss index 6744966..c440bc5 100644 --- a/styles/sass/pages/product/vtex.breadcrumb.scss +++ b/styles/sass/pages/product/vtex.breadcrumb.scss @@ -1,3 +1,5 @@ +// Breadcrumb + .container { padding: 14px 36px; @@ -13,6 +15,8 @@ color: $gray-500; } + // Home + .homeIcon { display: none; } @@ -24,6 +28,8 @@ color: $gray-500; } + // Outros links + .link--1, .link--2 { &::after { diff --git a/styles/sass/pages/product/vtex.product-identifier.scss b/styles/sass/pages/product/vtex.product-identifier.scss index 29581db..313250e 100644 --- a/styles/sass/pages/product/vtex.product-identifier.scss +++ b/styles/sass/pages/product/vtex.product-identifier.scss @@ -1,11 +1,5 @@ -/* .product-identifier--productReference { - margin-bottom: 1rem; -} */ -// .info-availability { -// display: flex; -// align-self: flex-end; -// } +// Código de identificação do produto .product-identifier { diff --git a/styles/sass/pages/product/vtex.product-price.scss b/styles/sass/pages/product/vtex.product-price.scss index 2c98406..60c41dd 100644 --- a/styles/sass/pages/product/vtex.product-price.scss +++ b/styles/sass/pages/product/vtex.product-price.scss @@ -1,13 +1,8 @@ .listPrice { display: none; - // color: #727273; - // margin-bottom: 0.25rem; - // font-size: 1rem; } -// .sellingPrice { -// margin: 0; -// } +// Preço .sellingPriceValue { font-weight: 700; @@ -17,38 +12,8 @@ margin: 0; } -.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: 0.875rem; -} - -.installments--summary { - margin-bottom: 2rem; - font-size: 0.875rem; -} +// Informações de parcelamento .installments { font-size: 16px; @@ -84,18 +49,3 @@ // } // } } - -.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; -} diff --git a/styles/sass/pages/product/vtex.product-quantity.scss b/styles/sass/pages/product/vtex.product-quantity.scss index 82e99fd..2e2e17c 100644 --- a/styles/sass/pages/product/vtex.product-quantity.scss +++ b/styles/sass/pages/product/vtex.product-quantity.scss @@ -1,3 +1,7 @@ +// Quantidade de produtos + +// Botões + :global(.vtex-numeric-stepper__minus-button), :global(.vtex-numeric-stepper__plus-button) { background-color: $white; @@ -8,6 +12,8 @@ border-radius: 0; } +// Botão de - + :global(.vtex-numeric-stepper__minus-button) { border-top: 1px; border-left: 1px; @@ -16,6 +22,8 @@ border-color: $gray-1000; } +// Botão de + + :global(.vtex-numeric-stepper__plus-button) { border-top: 1px; border-right: 1px; @@ -24,6 +32,8 @@ border-color: $gray-1000; } +// Input + :global(.vtex-numeric-stepper__input) { border-top: 1px; border-bottom: 1px; diff --git a/styles/sass/pages/product/vtex.product-summary.scss b/styles/sass/pages/product/vtex.product-summary.scss index 78696d7..d3ffbc5 100644 --- a/styles/sass/pages/product/vtex.product-summary.scss +++ b/styles/sass/pages/product/vtex.product-summary.scss @@ -1,6 +1,7 @@ -// :global(.vtex-slider-layout-0-x-slide--shelf) { -// width: 300px; -// } +// Prateleira de produtos + +// Container + :global(.vtex-slider-layout-0-x-sliderLayoutContainer) { width: 94%; margin: auto; @@ -11,11 +12,15 @@ } } +// Informações de cada produto + :global(.vtex-slider-layout-0-x-slideChildrenContainer) { width: 314px; padding-right: 16px; } +// Imagem do produto + .imageWrapper { height: 314px; display: flex; @@ -23,6 +28,8 @@ align-items: center; } +// Nome do produto + .nameContainer { padding: 0 0 8px; @@ -34,20 +41,7 @@ } } -:global(.vtex-store-components-3-x-sellingPrice) { - padding: 0; - - :global(.vtex-store-components-3-x-sellingPriceLabel) { - display: none; - } - - :global(.vtex-store-components-3-x-sellingPriceValue) { - font-weight: 700; - font-size: 24px; - line-height: 33px; - color: $black; - } -} +// Preço sem desconto :global(.vtex-store-components-3-x-listPrice) { font-weight: 400; @@ -72,6 +66,25 @@ } } +// Preço com desconto + +:global(.vtex-store-components-3-x-sellingPrice) { + padding: 0; + + :global(.vtex-store-components-3-x-sellingPriceLabel) { + display: none; + } + + :global(.vtex-store-components-3-x-sellingPriceValue) { + font-weight: 700; + font-size: 24px; + line-height: 33px; + color: $black; + } +} + +// Arrows + :global(.vtex-slider-layout-0-x-sliderRightArrow) { visibility: hidden; @@ -100,6 +113,8 @@ } } +// Desconto + :global(.vtex-store-components-3-x-discountInsideContainer) { display: none; } diff --git a/styles/sass/pages/product/vtex.rich-text.scss b/styles/sass/pages/product/vtex.rich-text.scss index 153cc80..0c1a292 100644 --- a/styles/sass/pages/product/vtex.rich-text.scss +++ b/styles/sass/pages/product/vtex.rich-text.scss @@ -1,3 +1,5 @@ +// Título da prateleira + .paragraph--carousel-title { font-weight: 400; font-size: 24px; diff --git a/styles/sass/pages/product/vtex.slider-layout.scss b/styles/sass/pages/product/vtex.slider-layout.scss index 8117965..4f1e574 100644 --- a/styles/sass/pages/product/vtex.slider-layout.scss +++ b/styles/sass/pages/product/vtex.slider-layout.scss @@ -1,3 +1,5 @@ +// Dots da prateleira de produtos + .paginationDotsContainer--shelf { align-items: center; bottom: -30px; diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index bd61f7c..845a056 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -1,3 +1,5 @@ +// Produto + .container { padding: 0 40px; margin: 0; @@ -8,6 +10,8 @@ } } +// Nome do produto + .productNameContainer--quickview { font-weight: 300; font-size: 20px; @@ -16,6 +20,8 @@ color: $gray-600; } +// Imagens do produto + .productImageTag--main { max-height: max-content !important; max-width: max-content; @@ -48,10 +54,14 @@ margin-right: 16px; } +// Skus + .skuSelectorContainer { display: flex; flex-direction: column; + // Skus cor + .skuSelectorSubcontainer--cor { order: 2; @@ -97,6 +107,8 @@ } } + // Skus tamanho + .skuSelectorSubcontainer--tamanho { order: 1; @@ -181,6 +193,8 @@ margin: 0 16px 0 0; } +// Código Postal + .shippingContainer { display: flex; @@ -242,6 +256,8 @@ } } + // Não sei meu CEP + :global(.vtex-address-form__postalCode-forgottenURL) { padding: 0; position: relative; @@ -266,6 +282,8 @@ height: fit-content; } +// Informações de entrega + .shippingTable { display: flex; flex-direction: column; @@ -355,6 +373,8 @@ } } +// Formulário de produto indisponível + .subscriberContainer { .title { font-size: 0; @@ -453,6 +473,8 @@ } } +// Newsletter + .newsletter { display: block; background: $black; diff --git a/styles/sass/pages/product/vtex.tab-layout.scss b/styles/sass/pages/product/vtex.tab-layout.scss index 40266d5..c362b3b 100644 --- a/styles/sass/pages/product/vtex.tab-layout.scss +++ b/styles/sass/pages/product/vtex.tab-layout.scss @@ -1,3 +1,5 @@ +// Descrição do produto + :global(.vtex-tab-layout-0-x-container) { padding: 0 40px; margin: 0; @@ -7,12 +9,16 @@ padding: 0; } + // Header descrição do produto + .listContainer--tabList { border-bottom: 1px solid $gray-100; height: 43px; justify-content: space-between; padding: 0 70px; + // Títulos do header da descrição do produto + .listItem { :global(.vtex-button) { &:hover { @@ -38,6 +44,8 @@ } } + // Título ativo do header da descrição do produto + .listItemActive { :global(.vtex-button) { background-color: white; @@ -57,6 +65,8 @@ } } + // Container do conteúdo + :global(.vtex-tab-layout-0-x-contentContainer) { .contentItem { display: flex; @@ -65,10 +75,8 @@ align-items: flex-start; padding: 32px 32px 16px; - // :global(.vtex-store-components-3-x-content) { - // max-width: 100%; + // Imagem do produto - // } .productImagesContainer { width: 50%; max-width: 50%; @@ -81,6 +89,8 @@ // max-width: 872px; } + // Título da descrição do produto + :global(.vtex-rich-text-0-x-heading) { font-weight: 400; font-size: 24px; @@ -89,6 +99,8 @@ margin-top: 0; } + // Texto descrição do produto + :global(.vtex-rich-text-0-x-paragraph) { font-weight: 400; font-size: 16px; diff --git a/styles/sass/utils/_vars.scss b/styles/sass/utils/_vars.scss index 7e8167d..3a1288a 100644 --- a/styles/sass/utils/_vars.scss +++ b/styles/sass/utils/_vars.scss @@ -6,7 +6,7 @@ $gray-50: #868686; $gray-100: #bfbfbf; $gray-200: #b9b9b9; $gray-300: #bababa; -$gray-400: #AFAFAF; +$gray-400: #afafaf; $gray-500: #929292; $gray-600: #575757; $gray-700: #202020; @@ -18,18 +18,18 @@ $black: #000000; /* Grid breakpoints */ $grid-breakpoints: ( - xs: 0, - cstm: 400, - sm: 576px, - md: 768px, - lg: 992px, - xl: 1200px + xs: 0, + cstm: 400, + sm: 576px, + md: 768px, + lg: 992px, + xl: 1200px, ) !default; $z-index: ( - level1: 5, - level2: 10, - level3: 15, - level4: 20, - level5: 25 + level1: 5, + level2: 10, + level3: 15, + level4: 20, + level5: 25, ) !default;