diff --git a/assets/salto-azul.png b/assets/salto-azul.png deleted file mode 100644 index 2093ad2..0000000 Binary files a/assets/salto-azul.png and /dev/null differ diff --git a/store/blocks/home/home.jsonc b/store/blocks/home/home.jsonc index a4776bc..e4ef8a7 100644 --- a/store/blocks/home/home.jsonc +++ b/store/blocks/home/home.jsonc @@ -2,9 +2,9 @@ "store.home": { "blocks": [ "list-context.image-list#demo", - "example-component", /* You can make references to blocks defined in other files. - * For example, `flex-layout.row#deals` is defined in the `deals.json` file. */ - "flex-layout.row#deals", + "example-component", + /* You can make references to blocks defined in other files. + * For example, `flex-layout.row#deals` is defined in the `deals.json` file. */ "flex-layout.row#deals", "__fold__", "rich-text#shelf-title", "flex-layout.row#shelf", @@ -51,9 +51,11 @@ "blockClass": "shelfTitle" } }, + "flex-layout.row#shelf": { "children": ["list-context.product-list#demo1"] }, + "list-context.product-list#demo1": { "blocks": ["product-summary.shelf"], "children": ["slider-layout#demo-products"], @@ -61,12 +63,13 @@ "orderBy": "OrderByTopSaleDESC" } }, + "slider-layout#demo-products": { "props": { "itemsPerPage": { "desktop": 4, "tablet": 3, - "phone": 1 + "phone": 2 }, "infinite": true, "fullWidth": false, diff --git a/store/blocks/pdp/product-description.json b/store/blocks/pdp/product-description.json new file mode 100644 index 0000000..545ad44 --- /dev/null +++ b/store/blocks/pdp/product-description.json @@ -0,0 +1,106 @@ +{ + "html#image-home": { + "props": { + "tag": "div", + "testId": "product-images", + "blockClass": "image-home" + }, + "children": ["html#image-description"] + }, + + "html#product-description": { + "props": { + "testId": "product-description" + }, + "children": ["tab-layout#home"] + }, + + "tab-layout#home": { + "children": ["tab-list#home", "tab-content#home"], + "props": { + "blockClass": "home", + "defaultActiveTabId": "descricao1" + } + }, + + "tab-list#home": { + "children": [ + "tab-list.item#descricao1", + "tab-list.item#descricao2", + "tab-list.item#descricao3", + "tab-list.item#descricao4", + "tab-list.item#descricao5" + ] + }, + + "tab-list.item#descricao1": { + "props": { + "tabId": "descricao1", + "label": "Descrição", + "defaultActiveTab": true + } + }, + + "tab-list.item#descricao2": { + "props": { + "tabId": "descricao2", + "label": "Descrição" + } + }, + + "tab-list.item#descricao3": { + "props": { + "tabId": "descricao3", + "label": "Descrição" + } + }, + + "tab-list.item#descricao4": { + "props": { + "tabId": "descricao4", + "label": "Descrição" + } + }, + + "tab-list.item#descricao5": { + "props": { + "tabId": "descricao5", + "label": "Descrição" + } + }, + + "tab-content#home": { + "children": [ + "tab-content.item#descricao1", + "tab-content.item#descricao2", + "tab-content.item#descricao3", + "tab-content.item#descricao4", + "tab-content.item#descricao5" + ] + }, + + "tab-content.item#descricao1": { + "children": ["html#container-description"], + "props": { "tabId": "descricao1" } + }, + + "tab-content.item#descricao2": { + "children": ["html#container-description"], + "props": { "tabId": "descricao2" } + }, + + "tab-content.item#descricao3": { + "children": ["html#container-description"], + "props": { "tabId": "descricao3" } + }, + + "tab-content.item#descricao4": { + "children": ["html#container-description"], + "props": { "tabId": "descricao4" } + }, + + "tab-content.item#descricao5": { + "children": ["html#container-description"], + "props": { "tabId": "descricao5" } + } +} diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index aa8e6d4..aad97cc 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -2,36 +2,56 @@ "store.product": { "children": [ "html#breadcrumb", - "condition-layout.product#availability", - "flex-layout.row#description", - "flex-layout.row#specifications-title", - "product-specification-group#table", - "shelf.relatedProducts", - "product-questions-and-answers" + "html#availability", + "html#product-description", + "rich-text#slider-text", + "html#list-product", + "product-questions-and-answers", + "flex-layout.row#container-newsletter" ] }, - "html#breadcrumb": { + + "html#list-product": { "props": { - "tag": "section", - "testId": "breadcrumbs", - "blockClass": "pdp-breadcrumb" + "testId": "product-summary-list" }, - "children": ["breadcrumb"] + "children": ["list-context.product-list#container-products"] }, - "flex-layout.row#specifications-title": { - "children": ["rich-text#specifications"] - }, - "rich-text#specifications": { + + "html#slider-layout#demo-products": { "props": { - "text": "##### Product Specifications" - } + "testId": "vtex-product-summary" + }, + "children": ["slider-layout#demo-products"] }, + + "html#container-description": { + "props": { + "tag": "div", + "blockClass": "container-description" + }, + "children": ["flex-layout.row#product-description"] + }, + + "flex-layout.row#product-description": { + "props": { + "blockClass": "product-description" + }, + "children": ["html#image-description", "flex-layout.row#description"] + }, + "flex-layout.row#description": { "props": { "marginBottom": 7 }, "children": ["product-description"] }, + + "html#availability": { + "props": { "testId": "product-images" }, + "children": ["condition-layout.product#availability"] + }, + "condition-layout.product#availability": { "props": { "conditions": [ @@ -50,7 +70,8 @@ "marginTop": 4, "marginBottom": 7, "paddingTop": 7, - "paddingBottom": 7 + "paddingBottom": 7, + "blockClass": "container-main" }, "children": ["flex-layout.col#stack", "flex-layout.col#right-col"] }, @@ -78,46 +99,113 @@ "flex-layout.col#stack": { "children": ["stack-layout"], "props": { - "width": "60%", + "width": "50%", "rowGap": 0 } }, + "flex-layout.row#product-image": { "children": ["product-images"] }, + + "html#image-description": { + "props": { + "tag": "div", + "blockClass": "image-description" + }, + "children": ["product-images#description"] + }, + + "product-images#description": { + "props": { "displayMode": "first-image" } + }, + "product-images": { "props": { "aspectRatio": { "desktop": "auto", - "phone": "16:9" + "phone": "auto" }, - "displayThumbnailsArrows": true + "fullWidth": true, + "displayThumbnailsArrows": false, + "thumbnailsOrientation": "horizontal", + "showPaginationDots": false, + "showNavigationArrows": false } }, + "flex-layout.col#right-col": { "props": { "preventVerticalStretch": true, - "rowGap": 0 + "rowGap": 0, + "blockClass": "description-main" }, "children": [ - "flex-layout.row#product-name", - "product-identifier.product", + "html#product-name", + "html#product-code", "product-rating-summary", - "flex-layout.row#list-price-savings", - "flex-layout.row#selling-price", - "product-installments", - "product-separator", - "sku-selector", - "product-quantity", - "product-assembly-options", + "html#product-price", + "html#product-installments", + "html#pix-discount", + "html#sku-selector", "product-gifts", - "flex-layout.row#buy-button", + "html#buy-button", "availability-subscriber", - "shipping-simulator", - "share#default" + "html#shipping-simulator" ] }, + "html#product-name": { + "props": { + "testId": "product-name" + }, + "children": ["flex-layout.row#product-name"] + }, + + "html#product-code": { + "props": { "testId": "product-code" }, + "children": ["product-identifier.product"] + }, + + "html#product-price": { + "props": { + "testId": "product-price" + }, + "children": ["flex-layout.row#selling-price"] + }, + + "html#product-installments": { + "props": { "testId": "product-installments" }, + "children": ["product-installments#divider"] + }, + + "html#pix-discount": { + "props": { + "tag": "section", + "testId": "pix-price", + "blockClass": "pix-discount" + }, + "children": ["productText-component"] + }, + + "product-installments#divider": { + "props": { + "markers": ["discount"], + "blockClass": "divider", + "message": "{installmentsNumber} x de {installmentValue} sem juros", + "installmentsCriteria": "max-quantity-without-interest" + } + }, + + "html#shipping-simulator": { + "props": { "testId": "shipping-simulator" }, + "children": ["flex-layout.col#shipping-simulator"] + }, + + "flex-layout.col#shipping-simulator": { + "children": ["shipping-simulator"] + }, + "flex-layout.row#product-name": { "props": { "marginBottom": 3 @@ -125,6 +213,13 @@ "children": ["vtex.store-components:product-name"] }, + "html#sku-selector": { + "props": { + "testId": "sku-selector" + }, + "children": ["sku-selector"] + }, + "sku-selector": { "props": { "variationsSpacing": 3, @@ -132,12 +227,20 @@ } }, - "flex-layout.row#buy-button": { + "html#buy-button": { "props": { + "tag": "div", + "testId": "add-to-cart-button", + "blockClass": "buy-button", "marginTop": 4, "marginBottom": 7 }, - "children": ["add-to-cart-button"] + "children": ["html#product-quantity", "add-to-cart-button"] + }, + + "html#product-quantity": { + "props": { "testId": "product-quantity" }, + "children": ["product-quantity"] }, "flex-layout.row#product-availability": { @@ -160,8 +263,8 @@ }, "children": [ "flex-layout.row#product-name", - "product-identifier.product", - "sku-selector", + "html#product-code", + "html#sku-selector", "flex-layout.row#availability" ] }, @@ -172,14 +275,66 @@ "children": ["availability-subscriber"] }, - "share#default": { + "flex-layout.row#container-newsletter": { "props": { - "social": { - "Facebook": true, - "WhatsApp": true, - "Twitter": false, - "Pinterest": true - } + "blockClass": "container-newsletter" + }, + "children": [ + "flex-layout.row#text-newsletter", + "newsletter-form#container-newsletter" + ] + }, + + "flex-layout.row#text-newsletter": { + "props": { + "blockClass": "text-newsletter" + }, + "children": [ + "rich-text#title-newsletter", + "rich-text#email-phrase-newsletter" + ] + }, + + "rich-text#title-newsletter": { + "props": { + "blockClass": "title-newsletter", + "textAlignment": "center", + "textPosition": "CENTER", + "text": "Assine nossa newsletter" + } + }, + + "rich-text#email-phrase-newsletter": { + "props": { + "blockClass": "email-phrase-newsletter", + "textAlignment": "center", + "textPosition": "CENTER", + "text": "Receba ofertas e novidades por e-mail" + } + }, + + "newsletter-form#container-newsletter": { + "props": { + "blockClass": "container-newsletter" + }, + "children": ["html#container-form-input"] + }, + + "html#container-form-input": { + "props": { + "blockClass": "container-form-input" + }, + "children": ["newsletter-input-email", "newsletter-submit"] + }, + + "newsletter-input-email": { + "props": { + "placeholderText": "Digite seu e-mail" + } + }, + "newsletter-submit": { + "props": { + "submitButtonLabel": "Enviar" } } } diff --git a/store/interfaces.json b/store/interfaces.json index c4b2ac4..3312b16 100644 --- a/store/interfaces.json +++ b/store/interfaces.json @@ -5,5 +5,9 @@ "html": { "component": "html", "composition": "children" + }, + "productText-component":{ + "component":"ProductText", + "render":"client" } } diff --git a/styles/css/swiper.container-initialized.css b/styles/css/swiper.container-initialized.css new file mode 100644 index 0000000..eaaca20 --- /dev/null +++ b/styles/css/swiper.container-initialized.css @@ -0,0 +1,12 @@ +/* +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 */ +.swiper-wrapper { + gap: 16px; +} \ No newline at end of file diff --git a/styles/css/vtex.product-identifier.css b/styles/css/vtex.product-identifier.css index 9c81204..e032380 100644 --- a/styles/css/vtex.product-identifier.css +++ b/styles/css/vtex.product-identifier.css @@ -7,6 +7,12 @@ */ /* Media Query M3 */ /* Grid breakpoints */ +@media only screen and (max-width: 1023px) { + .product-identifier { + display: flex; + } +} + .product-identifier__label, .product-identifier__separator { display: none; @@ -15,5 +21,5 @@ .product-identifier__value { display: flex; justify-content: flex-end; - color: rgba(146, 146, 146, 0.4784313725); + color: rgba(146, 146, 146, 0.478); } \ No newline at end of file diff --git a/styles/css/vtex.product-price.css b/styles/css/vtex.product-price.css index 95f4cfe..860d092 100644 --- a/styles/css/vtex.product-price.css +++ b/styles/css/vtex.product-price.css @@ -1,79 +1,52 @@ -.listPrice { - color: #727273; - margin-bottom: .25rem; - font-size: 1rem; -} - -.sellingPrice { - color: #3f3f40; - font-size: 1.25rem; -} - -.sellingPriceValue { - font-size: 2.25rem; - font-weight: 700; +/* +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 */ +.savings { + display: none; } .installments { - color: #727273; - margin-bottom: 1rem; + color: #929292; } -.savings { - font-weight: 500; - color: #79B03A; +.listPrice { + font-family: "Opens Sans", sans-serif; + line-height: 19px; + color: #bababa; + font-size: 14px; +} +.listPrice .listPriceValue::before { + content: "de "; + font-size: 14px; +} +.listPrice .listPriceValue::after { + content: " por"; + font-size: 14px; } -.sellingPriceValue--summary { - font-size: 1.25rem; - font-weight: 600; - color: #2E2E2E; +.installments--divider { + font-family: "Open Sans", sans-serif; + line-height: 21px; + font-size: 16px; + margin-bottom: 8px; } -.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; +.sellingPriceValue { + font-family: "Open Sans", sans-serif; + font-weight: 700; + font-size: 25px; + line-height: 38px; + color: #000; } -.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; -} +.installmentValue { + font-weight: 700; + font-size: 16px; + line-height: 22px; +} \ No newline at end of file diff --git a/styles/css/vtex.product-quantity.css b/styles/css/vtex.product-quantity.css new file mode 100644 index 0000000..50e4a17 --- /dev/null +++ b/styles/css/vtex.product-quantity.css @@ -0,0 +1,53 @@ +/* +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 */ +.quantitySelectorContainer { + margin-bottom: 0; + margin-right: 16px; +} +@media only screen and (max-width: 767px) { + .quantitySelectorContainer { + margin-bottom: 8px; + } +} +.quantitySelectorContainer :global(.vtex-numeric-stepper__input) { + height: 49px; + width: 31px; + font-size: 16px; + line-height: 22px; + border-left: 0; + border-right: 0; + border-top: 1px solid #c4c4c4; + border-bottom: 1px solid #c4c4c4; + color: #929292; +} +.quantitySelectorContainer :global(.vtex-numeric-stepper__plus-button) { + height: 49px; + font-size: 16px; + line-height: 22px; + border-right: 1px solid #c4c4c4; + border-bottom: 1px solid #c4c4c4; + border-top: 1px solid #c4c4c4; + background: #fff; + color: #000; +} +.quantitySelectorContainer :global(.vtex-numeric-stepper__minus-button) { + height: 49px; + width: 10px; + font-size: 16px; + line-height: 22px; + border-left: 1px solid #c4c4c4; + border-bottom: 1px solid #c4c4c4; + border-top: 1px solid #c4c4c4; + background: #fff; + color: #000; +} +.quantitySelectorContainer .quantitySelectorTitle { + display: none; +} \ No newline at end of file diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss new file mode 100644 index 0000000..5d2d524 --- /dev/null +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -0,0 +1,82 @@ +.flexRowContent--container-main { + display: flex; + padding: 0; + @include mq(lg, max) { + padding: 0 40px; + } + @include mq(md, max) { + display: block; + padding: 0; + } + :global(.vtex-flex-layout-0-x-stretchChildrenWidth) { + padding: 0; + @include mq(md, max) { + width: 100% !important; + } + :global(.vtex-flex-layout-0-x-flexCol--description-main) { + margin-left: 32px; + @include mq(md, max) { + margin-left: 0; + } + } + + :global(.vtex-button) { + background-color: $color-black; + border: none; + :global(.vtex-button__label) { + height: fit-content; + :global(.vtex-add-to-cart-button-0-x-buttonDataContainer) { + font-size: 0; + &::after { + font-family: "Open sans", sans-serif; + content: "ADICIONAR À SACOLA"; + font-size: 18px; + font-weight: 400; + line-height: 22px; + } + } + } + } + } +} + +.flexRow--container-price-slider { + display: flex; + justify-content: center; +} + +.flexRowContent--product-description { + @include mq(md, max) { + display: block; + } + :global(.vtex-flex-layout-0-x-stretchChildrenWidth) { + @include mq(md, max) { + width: 100% !important; + display: block; + } + } +} +.flexRow--product-description { + :global(.vtex-store-components-3-x-container) { + @include mq(md, max) { + padding: 0 !important; + margin: 0 !important; + } + } +} +.flexRow--container-newsletter { + margin-top: 64px; + width: 100%; + background-color: $color-black; + .flexRowContent--container-newsletter { + display: flex; + flex-direction: column; + .stretchChildrenWidth { + width: 100% !important; + } + .flexRowContent--text-newsletter { + display: flex; + flex-direction: column; + } + } +} 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..683e0fe --- /dev/null +++ b/styles/sass/pages/product/vtex.product-price.scss @@ -0,0 +1,44 @@ +.savings { + display: none; +} +.installments { + color: $color-gray6; +} + +.listPrice { + font-family: "Opens Sans", sans-serif; + line-height: 19px; + color: $color-gray10; + + font-size: 14px; + .listPriceValue { + &::before { + content: "de "; + font-size: 14px; + } + &::after { + content: " por"; + font-size: 14px; + } + } +} + +.installments--divider { + font-family: "Open Sans", sans-serif; + line-height: 21px; + font-size: 16px; + margin-bottom: 8px; +} + +.sellingPriceValue { + font-family: "Open Sans", sans-serif; + font-weight: 700; + font-size: 25px; + line-height: 38px; + color: $color-black; +} +.installmentValue { + font-weight: 700; + font-size: 16px; + line-height: 22px; +} 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..b441010 --- /dev/null +++ b/styles/sass/pages/product/vtex.product-summary.scss @@ -0,0 +1,11 @@ +.nameContainer { + padding: 16px 0 8px 0; + .productNameContainer { + .productBrand { + font-family: "Open Sans", sans-serif; + font-size: 18px; + font-weight: 400; + line-height: 24px; + } + } +} diff --git a/styles/sass/pages/product/vtex.tab-layout.scss b/styles/sass/pages/product/vtex.tab-layout.scss new file mode 100644 index 0000000..8fd4068 --- /dev/null +++ b/styles/sass/pages/product/vtex.tab-layout.scss @@ -0,0 +1,38 @@ +.container { + margin: 0 40px; + .listContainer { + display: flex; + justify-content: space-around; + border-bottom: 1px solid $color-gray10; + @include mq(md, max) { + display: flex; + flex-direction: column; + } + .listItem { + margin: 0; + padding: 0; + :global(.vtex-button) { + background-color: transparent; + border: none; + color: $color-gray11; + :global(.vtex-button__label) { + font-family: "Open Sans", sans-serif; + font-size: 18px; + line-height: 38px; + font-weight: 400; + text-transform: capitalize; + @include mq(md, max) { + padding-left: 0; + } + &:hover { + color: $color-black; + border-bottom: 1px solid $color-black; + @include mq(md, max) { + border: 0 !important; + } + } + } + } + } + } +} diff --git a/styles/sass/utils/_vars.scss b/styles/sass/utils/_vars.scss index daf3adb..3129c4c 100644 --- a/styles/sass/utils/_vars.scss +++ b/styles/sass/utils/_vars.scss @@ -1,4 +1,5 @@ -$color-black: #292929; +$color-black: #000; +$color-black-100: #292929; $color-white: #fff; @@ -7,6 +8,12 @@ $color-gray2: #7d7d7d; $color-gray3: #f0f0f0; $color-gray4: #c4c4c4; $color-gray5: #e5e5e5; +$color-gray6: #929292; +$color-gray7: #575757; +$color-gray8: #868686; +$color-gray9: #b9b9b9; +$color-gray10: #bababa; +$color-gray11: #bfbfbf; $color-blue: #4267b2; @@ -14,18 +21,18 @@ $color-green: #4caf50; /* Grid breakpoints */ $grid-breakpoints: ( - xs: 0, - cstm: 400, - sm: 576px, - md: 768px, - lg: 992px, - xl: 1200px + xs: 0, + cstm: 375, + sm: 768px, + md: 1024px, + lg: 1920px, + xl: 2500px, ) !default; $z-index: ( - level1: 5, - level2: 10, - level3: 15, - level4: 20, - level5: 25 + level1: 5, + level2: 10, + level3: 15, + level4: 20, + level5: 25, ) !default;