diff --git a/react/components/Html/styles.css b/react/components/Html/styles.css index 48ed5be..4b5f433 100644 --- a/react/components/Html/styles.css +++ b/react/components/Html/styles.css @@ -1,7 +1,3 @@ -/* [class*="html--product-images"] { - background-color: red; -} */ - [class*="html--pix-price"] { display: flex; align-items: flex-end; @@ -9,3 +5,8 @@ margin-top: 8px; margin-bottom: 16px; } + +[data-testid="vtex-product-summary"] { + display: flex; + flex-direction: column; +} diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index cef479d..196d1ca 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -4,10 +4,8 @@ "html#breadcrumb", "condition-layout.product#availability", "html#tab-layout", - "flex-layout.row#specifications-title", - "product-specification-group#table", - "shelf.relatedProducts", - "product-questions-and-answers" + "html#shelf-container", + "newsletter" ] }, "html#breadcrumb": { @@ -122,15 +120,6 @@ "children": ["product-images", "product-description"] }, - "flex-layout.row#specifications-title": { - "children": ["rich-text#specifications"] - }, - "rich-text#specifications": { - "props": { - "text": "##### Product Specifications" - } - }, - "condition-layout.product#availability": { "props": { "conditions": [ @@ -266,7 +255,7 @@ "flex-layout.col#right-col-availability" ] }, - + "flex-layout.col#right-col-availability": { "props": { "width": "50%", @@ -297,5 +286,47 @@ "Pinterest": true } } + }, + + "html#shelf-container": { + "props": { + "blockClass": "shelf-container" + }, + "children": ["rich-text#see-also", "list-context.product-list"] + }, + + "rich-text#see-also": { + "props": { + "text": "#### Você também pode gostar:", + "blockClass": "see-also" + } + }, + + "list-context.product-list": { + "blocks": ["product-summary.shelf"], + "children": ["html#slider"] + }, + + "html#slider": { + "props": { + "testId": "product-summary-list" + }, + "children": ["slider-layout#related-products"] + }, + + "slider-layout#related-products": { + "props": { + "itemsPerPage": { + "desktop": 4, + "tablet": 3, + "phone": 2 + }, + "infinite": true, + "showNavigationArrows": "always", + "blockClass": "carousel" + // "fullWidth": false + } + // , + // "children": ["rich-text#1", "rich-text#2", "rich-text#3"] } } diff --git a/store/blocks/product-summary/product-summary.jsonc b/store/blocks/product-summary/product-summary.jsonc index afabee3..1910c85 100644 --- a/store/blocks/product-summary/product-summary.jsonc +++ b/store/blocks/product-summary/product-summary.jsonc @@ -1,16 +1,20 @@ { "product-summary.shelf": { + "children": ["html#shelf"] + }, + + "html#shelf": { + "props": { + "testId": "vtex-product-summary" + }, "children": [ - "stack-layout#prodsum", + "product-summary-image#shelf", "product-summary-name", - "flex-layout.col#productRating", - "product-summary-space", "product-list-price#summary", - "flex-layout.row#selling-price-savings", - "product-installments#summary", - "add-to-cart-button" + "product-selling-price#summary" ] }, + "flex-layout.col#productRating": { "props": { "blockClass": "productRating" @@ -18,19 +22,11 @@ "children": ["product-rating-inline"] }, - "stack-layout#prodsum": { - "children": [ - "product-summary-image#shelf", - "vtex.product-highlights@2.x:product-highlights#collection", - "modal-trigger#quickview" // Check quickview.jsonc - ] - }, - "product-summary-image#shelf": { "props": { "showBadge": false, "aspectRatio": "1:1", - "maxHeight": 300 + "maxHeight": 1000 } }, @@ -54,21 +50,11 @@ "product-list-price#summary": { "props": { - "blockClass": "summary" + "blockClass": "summary", + "message": "de {listPriceValue} por" } }, - "flex-layout.row#selling-price-savings": { - "props": { - "colGap": 2, - "preserveLayoutOnMobile": true, - "preventHorizontalStretch": true, - "marginBottom": 4 - }, - "children": [ - "product-selling-price#summary", - "product-price-savings#summary" - ] - }, + "product-installments#summary": { "props": { "blockClass": "summary" @@ -81,9 +67,7 @@ }, "product-price-savings#summary": { "props": { - "markers": [ - "discount" - ], + "markers": ["discount"], "blockClass": "summary" } } diff --git a/styles/css/vtex.product-price.css b/styles/css/vtex.product-price.css index f5ca2e0..ac2cfe2 100644 --- a/styles/css/vtex.product-price.css +++ b/styles/css/vtex.product-price.css @@ -30,4 +30,33 @@ font-weight: 300; font-size: 13px; color: #929292; +} + +/* ----- SHELF ----- */ +.listPrice--summary { + font-size: 14px; + line-height: 19px; + text-decoration-line: line-through; + color: #bababa; +} +@media only screen and (max-width: 1024px) { + .listPrice--summary { + font-size: 12px; + line-height: 16px; + } +} + +.sellingPrice--summary { + padding-top: 8px; +} +.sellingPrice--summary .sellingPriceValue--summary { + font-size: 24px; + line-height: 33px; + color: #000000; +} +@media only screen and (max-width: 1024px) { + .sellingPrice--summary .sellingPriceValue--summary { + font-size: 18px; + line-height: 25px; + } } \ No newline at end of file diff --git a/styles/css/vtex.product-summar.css b/styles/css/vtex.product-summar.css new file mode 100644 index 0000000..1fe7011 --- /dev/null +++ b/styles/css/vtex.product-summar.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 */ +.nameContainer { + background-color: pink; +} \ No newline at end of file diff --git a/styles/css/vtex.product-summary.css b/styles/css/vtex.product-summary.css index 0a6e420..6c48321 100644 --- a/styles/css/vtex.product-summary.css +++ b/styles/css/vtex.product-summary.css @@ -1,42 +1,56 @@ -.skuSelectorContainer--quickview .skuSelectorItemImage .frameAround, .skuSelectorContainer--quickview .skuSelectorItemImage .skuSelectorInternalBox { - border-radius: 50%; +/* +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 */ +.container { + margin: 0; + border-radius: 0; + max-width: 1000px !important; } - -.container :global(.vtex-modal-layout-0-x-triggerContainer) { - opacity: 0; - transition: opacity 200ms ease-in-out; +.container .element { + padding: 0 8px; } - -.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; +@media only screen and (max-width: 1024px) { + .container .element { + padding: 0 6px; } } - -.nameContainer { - justify-content: start; - padding-top: 1rem; - padding-bottom: 1rem; +@media only screen and (max-width: 639px) { + .container .element { + padding: 0 4px; + } } - -.brandName { - font-weight: 600; +.container .element .imageContainer { + width: 100%; +} +.container .element .imageContainer .image { + object-fit: cover !important; +} +.container .element .nameContainer { + padding: 16px 16px 8px; +} +@media only screen and (max-width: 1024px) { + .container .element .nameContainer { + padding: 16px 8px 8px; + } +} +.container .element .nameContainer .productBrand { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; font-size: 18px; - color: #2E2E2E; -} - -.container { - text-align: start; -} - -.imageContainer { + line-height: 25px; text-align: center; + color: #000000; } - -.image { - border-radius: 0.25rem; -} +@media only screen and (max-width: 1024px) { + .container .element .nameContainer .productBrand { + font-size: 14px; + line-height: 19px; + } +} \ No newline at end of file diff --git a/styles/css/vtex.rich-text.css b/styles/css/vtex.rich-text.css index 34c4328..8347a37 100644 --- a/styles/css/vtex.rich-text.css +++ b/styles/css/vtex.rich-text.css @@ -6,4 +6,26 @@ 1800px + : Big desktop */ /* Media Query M3 */ -/* Grid breakpoints */ \ No newline at end of file +/* Grid breakpoints */ +.container--see-also { + justify-content: center; +} +.container--see-also .headingLevel4 { + margin: 16px 0 32px; + font-size: 24px; + line-height: 38px; + color: #575757; +} +@media only screen and (max-width: 1024px) { + .container--see-also .headingLevel4 { + margin-bottom: 24px; + } +} +@media only screen and (max-width: 639px) { + .container--see-also .headingLevel4 { + margin-bottom: 16px; + padding: 0 40px; + text-align: center; + font-size: 20px; + } +} \ No newline at end of file diff --git a/styles/css/vtex.slider-layout.css b/styles/css/vtex.slider-layout.css index 55f431f..b056f1a 100644 --- a/styles/css/vtex.slider-layout.css +++ b/styles/css/vtex.slider-layout.css @@ -1,31 +1,85 @@ -.sliderLayoutContainer { - justify-content: center; -} - +/* +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 */ .sliderLayoutContainer--carousel { - background-color: #F0F0F0; - min-height: 450px; + padding: 0 59.2px 113px; } - -.sliderTrackContainer { - max-width: 100%; +@media only screen and (min-width: 1920px) { + .sliderLayoutContainer--carousel { + padding: 0 379.2px 113px; + } } - -.paginationDotsContainer { - margin-top: .5rem; - margin-bottom: .5rem; +@media only screen and (max-width: 1024px) { + .sliderLayoutContainer--carousel { + padding: 0 57.2px 105px; + } } - -.layoutContainer--shelf { - margin-top: 20px; - margin-bottom: 20px; - max-width: 96rem; - min-height: 550px; +@media only screen and (max-width: 639px) { + .sliderLayoutContainer--carousel { + padding: 0 55.2px 65px; + } } - -.slide--shelf { - margin-bottom: 25px; - padding-left: .5rem; - padding-right: .5rem; - min-height: 550px; +.sliderLayoutContainer--carousel .sliderArrows { + padding: 0; + margin: 0; } +.sliderLayoutContainer--carousel .sliderArrows.sliderLeftArrow { + margin-left: 40px; +} +@media only screen and (min-width: 1920px) { + .sliderLayoutContainer--carousel .sliderArrows.sliderLeftArrow { + margin-left: 360px; + } +} +.sliderLayoutContainer--carousel .sliderArrows.sliderLeftArrow::before { + content: ""; + width: 11.2px; + height: 29.6px; + background-image: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-left-andreamm.svg"); +} +.sliderLayoutContainer--carousel .sliderArrows.sliderRightArrow { + margin-right: 40px; +} +@media only screen and (min-width: 1920px) { + .sliderLayoutContainer--carousel .sliderArrows.sliderRightArrow { + margin-right: 360px; + } +} +.sliderLayoutContainer--carousel .sliderArrows.sliderRightArrow::after { + content: ""; + width: 11.2px; + height: 29.6px; + background-image: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-right-andreamm.svg"); +} +.sliderLayoutContainer--carousel .sliderArrows .caretIcon { + display: none; +} +.sliderLayoutContainer--carousel .paginationDotsContainer { + bottom: 64px; + gap: 12px; + align-items: center; +} +@media only screen and (max-width: 639px) { + .sliderLayoutContainer--carousel .paginationDotsContainer { + bottom: 32px; + } +} +.sliderLayoutContainer--carousel .paginationDotsContainer .paginationDot { + width: 10px; + height: 10px; + margin: 0; + padding: 0; + background: #000000; +} +.sliderLayoutContainer--carousel .paginationDotsContainer .paginationDot--isActive { + width: 17px !important; + height: 17px !important; + border: 0.5px solid #000000; + background: #ffffff; +} \ 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 index 0e9679d..7617ab3 100644 --- a/styles/sass/pages/product/vtex.flex-layout.scss +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -15,14 +15,6 @@ width: 100% !important; } } - - // @include mq(md, max) - // @media only screen and (max-width: 639px) { - // :global(.vtex-store-components-3-x-productImagesContainer--carousel) { - // background-color: blue; - // margin-bottom: 32px; - // } - // } } /* ----- RIGHT-COL ----- */ diff --git a/styles/sass/pages/product/vtex.product-price.scss b/styles/sass/pages/product/vtex.product-price.scss index 4800500..44ba42d 100644 --- a/styles/sass/pages/product/vtex.product-price.scss +++ b/styles/sass/pages/product/vtex.product-price.scss @@ -26,3 +26,40 @@ font-size: 13px; color: #929292; } + +/* ----- SHELF ----- */ +.listPrice--summary { + // background-color: red; + // font-family: "Open Sans"; + // font-style: normal; + // font-weight: 400; + font-size: 14px; + line-height: 19px; + // text-align: center; + text-decoration-line: line-through; + color: #bababa; + + @include mq(lg, max) { + font-size: 12px; + line-height: 16px; + } +} + +.sellingPrice--summary { + padding-top: 8px; + // background-color: white; + + .sellingPriceValue--summary { + // font-family: "Open Sans"; + // font-style: normal; + // font-weight: 700; + font-size: 24px; + line-height: 33px; + color: #000000; + + @include mq(lg, max) { + font-size: 18px; + line-height: 25px; + } + } +} 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..b0ea4b4 --- /dev/null +++ b/styles/sass/pages/product/vtex.product-summary.scss @@ -0,0 +1,54 @@ +.container { + // background-color: green; + margin: 0; + border-radius: 0; + + max-width: 1000px !important; + + .element { + padding: 0 8px; + + @include mq(lg, max) { + padding: 0 6px; + } + + @include mq(md, max) { + padding: 0 4px; + } + + .imageContainer { + // background: #ededed; + // background-color: yellow; + width: 100%; + + .image { + // background: #ededed; + object-fit: cover !important; + // background-color: red; + } + } + + .nameContainer { + padding: 16px 16px 8px; + + @include mq(lg, max) { + padding: 16px 8px 8px; + } + + .productBrand { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 25px; + text-align: center; + color: #000000; + + @include mq(lg, max) { + font-size: 14px; + line-height: 19px; + } + } + } + } +} diff --git a/styles/sass/pages/product/vtex.rich-text.scss b/styles/sass/pages/product/vtex.rich-text.scss index e69de29..8163d04 100644 --- a/styles/sass/pages/product/vtex.rich-text.scss +++ b/styles/sass/pages/product/vtex.rich-text.scss @@ -0,0 +1,23 @@ +.container--see-also { + justify-content: center; + + .headingLevel4 { + margin: 16px 0 32px; + // font-family: "Open Sans"; + // font-weight: 400; + font-size: 24px; + line-height: 38px; + color: #575757; + + @include mq(lg, max) { + margin-bottom: 24px; + } + + @include mq(md, max) { + margin-bottom: 16px; + padding: 0 40px; + text-align: center; + font-size: 20px; + } + } +} 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..75700d5 --- /dev/null +++ b/styles/sass/pages/product/vtex.slider-layout.scss @@ -0,0 +1,82 @@ +.sliderLayoutContainer--carousel { + // background-color: aqua; + padding: 0 59.2px 113px; + + @include mq(xl, min) { + padding: 0 379.2px 113px; + } + + @include mq(lg, max) { + padding: 0 57.2px 105px; + } + + @include mq(md, max) { + padding: 0 55.2px 65px; + } + + .sliderArrows { + // background-color: blue !important; + padding: 0; + margin: 0; + + &.sliderLeftArrow { + margin-left: 40px; + + @include mq(xl, min) { + margin-left: 360px; + } + + &::before { + content: ""; + width: 11.2px; + height: 29.6px; + background-image: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-left-andreamm.svg"); + } + } + + &.sliderRightArrow { + margin-right: 40px; + + @include mq(xl, min) { + margin-right: 360px; + } + + &::after { + content: ""; + width: 11.2px; + height: 29.6px; + background-image: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-right-andreamm.svg"); + } + } + + .caretIcon { + display: none; + } + } + + .paginationDotsContainer { + // background-color: lightgreen; + bottom: 64px; + gap: 12px; + align-items: center; + + @include mq(md, max) { + bottom: 32px; + } + + .paginationDot { + width: 10px; + height: 10px; + margin: 0; + padding: 0; + background: #000000; + + &--isActive { + width: 17px !important; + height: 17px !important; + border: 0.5px solid #000000; + background: #ffffff; + } + } + } +}